ドリル式ホームページの作り方

vertical-alignというもの

ドリル式ホームページの作り方TOP  >>  Lesson6〜tableを使ったレイアウト〜  >>  vertical-alignというもの

vertical-alignというもの

vertical-alignはテキストや画像の縦方向の位置を指定するのに使用します。

サイトの骨格をtableで作る際は、かならず使用するタグであり、前回のサンプルのようにtableで作った空間において、メニューが縦中央に配置してしまっていると思いますが、これを上詰め配置に変えるのによく使います。

あとは、文字の前にワンポイントの画像を配置する時(メニュー)の、画像と文字の縦方向の配置を調整するのに使用します。

tableの上詰めとワンポイント画像の配置の二通りの使用法だけ知っていれば十分でしょう。

使い方は、「vertical-align:○○○;」の○○○に、top(上詰め)、middle(中央)、bottom(下詰め)のどれかを入れるのが普通ですが、画像の大きさによっては、middleにしてもずれることがしばしばあるので、数値指定(px)を使った方がよいかもしれません。

以下の記述をstyle.cssに追加します。

td {
vertical-align:top;
}

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson6〜tableを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. tableタグを覚える
  3. table内に文章を記述する
  4. スタイルシートを適用する
  5. vertical-alignというもの
  6. ブロックレベル要素とインライン要素
  7. リスト(ul)を扱う上での注意点

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.