<<PREV | TOP | NEXT>>

'vertical-align' プロパティ

last modified 10th/Oct. 2000

  1. 画像要素
  2. IMG 要素の基本
    1. 代替テキストの指定 - alt 属性と title 属性の利用
    2. 画像をより軽快に - フォーマットなど
  3. 画像の垂直方向の表示位置
    • CSS の 'vertical-align'
  4. 浮動化と後続テキストの周りこみ
  5. 周囲に空白を挿入
  6. 周囲にボーダーを表示

align 属性非推奨属性ですから、出来るだけ CSS を利用するようにしましょう。本節では、画像の垂直方向の表示位置を調整するための CSS を紹介します。

style 属性によるインラインスタイル

<img src="../back.jpg"
   style="vertical-align:top">
<img src="../back.jpg"
   style="vertical-align:middle">

'vertical-align' プロパティは、インライン要素の垂直方向表示位置を指定し、任意のインライン要素に適用できます。その取り得る値は、次のように定義されています;

vertical-alignbaseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <%> | inherit

負値が許され、正は上へ、負は下へずらします。

baseline
指定されたインラインボックスと親要素のボックスのベースライン(或は下辺)を揃えます。
sub
親ボックスの下付き文字位置まで字下げしますが、フォントサイズには影響を与えません。
super
親ボックスの上付き文字位置まで字上げしますが、フォントサイズには影響を与えません。
text-top
指定されたインラインボックスの上辺と親要素のフォントの上辺と揃えます。
<%>

或る文書中に登場する全てのIMG要素に対して、初期設定を middle にしたい場合は、 HEAD 要素内で STYLE 要素を記述します;

STYLE 要素での宣言;

<head>
<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
img { vertical-align: middle }
img.sup { vertical-align: super }
-->
</style>
</head>

二つ目のスタイル宣言 img.sup { vertical-align: super } では、 class 属性値 sup を与えた IMG 要素が上付き添え字の位置に表示されるように設定してあります。

CSS の基本的な使い方と用語に付いては、「CSS の紹介」を参照ください。

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO