テキストに関するスタイル
ここではテキストに関するスタイルについて説明していきます。
- line-height (行間の設定)
- letter-spacing (文字間隔の設定)
- text-align (行揃えの設定)
- vertical-align (縦揃えの設定)
文章の縦揃え(vertical-align)
「text-align」が文章の横方向に対して整列させるのに対して、「vertival-align」は縦方向に整列を行うことができます。
縦方向の整列といわれてもなかなかピンとこないかもしれませんので、下にイラストを描いてみます。
『vartical-align』の説明をするには、要素が３つ必要になってきます。
まず、全体の大きさを決める『親要素』、次にベースの大きさを決める『子要素』、そして実際にvartical-alignを設定する『孫要素』です。
では、この孫要素をvartical-alignで色々な場所に配置してみましょう。
<css記述例>
.oyayouso{font-size:48px}
.koyouso{font-size:18px}
.ver {background-color: #C1E39B;}
.top{font-size:10px;vertical-align:top}
.text-top{font-size:10px;vertical-align:text-top}
.middle{font-size:10px;vertical-align:middle}
.baseline{font-size:10px;vertical-align:baseline}
.text-bottom{font-size:10px;vertical-align:text-bottom}
.bottom{font-size:10px;vertical-align:bottom}
<HTML記述例>
【TOPの場合】
<div class="ver">
<span class="oyayouso">親</span>
<span class="koyouso">子 abcdefg</span>
<span class="top">TOP</span></div>
【text-topの場合】
<div class="ver">
<span class="oyayouso">親</span>
<span class="koyouso">子 abcdefg</span>
<span class="text-top">TEXT-TOP</span></div>
【middleの場合】
<div class="ver">
<span class="oyayouso">親</span>
<span class="koyouso">子 abcdefg</span>
<span class="middle">MIDDLE</span></div>
【baselineの場合】※初期値
<div class="ver">
<span class="oyayouso">親</span>
<span class="koyouso">子 abcdefg</span>
<span class="baseline">BASELINE</span></div>
【text-bottomの場合】
<div class="ver">
<span class="oyayouso">親</span>
<span class="koyouso">子 abcdefg</span>
<span class="text-bottom">TEXT-BOTTOM</span></div>
【bottomの場合】
<div class="ver">
<span class="oyayouso">親</span>
<span class="koyouso">子 abcdefg</span>
<span class="bottom">BOTTOM</span></div>
と記述してあげれば、下のような表示結果になると思います。
親要素・子要素・孫要素の各要素には背景色を設定して色分けしています。
このCSSは仕組みを理解するのに少しややこしく、覚えるのに苦労するかもしれません。
でもこれを覚えると、例えば要素の部分を画像にして上揃えや下揃えなんかにピタッと揃えれば、キレイなレイアウトを演出できて便利です。
ぜひ、覚えて活用してみてくださいね。
 |
 |
 |
|---|
