cellが便利!TweetPocketみなさんこんにちは、mayukouです。「コーポレートサイト作るけど、メニュー内容変わるかも」そんなお願いが来た時に。最近、コーポレートサイトを作ったのですが、その際にグローバルメニューに変更があるという指示があった際に、このtable-cellの方法を使いました。均一にメニューの幅を同じに保つことができます。更新してメニューやコンテンツが増えていくブログ型のサイトにもおススメです。cellとは、divやliタグなど、もともと別の要素だったものを、tableの構造と同じように使えるCSSセレクタです。ブラウザはIE8から対応しています。tableのセルのように均等に分割することができます。今までfloatを使っていた2カラムや3カラムレイアウトにも使えます。下に持って来たり、自在に配置することができます。liタグでメニューをコーディングします。/*縦方向の中央寄せ*/}メニュー幅は、100%にしていますが、任意の幅にして大丈夫です。メニューの大枠となるulタグにdisplay:tableと設定します。(displayプロパティは通常、display:blockなどインラインタグをブロックタグに変更する時に使用します。)そうすることで、divタグがtableタグと同じように機能することを指示します。table-layout:fixedで、子要素であるliのメニュー幅を指定しなくても均一に配置することができるのです。子要素であるliタグにdisplay:table-cellと指定します。事例CSSのデザインは、任意で設定をお願いします。横並びの指定方法をご紹介しました。delaymaniaさんのわかりやすい記事を参考にさせていただきました。最後にいかがでしたか?CSSを少し変えるだけで、とても簡単に使えるようになります。投稿者プロフィールmayukouWebデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。