CSSの基礎 その1 > CSSの基礎 その2 > 作例 > 総合

06 テキストの書式設定

スタイルシートではHTML構文より高度な書式設定を行うことができます。

<POINT-1> 文字の色{color:色情報;}
<文字色を設定します。> ●color:#RRGGBB;
Rの部分には赤色、Gの部分は緑色、Bの部分には青色のそれぞれ度合いをしていします。
●color:rgb(○%,○%,○%);
度合には0%~100%の割合を指定します。
●color:rgb(○,○,○);
度合いは0~255の数値を指定します。
●color:色名;
色名についてはW3Cで定義されている色名で指定します。
<実習> color_1.html
<解説> color_1_1.html
<実習> color_2.html
<解説> color_2_1.html
<POINT-2> カラーチャート
<POINT-3> ●文字の行揃え位置{text-align:行揃え位置;}
●文字の行揃え(水平位置)を設定します。
《行揃え位置 》 ●left ・・・・左揃え
●center・・・中央揃え
●right・・・右揃え
Onepoint ●<div>タグと<span>タグ
●タグには何らかの表示効果があります。例えば、&lt;h1&gt;タグでは文字のサイズが変わり、改行されて表示されます。それはスタイルシートにおいても同様なのですが、そのタグ固有の表示効果がスタイルの設定の際にはわずらわしく感じる場合があります。そんな時に使われるのが表示効果を持たない&lt;div&gt;タグと&lt;span&gt;タグです。&lt;div&gt;タグは改行されますが、&lt;span&gt;タグは改行されずに表示されます。
<実習> text-align_1.html
<解説> text-align_1_1.html
<実習> text-align_2.html
<解説> text-align_2_1.html
<POINT-4> ●文字飾り {text-decoration:装飾;}
●文字飾りを設定します。
《装飾》 ●underline  ・・・下線
●overline ・・・上線
●line-through ・・・取り消し線
●blink ・・・点滅
●none ・・・文字装飾をなくします。リンクの線などを消す時に使用します。
<実習> text-decoration_1.html
<解説> text-decoration_1_1.html
<実習> text-decoration_2.html
<解説> text-decoration_2_1.html
<実習> text-decoration_3.html
<解説> text-decoration_3_1.html
<実習> text-decoration_4.html
<解説> text-decoration_4_1.html
<POINT-5> ●文字間隔{letter-spacing:サイズ;}
●単語間隔{word-spacing:サイズ;}
●※文字間隔(隣り合う文字同士)と単語間隔(アルファベットの単語同士)を設定します。 サイズ設定には「単位(mm,cm,in,pt,pc,em,px)付きの数値」が使われます。数値にはマイナスの値を指定することも出来ますが、数値によっては文字が重なることもあります。「normal」を設定すると通常の文字間隔にすることができます。
<実習> letter-spacing_1.htm
<解説> letter-spacing_1_1.htm
<実習> letter-spacing_2.htm
<解説> letter-spacing_2_1.htm
<POINT-6> ●インデント{text-indent:サイズ;}
●※テキストのインデント(ウインドウ左端からのスペース)を設定します。
サイズ設定には「単位(mm,cm,in,pt,pc,em,px)付きの数値」か「パーセント(%)」が使われます。
●「パーセント」は、ブラウザのウインドウサイズに対するインデント比率を設定できます。
<実習> text-indent_1.htm
<解説> text-indent_1_1.htm
<実習> text-indent_2.htm
<解説> text-indent_2_1.htm
<実習> text-indent_3.htm
<解説> text-indent_3_1.htm
<POINT-7> ●行間{line-height:サイズ;}
●※行間(行の上のラインから次の行の上のラインまでの幅)を設定します。
●サイズ設定には「単位(mm,cm,in,pt,pc,em,px)付きの数値」が使われます。
<実習> line-height_1.htm
<解説> line-height_1_1.htm
<実習> line-height_2.htm
<解説> line-height_2_1.htm
<POINT-8> ●未訪問リンク a:link{属性:値;}
●訪問済リンク a:visited{属性:値;}
●マウスカーソル時a:hover{属性:値;}
●※リンク部分のスタイルを設定します
<実習> link-style_1.htm
<解説> link-style_1_1.htm
<実習> link-style_2.htm
<解説> link-style_2_1.htm
<POINT-9> ●太字{font-weight:太さ;}
●フォントの太さを設定します。
《太さ》 normal ・・・標準の太さ
bold ・・・一般的な太字
lighter ・・・標準より一段階細いフォント
bolder ・・・標準より一段階太いフォント
数値(100~900)・・・目安として「normal」は400、「bold」は700となっています。
<実習> link-weight_1.htm
<解説> link-weight_1_1.htm
<実習> link-weight_2.htm
<解説> link-weight_2_1.htm
<POINT-10> ●書体(フォント){font-family:フォント名or一般名;}
●※書体(フォント)を設定します。
●フォント名・・・fontタグと同様に複数のフォントを「,」カンマ区切りで指定することができます。フォント名は大・小文字、全・半角など正確に指定する必要があります。日本語フォントに限らずフォント名にスペースが含まれる場合はフォント名をシングルクォーテーションまたはダブルクォーテーションでくくる必要があります。
●一般名・・・よく似た特徴を持つフォントをカテゴリーで分けたものを指します。
<実習> font-family_1.htm
<解説> font-family_1_1.htm
<One point>