catch

使えるとレスポンシブWebデザインに便利なCSS

使えるとレスポンシブWebデザインの実装に役立つCSSを幾つかまとめました。一部のブラウザでは非サポートのものもありますが、案件によっては使える状況になってきていると思います。

box-sizing

chrome firefox safari ie safari
27 21 6 8 9 10 6 2.3 3 4.2

デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。

	#box-sizing{
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	

box-sizing

特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。
例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。

Fluid Grid System

デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅を指定します。
一方box-sizing:border-boxを指定した場合、2カラムは全体のカラム数の半分、つまり50%にあたるので単純にwidth:50%を指定すればOKです。これにpaddingでガター幅を指定します。
このようにカラム幅の計算が感覚的に行えます。最近では多くのFluid Grid SystemやCSSフレームワークで使用されてます。
(※余談:CSSプリプロセッサを使用すればそもそも計算の手間は省けますが…)

策定状況は草案です。なお、殆どのブラウザはpadding-boxに対応していません。
CSS Basic User Interface Module Level 3 (CSS3 UI)

Flexible Box

chrome firefox safari ie safari
27 21 6 8 9 10 6 2.3 3 4.2
× ×

その名の通り柔軟にコンテンツを配置できます。縦並びや横並び、配置したボックスの並びや可変設定なども指定できます。特に表示する順序も変えることができるので、PCとスマートフォンサイズでコンテンツの順番を入れ替えたりできます。

	.flex{
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		-moz-box-orient: vertical;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.flex > div{
		-webkit-flex: 1;
		-moz-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	@media screen and (max-width: 600px){
		.flex > div:nth-child(1){
			-webkit-order: 3;
			-moz-box-ordinal-group: 3;
			-ms-flex-order: 3;
			order: 3;
		}
		.flex > div:nth-child(2){
			-webkit-order: 1;
			-moz-box-ordinal-group: 1;
			-ms-flex-order: 1;
			order: 1;
		}
		....
	}
	

flexbox

現在はブラウザの対応状況もマチマチで、ひとつひとつ書くのも大変なのでCSSプリプロセッサのMixinを使ったほうがいいと思います。
詳細な使い方は下記のサイトで丁寧に説明されてるので参考にしてください。
今こそ未来!CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG

策定状況は勧告候補です。
CSS Flexible Box Layout Module

Multi column

chrome firefox safari ie safari
27 21 6 8 9 10 6 2.3 3 4.2
× ×

マルチカラムレイアウトを作成できます。
カラム幅とカラム間の幅を指定することができ、表示領域に応じて自動的にカラム数を調整してくれます。

	.column{
		margin-bottom: 3em;
		-webkit-column-width: 200px;
		-moz-column-width: 200px;
		column-width: 200px;
		-webkit-column-gap: 50px;
		-moz-column-gap: 50px;
		column-gap: 50px;
	}
	

column

IE10以外はベンダープレフィックスが必要です。
なお、殆どのブラウザはbreak-before, break-after, break-insideに対応してません。
策定状況は勧告候補です。CSS Multi-column Layout Module

calc

chrome firefox safari ie safari
27 21 6 8 9 10 6 2.3 3 4.2
× × × ×

calcはCSS内で四則演算が使えます。計算結果の値を返します。
相対数値と固定数値も合わせて使用できるので、width:calc(100%-20px)といった使い方も可能です。
box-sizingと同様にFluid Grid Systemでwidthとmarginやborderを同時に指定するときなどに便利です。

	.calc{
		margin: 0 20px;
		width: -webkit-calc(100% - 40px);
		width: calc(100% - 40px);
	}
	

calc

Android非対応、Safariは-webkit-をつけて対応します。
策定状況は勧告候補です。
CSS Values and Units Module Level 3

background-size

chrome firefox safari ie safari
27 21 6 8 9 10 6 2.3 3 4.2
×

background-sizeはCSSで指定した背景画像のサイズを指定します。値にはpxや%、coverなどを指定できます。
Retinaなど高解像度ディスプレイ対応に使用できます。
高解像度ディスプレイに画像を対応するとき、img要素の画像はwidth、heightで指定しますが、CSSで指定した背景画像の場合はbackground-sizeでサイズを調整します。

	.cat{
		width: 300px;
		height: 200px;
		background: url(img_cat.jpg);
		background-size: 300px 200px;
	}
	

background-size

策定状況は勧告候補です。
CSS Backgrounds and Borders Module Level 3

rem

chrome firefox safari ie safari
27 21 6 8 9 10 6 2.3 3 4.2
×

remは単位のひとつで、root+emの意味です。rootつまりhtmlのフォントサイズを基準にしたサイズとなります。
マルチデバイスに対応するためにフォントサイズは相対サイズのemや%で指定することが多いと思いますが、emは指定する位置によってコントロールしにくいことがあります。
その点remは常にどの箇所に指定しても常にrootを基準にしているので使用しやすいです。

	#rem li{		font-size: 1.5rem;	}
	#rem li strong{	font-size: 1.5rem;	}
	

rem

策定状況は勧告候補です。
CSS Values and Units Module Level 3

終わりに

まだ非サポートのブラウザもあるので全ての状況で使用できるわけではないですが、案件によってはこれらのCSSをうまく活用することで作業がラクになったり、設計の幅が広がります。
その他、Grid Layout、Regions、vw、vhなども使えたら便利そうですが、まだ利用できるブラウザが限られてるのと私が消化不良のため今回は省いてます。
レスポンシブWebデザインはそもそもそれまでに合った技術を組み合わせたものなので、構成によってはまだまだ工夫したりしなければならないケースがありますが、新しい仕様が出てきたり提案されたりしていますので、今後より設計がしやすくなっていくと思われます。

参考

Add Comment

本文

コメントはまだありません。

PAGE TOP