リストタグで横並びメニューと縦並びメニューを作成する

2006/09/14

(2)

テーマ：ホームページ作成の悩み(545)

カテゴリ：CSSメモ

Web標準の教科書

WEBレイアウト・セオリー・ブック

スタイルシートスキルアップ・デザインブック（1）

スタイルシートスキルアップ・デザインブック（2）

CSSでメニューを作るときのメモです。

リストタグを使って横並びメニューを作る例をよく見るけれど
縦メニューを作るときと何が違うのかな？と思っていたの。

display:block;

背景色を変化させたりするときに
リンクテキストの範囲のみ適用範囲にするんじゃなくて
そのブロックを適用範囲にしようと思うとブロック化するためにこれを使うわけだけど･･･

■横並びメニュー

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    float: left;
}

li a {
    display: block;
    width: 100px;
    height: 30px;
    text-align: center;
    color: black;
}

さーてと。上のソースに一行追加すると、横並びメニューが縦並びメニューになるんですよ。

うーん。うーん。
考えた結果、ulの括りに width:100px; と入れてみる。
リストの横幅を li a で指定している横幅を参照して適当な値を入れてあげればOKだよね。
この場合はボーダーも余白もないから100pxでOKってわけ☆

･････つづく

Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

お気に入りの記事を「いいね！」で応援しよう

最終更新日 2006/09/14　08:34:48 PM
コメント(2) | コメントを書く

[CSSメモ] カテゴリの最新記事

Web標準にアプローチ 〔まいまいのお宿。〕

リストタグで横並びメニューと縦並びメニューを作成する

Web標準にアプローチ　〔まいまいのお宿。〕