アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2009年4月

2009年4月24日

リストで作ったテキストメニューをCSSで比較的簡単に横並びにする方法。

成功者になるための必読ブログとは?

CSSのテクニック。

久々のエントリーです。(汗)

ぼーっとしていたわけでもなく、いろいろごにょごにょしていたらいつの間にか時間が経っていました。

月日の経つのは早いものだねぇ~(遠い目)

ってことで、このあいだ生徒さんにCSSでのレイアウトについて聞かれて、そういややったことなかったなーってことをメモ。

強制的に横並びにしたいの。

サイトを作るときにフッターとかにテキストメニューを並べたいとき、こだわらないのであれば、pタグとかにメニュー項目を縦棒(|)で区切って並べれば簡単。

例:| ホーム | お知らせ | なんとか | かんとか |

でも、htmlのマークアップにこだわるならば、どうせだったらリスト(ul,li)で並べたいと思うのがウェブ屋の佐賀…じゃなくて性。

単に左揃えだったら、ulにborder-leftを設定し、liにborder-rightを設定し、liの左右のpaddingを適当に設定してdisplay:inline;か、float:left;すればいい。

んが、さらにそいつをセンターに揃えたいってなると、意外とめんどくさくてやってなかった。

で、結果としては…そんなに難しいもんじゃないみたい。
(食わず嫌いみたいなもんです。汗)

リスト(ul,li)で作ったテキストメニューを横並びにする方法。

とりあえず、

<div id="hoge">
<ul>
<li><a href="#">ホーム</a></li><!--
--><li><a href="#">お知らせ</a></li><!--
--><li><a href="#">なんとか</a></li><!--
--><li><a href="#">かんとか</a></li><!--
--></ul>
</div>

こんな感じのブロックを用意して、
(※liの前後のコメントタグは、IE6で改行コードによる余計なスペースが入るのを回避するため。)

CSSは、

ul,ol,li {
list-style: none;
}

#hoge {
width: 100%;
background: #00FFCC;
padding: 10px 0;
text-align: center;
}

#hoge a {
color: #FFFFFF;
}

#hoge ul {
border-left: 1px solid #FFFFFF;
display: inline;
}

#hoge li {
border-right: 1px solid #FFFFFF;
display: inline;
padding: 0 5px;
}

ってな感じにすればOK。とりあえずIE6、IE7、FFxでチェックしたけど大丈夫みたいです。

リスト(ul,li)で作ったテキストメニューを横並びにする方法。のサンプル

※サンプルは多少CSSを追加しています。

キモはulをdisplay:inlineで強制的にインライン要素にして、外枠の#hogeでtext-align:centerを使ってセンタリングするところなんですが、これってCSS的にアリなのかナシなのかは微妙っす。

とりあえず、ulでマークアップしたテキストメニューを、ソースを汚さずに簡単にセンタリングするひとつの方法として。

090507追記

某GOくんからの情報で、

上記のサンプルですと、
メニュー項目一つ一つの文字数が多かったり、項目数が多い場合など
すでに横幅ギリギリで収まってる場合、
Firefox2や文字スケールの制御JSなどを使って拡大表示すると、
文字の半端なところで改行されたりしてしまいますよ。

とのことなので、#hoge liの属性に

width: auto;
white-space: nowrap;

を追加すると、はみ出た場合li要素が次の行にブロックごと落ちてくれる…とのことです。

つまり、

#hoge li {
border-right: 1px solid #FFFFFF;
display: inline;
padding: 0 5px;
width: auto;
white-space: nowrap;
}

って感じ。

(※サンプル修正済み)

GOくん、情報ありがとねーん。

 

投稿者 kuro : 17:15 | 固定リンク | コメント (0) | トラックバック(0) | ID:364

ページトップ△