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. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

  2. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  3. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

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

  4. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  5. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  6. jQuery

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

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

    気に入った画像を切り抜いて保存できる!スクラップアプリ、Pixaveの使い方
  3. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。
  4. Photoshop

    点線もかける!Photoshopでラインを引く方法を新たに発見(ストローク機能)…
  5. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpres…
PAGE TOP