[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック

Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。

5 Useful CSS Tricks for Responsive Design

[ad#ad-2]

下記は各ポイントを意訳したものです。

• 動画コンテンツの配置
• max-width, min-widthの小技
• 値を相対値に
• overflow: hiddenを使ったテクニック
• 長いテキストは折り返す

動画コンテンツの配置

Responsiveデザインに対応した動画コンテンツの配置方法です。

デモページ

CSS: 動画コンテンツの配置

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

max-width, min-widthの小技

Responsiveデザインで「max-width」「min-width」を使う際の小技です。
まずは、「max-width」から。

デモページ

デモページ

CSS: コンテナのmax-width

コンテナの幅は800pxですが、90%を超えないように指定。

.container {
	width: 800px;
	max-width: 90%;
}

CSS: Responsiveデザイン対応の画像の配置

画像のサイズ指定を下記のようにすることで、Responsiveデザインに対応した配置します。

img {
	max-width: 100%;
	height: auto;
}

CSS: 画像の配置（IE8用）

上記のコードはIE7, IE9で機能しますが、IE8では機能しません。IE8用には「width: auto;」を加えます。

@media 
@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}
screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}

続いて、「min-width」。

「min-width」を使う時は表示サイズが小さい際、非常に小さくなってしまうのを阻止するために使用します。

[ad#ad-2]

値を相対値に

Responsiveデザインでいつ値に相対値を使うべきか理解していることは非常に大切です。
いくつかの例をみてみましょう。

相対的なマージン

下記の例は左のマージンを固定（右）と相対（左）にしたものです。マージンをピクセルで固定してしまうと、スマートフォンなどで見た際は非常に狭いレイアウトになってしまいます。

デモページ

相対的なフォントサイズ

フォントサイズの単位は相対的な値（em, %）を使用することで、font-size-, line-height, marginなどを継承して利用できます。使い方としては親エレメントのフォントサイズを変更するだけで、すべての子孫エレメントのサイズを変更できます。

デモページ

相対的なパディング

下記の例はpaddingの値を左ピクセル、右%でおこなったものです。右のパーセント指定の方がコンテンツのエリアをより確保しているのが分かると思います。

デモページ

overflow: hiddenを使ったテクニック

「overflow: hidden」を使うことで、フロートして配置するとともに前のエレメントのフロートをクリアします。

デモページ

CSS: overflow: hidden

.image {
	float: left;
}

.text {
	overflow: hidden;
}

長いテキストは折り返す

「word-wrap: break-word;」を使うことで、表示エリアが小さくなってもテキストを強制的に折り返して表示できます。

デモページ

CSS: break-word

.break-word {
		word-wrap: break-word;
}