テキストの視覚的提示を制御するために、CSS を使用する

例 1: フォントファミリーを制御するために CSS の font-family を使用する。

XHTML:

<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

CSS:

code { font-family:"Courier New", Courier, monospace }

例 2: テキストの配置 (配列) を制御するために CSS の text-align を使用する。

XHTML:

<p class="right">This text should be to the right of the viewport.</p>  

CSS:

.right { text-align: right; }

例 3: テキストのサイズを制御するために CSS の font-size を使用する。

XHTML:

<p>09 <strong class="largersize">March</strong> 2008</p>  

CSS:

strong.largersize { font-size: 1.5em; }

例 4: テキストの色を制御するために CSS の color を使用する。

XHTML:

<p>09 <em class="highlight">March</em> 2008</p>  

CSS:

.highlight{ color: red; }

例 5: イタリック体のテキストにするために CSS の font-style を使用する。

XHTML:

<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology 
Blog</a>.</p>

CSS:

.featuredsite{ font-style:italic; }

例 6: テキストの太さを制御するために CSS の font-weight を使用する。

XHTML:

<p>This deal is available <span class="highlight">now!</span></p> 

CSS:

.highlight { font-weight:bold; color:#990000; }

例 7: テキストの大文字小文字の区別を制御するために CSS の text-transform を使用する。

XHTML:

<p>09 <span class="caps">March</span> 2008</p>  

CSS:

.caps { text-transform:uppercase; }

例 8: テキストの行間を制御するために CSS の line-height を使用する。

CSS の line-height プロパティを使って、段落の行間をフォントの高さの 2 倍に表示する。

XHTML:

<p>Concern for man and his fate must always form the<br />  
chief interest of all technical endeavors. <br />
Never forget this in the  midst of your diagrams and equations. </p>

CSS:

p { line-height:2em; }

CSS の line-height プロパティを使って、テキストの行間をフォントの高さより少なく表示させる。テキストの 2 行目は、テキストの 1 行目の後に配置されて、あたかも 1 行目の一部だがやや下がっているように見える。

XHTML:

<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

CSS:

.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }

例 9: 文字間を設定するために CSS の letter-spacing を使用する。

CSS の letter-spacing プロパティは、2 行目のテキストでより近い文字を表示するために使用される。

XHTML:

<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>

CSS:

.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }

CSS の letter-spacing プロパティは、見出しでさらに離れた文字を表示するために使用される。

XHTML:

<h1 class="upper2">News</h1>

CSS:

.upper2 { text-transform:uppercase; letter-spacing:1em; }

例 10: テキストと画像をレイヤー化するために CSS の background-image を使用する。

CSS の font-style プロパティを使って、バナーのテキスト要素を表示させ、background-image プロパティを使って、テキストの後ろの画像を表示させる。

XHTML:

<div id="banner"><span id="bannerstyle1">Welcome</span> 
<span id="bannerstyle2">to your local city council</span></div>

CSS:

#banner { 
  color:white; 
  background-image:url(banner-bg.gif); 
  background-repeat:no-repeat; 
  background-color:#003399; 
  width:29em; 
}

#bannerstyle1 { 
  text-transform:uppercase; 
  font-weight:bold; 
  font-size:2.5em;
}

#bannerstyle2 { 
  font-style:italic; 
  font-weight:bold; 
  letter-spacing:-0.1em;
  font-size:1.5em; 
}

例 11: テキストの最初の行の提示を制御するために CSS の first-line を使用する。

CSS の :first-line 疑似クラスを使って、最初の行をより大きなサイズで赤色に表示する。

XHTML:

<p class="startline">Once upon a time...<br />
...in a land far, far away...  </p>  

CSS:

.startline:first-line { font-size:2em; color:#990000; }

例 12: テキストの最初の文字の提示を制御するために CSS の first-letter を使用する。

CSS の :first-letter 疑似クラスを使って、最初の文字をより大きなサイズで赤く、縦位置を中央揃えにして表示する。

XHTML:

<p class="startletter">Once upon a time...</p>  

CSS:

.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }