TOP ＞ スタイルシートで文字をデザイン ＞ 行の縦方向のそろえ方を決める
行の縦方向のそろえ方を決める
一行のセンテンスの中に高さの違う文字が混ざっている場合、デフォルトではベースライン （ベースラインとはアルファベッチのaやkの文字の下のラインです。）にそろえて表示されます。
しかし、場合によっては上付きや下付き、中央そろえなど、 デザインの都合によって高さの小さい文字列の表示位置を変えたい場合があるでしょう。
そんな時には『vertical-align』 プロパティを使用します。値はキーワードと数値で指定できます。
| キーワード | 縦方向のそろえ方 |
| baseline | ベースラインにあわせる（デフォルト） |
| top | 上端にそろえる |
| middle | 中央にそろえる |
| bottom | 下端にそろえる |
| text-top | テキストの上端にそろえる |
| text-bottom | テキストの下端にそろえる |
| sub | 下付きにする |
| super | 上付きにする |
数値で指定する時は、「px」、「pt」などの単位で指定します。0に設定するとデフォルトのベースラインにそろえる事になります。 プラスの値で文字が上のほうに、マイナスの値なら下のほうに移動します。
パーセントも使用できます。これも0%でベースラインです。プラスなら『line-height』 プロパティの高さを基準に上方向に移動します。
ただし、Webブラウザすべてが、すべてのキーワードに対応しているわけではないので、気をつけてください。
行の縦方向のそろえ方を決める
【書き方】
vertical-align : [キーワード | 数値｜%] ;
"行の縦方向のそろえ方を決める"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 .body{font-size: 30px;} .c1{font-size: 15px; background-color: #99ff99;} .c2{font-size: 15px; vertical-align: top; background-color: #99ff99;} .c3{font-size: 15px; vertical-align: middle; background-color: #ff99ff;} .c4{font-size: 15px; vertical-align: bottom; background-color: #9999ff;} .c5{font-size: 15px; vertical-align: text-top; background-color: #99ff99;} .c6{font-size: 15px; vertical-align: text-bottom; background-color: #9999ff;} .c7{font-size: 15px; vertical-align: sub; background-color: #99ff99;} .c8{font-size: 15px; vertical-align: super; background-color: #9999ff;} .c9{font-size: 15px; vertical-align: 15px; background-color: #99ff99;} .c10{font-size: 15px; vertical-align: -15px; background-color: #9999ff;} .c11{font-size: 15px; vertical-align: 70%; background-color: #99ff99;} .c12{font-size: 15px; vertical-align: -70%; background-color: #9999ff;} 【HTML本文】 <html> <head> <title>行の縦方向のそろえ方を決めるのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/219.css" type="text/css"> </head> <body bgcolor="silver"> <p>行の縦方向のそろえ方を設定します。文字のサイズを30px、テスト用の文字を15pxにしています。</p> <p>この行は<span class="c1">baseline</span>の例です。</p> <p>この行は<span class="c2">top</span>と<span class="c3">middle</span>と<span class="c4">bottom</span>の例です。</p> <p>この行は<span class="c5">text-top</span>と<span class="c6">text-bottom</span>の例です。</p> <p>この行は<span class="c7">sub</span>と<span class="c8">supper</span>の例です。</p> <p>この行は<span class="c9">15px</span>と<span class="c10">-15px</span>の例です。</p> <p>この行は<span class="c11">70%</span>と<span class="c12">-70%</span>の例です。</p> </body> </html> |
[
スタイルシートで文字をデザイン ]
