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で作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  2. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

  3. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  4. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Photoshop

    ついつい押したくなる!立体的なボタンのデザインをPhotoshopで作る方法
  2. クリスマス

    メリークリスマス☆ハイアットのケーキや、ケンタッキーのチキンなど家で過ごしたクリ…
  3. wordpress

    wordpressが重たい!そんな困った時に便利なプラグイン
  4. free font

    デザイン

    デザインの質が上がる!私が利用しているフリーフォントサイト
  5. グッズ

    アナログ手法も極めたい!私が使っている水彩画道具のご紹介
PAGE TOP