CSS

グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!


みなさんこんにちは、mayukouです。
「コーポレートサイト作るけど、メニュー内容変わるかも」そんなお願いが来た時に。
最近、コーポレートサイトを作ったのですが、
その際にグローバルメニューに変更があるという指示があった際に、このtable-cellの方法を使いました。
この方法を使えば、メニュー項目が増えても、
均一にメニューの幅を同じに保つことができます。
だから、どんどん更新してメニューやコンテンツが増えていくブログ型のサイトにもおススメです。
ぜひ、使ってみてください。

スポンサードリンク

Table cellとは?

tableやTable cellとは、divやliタグなど、もともと別の要素だったものを、
tableの構造と同じように使えるCSSセレクタです。
ブラウザはIE8から対応しています。
tableのセルのように均等に分割することができます。

今までfloatを使っていた2カラムや3カラムレイアウトにも使えます。

またtableタグと同じように、vertical-alignを指定でき、
セル内の縦や横を上に持って来たり、
下に持って来たり、自在に配置することができます。

table-cellでメニューを作る!簡単な使い方

HTML

通常通り、ul liタグでメニューをコーディングします。

CSS

メニュー幅は、100%にしていますが、任意の幅にして大丈夫です。
まずメニューの大枠となるulタグにdisplay:tableと設定します。
(displayプロパティは通常、display:blockなどインラインタグをブロックタグに変更する時に使用します。)
そうすることで、divタグがtableタグと同じように機能することを指示します。
table-layout:fixedで、子要素であるliのメニュー幅を指定しなくても均一に配置することができるのです。
子要素であるliタグにdisplay:table-cellと指定します。

DEMO 事例

CSSのデザインは、任意で設定をお願いします。あくまで、横並びの指定方法をご紹介しました。

delaymaniaさんのわかりやすい記事を参考にさせていただきました。

最後に

いかがでしたか?CSSを少し変えるだけで、とても簡単に使えるようになります。ぜひ試してみてください♫

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  2. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  3. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた

    みなさんこんにちは、mayukouです。ウェブデザインのトレンドであ…

  4. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

  5. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  6. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. illy

    レポート

    うちカフェでホッと一息できる*illyのコーヒー粉が届きました!
  2. Illustrator

    メリハリがつく!Illustratorでドロップキャップを作る方法
  3. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材…
  4. Web Design

    今流行りのロングシャドウの簡単な作り方
  5. マーケティング

    趣味ブログのPV(ページビュー)が1ヶ月で2倍に!私がやったSEO対策とは。
PAGE TOP