CSS 3のボックスレイアウトでコンテンツを画面の中央に配置する
エ・ビスコム・テック・ラボ
2008-12-03 19:55:01
4回に渡って紹介してきたCSS 3の新しいレイアウト手法「ボックスレイアウト」。今回はボックスレイアウトを利用して、コンテンツを画面の中央に配置する方法を紹介する。
box-alignとbox-packプロパティ
box-alignとbox-packは、ボックス要素の子要素の配置を指定するプロパティだ。box-alignは縦方向の、box-packは横方向の配置を指定する。ただし、box-orientプロパティでレイアウトの方向を「vertical」と指定した場合は、box-alignが横方向の、box-packが縦方向の配置を指定するようになる。box-orientプロパティについて詳しくは、前回の記事を参照してほしい。
なお、box-alignとbox-packプロパティで指定できる値は次のようになっている。
| 値 | 縦方向の配置を指定する場合 | 横方向の配置を指定する場合 |
|---|---|---|
| start | 上に配置 | 左に配置 |
| center | 中央に配置 | 中央に配置 |
| end | 下に配置 | 右に配置 |
4回にわたってボックスレイアウトについて紹介してきたが、現在のCSSでは設定が難しいレイアウトを簡単に実現することができ、紹介してきた用途以外にもさまざまな使い方ができそうだ。CSS 3の中でもまだまだ不確定な要素の多い機能だが、今後も動向に注意していきたい。
- ホワイトペーパー
スマートデバイスに忍び寄る危機！
物理→VDI環境移行「3つの罠」とは
セキュリティでブランド価値を向上
日立のビッグデータをライブ体験
クラウド意識調査結果を公開
データ爆発に備える"無限の可能性"
出遅れたＢＹＯＤの起爆剤となるか
