コーディングメソドロジー

第69回 便利なCSS3の紹介

最近ではレスポンシブWebデザインの案件や高度な技術を駆使して表現されるWebサイトが増えてきました。
それらを実現するためにCSS3を活用する場面が多くなってきています。今回は、いろいろな場面で活用できる、実装に役立つCSSを幾つかまとめました。一部のブラウザではサポートされていないものもありますが、覚えておくと今後役立つかと思います。

① box-sizingプロパティ

ボックスサイズの幅と高さ(width, height ) の算出方法を指定する際に使用するプロパティです。
width や height と同時に border や padding を指定しているときに、少し値を変えただけで見た目が崩れることがよくあります。
これはボックスサイズの算出方法が複雑なのが原因です。そんな面倒な問題を解決してくれるのが、 box-sizing プロパティです。

デフォルトのボックスモデル(①-1)ではwidth、heightの値にはpaddingとborderの値を含みません。

例:ボックスモデル
width : 200px、padding : 20px 、 border: 5px;

デフォルトのボックスモデルで実際に表示される要素の幅は
200px + (20X2)px + (5X2)px =250pxです。
box-sizingを指定するボックスモデル(①-2)の値 にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。このように box-sizing に border-box を指定しておくことで、指定した width の通りに要素を表示してくれるようになります。

cssソース

② box-ordinal-groupプロパティ

display: box 内に配置されたブロック要素(divやpなど)を表示させる順番を指定します。HTML の記述順序に関わらずパーツの順序を変更したい際に使用するプロパティです。

例えば、レスポンシブは媒体により、要素の順番が変わることがあるので、box-ordinal-groupプロパティを使用することで、要素の順序の簡単に指定することが可能です。

2014年7月現在はAndroidではサポートされていません。

PC SP

cssソース

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム