Blog

css3を使って要素を上下左右中央に配置する方法

2013.09.10Cat:css3 デザイナー

今回は、css3を使って、要素を上下左右中央に配置してみたいと思います。

けっこう前は、tableタグを使えば簡単にできたのですが、
コーディング方法が進歩するにつれ、tableタグを使うのはかっこわるい等の理由(もっとちゃんとした理由があります笑)から、
廃れていき、実際の表組みでないとtableタグを使わなくなりました。

tableを使わないとなると、左右の中央は配置は簡単なんですが、
上下の中央はほぼといっていいほど出来ませんでした。

しかし、css3からdisplayのプロパティで、「table-cell」というものを使えば
できるようになります!

ただ、このプロパティはIE8から使えるようなので、IE7対応の場合は使えないですね。。。

まずはデモをご覧ください。

DEMO

それでは、table-cellの使い方を説明していきます。

table-cellを使って、上下左右中央に配置する

html

css

table-cellを使いたい場合、その親の要素にtableを設定しないと、
動かないようです。

この用途ではなく、カラムのレイアウトを組む場合にも、
table-cellは使えるようです。

tableタグ関係ということでついでに、
tableタグを使用していて、レスポンシブデザインに対応させたい場合、
tableがそのままだとスマホで見にくいことがありますので、
それを解消するための2つの方法をご紹介します。

tableタグをレスポンシブデザインに対応させる方法

こちらは、メディアクエリーを使い横幅に合わせて
th,tdのdisplayのプロパティをblockに変更するだけでできます。

以下がcssになります。

css

ただ、tableの列が多い場合はこれは難しいですね。。。

その場合ですが、もう一つの方法のdisplayのlist-itemを使用するのがいいかもしれません。

あまり大きく変わらないんですけど、
なんとなくリスト風に出来たらちょっと違うんじゃないかということで・・・
見出しの文字を隠して、擬似要素のbeforeを使って入れているのですが、
これは修正があったらcss修正しないと行けないので、ちょっと微妙かな〜

もっと簡単でフレキシブルな方法があればぜひ知りたいですね!

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ