inlineを使ったメニュー:CSS小技

ブログが作りたい!CSSの小技 > inlineを使ったメニュー:CSS小技

inlineを使ったメニュー:CSS小技

inlineを使ったメニュー:CSS小技

CSSの小技(18)

今回は、「display: inline;」を使ってメニューを作る CSSの小技をご紹介いたします。

前回の float(left)を使った方法よりも、ちょっと手軽に使用する印象があります。いわゆる「ちょっとだけよん、あんたも好きね~」というレベルですね。

FC2ブログには、inlineを使用しているテンプレートが多いようなので、カスタマイズ経験のある人は、見かけたことがあるかもしれません。覚えておくと、カスタマイズ時に役に立ちそうです。


inlineを使ったメニューとは?

inlineを使ったメニューというのは、たまに見かける横並びのメニューのことです。

inlineを使ったメニューのサンプル

ただ、ヘッダー下に設置するようなメインのナビゲーションメニューに使っている人は、あまり見たことがありません。(そういう場合は、floatを使うみたいです)

inlineがよく使われているのは、ブログの記事の下の方に表示される次のような箇所が多いように思います。

inlineを使った例

と言うのも、いじってみると分りますが、inlineによる方法は、floatによる方法よりも、ちょっと自由度が低い感じがします。(いろいろなことができない)

今回もサンプルを用意しました。良かったらその簡素なサンプルをご覧になってみてください


inlineを使ったメニューを作る方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、ulでリスト表示(縦)されている liを、「display: inline;」して横並びにしているところです。

なぜ横並びになるかと言うと、ブロックレベルである liを、インライン要素に変換しているので、自然と横並びになっているわけです。

3:CSSハック付き

IE7以下は、期待するような表示にならない場合があります。CSSハックが必要です。(IE8は大丈夫みたいです)


inline-block

先日、CSS HappyLifeさんの記事の中で「display: inline-block;」というコードを発見しました。

よく分からないですけれど、displayには「inline-block」なんてのもあるようです。

詳しいことは小山田さんが書いていらっしゃる『display : inline-block をつかったレイアウト』が参考になります。

どうやら inlineを使わずに、inline-blockを使う方が良いのかもしれませんね。近いうちに試してみようと思います。

前の記事へ
次の記事へ

次回予告

次回も、ナビゲーションメニューに関する CSSの小技をご紹介したいと思います。画像がロールオーバーするメニューです。


関連記事

CSSに関連する記事の一部を、ご紹介します。

作成日:2009/05/09 更新日:2009/05/09

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/502-27f34334
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて