CSS 3のボックスレイアウトでコンテンツを画面の中央に配置する

エ・ビスコム・テック・ラボ
2008-12-03 19:55:01
  • このエントリーをはてなブックマークに追加

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プロパティで指定できる値は次のようになっている。

box-alignとbox-packプロパティで指定できる値
縦方向の配置を指定する場合横方向の配置を指定する場合
start上に配置左に配置
center中央に配置中央に配置
end下に配置右に配置

 4回にわたってボックスレイアウトについて紹介してきたが、現在のCSSでは設定が難しいレイアウトを簡単に実現することができ、紹介してきた用途以外にもさまざまな使い方ができそうだ。CSS 3の中でもまだまだ不確定な要素の多い機能だが、今後も動向に注意していきたい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]