BLOG

2014年5月4日/ css, mediaquerie, レシポンシブデザイン

[CSS] Media Queriesを使って画面サイズに合わせてCSSを適応する。

 

スマートフォン用のサイトとPC用のサイトを1つのHTMLソースで実装するレスポンシブデザインを使ったサイトが増えてきていますね。

 

CSSのMedia Queriesを使えば、ブラウザのスクリーンサイズによってCSSを使い分けることが可能です。

 

それを利用してレスポンシブデザインのサイトを構築しますが、今回はその基本的な使い方を説明します。

 

例えば下記のようなイメージのPC用ページがあったとします。

ページイメージ1

 

 

 

 

 

HTML,CSSは下記のようになります。

■HTML

■CSS

 

これをタブレットや、スマートフォンからアクセスした際(スクリーンサイズを768px以下とします)には下記のように見せたいとします。

ページイメージ2

横並びをやめて通常通り縦に並べたいということです。その場合、CSSを下記のようにすれば実現できます。

■CSS

 

768pxより小さい画面サイズの場合の.boxのスタイルを指定してあげるということになります。(今回はfloatを利用しない)

 

下記のように、複数の画面サイズに合わせてスタイルを変更することも可能です。

上記は、画面サイズが1,024px以上の場合は#contentsの幅は1,024pxで固定、768pxより大きくて1,024pxより小さい場合は#contentsの幅を960pxに固定、768pxより小さい場合は100%(親要素の幅いっぱい)とするということになります。

 

Media Queriesを使用してソースを1つで管理し、PC,スマホサイトの更新を楽にしましょう。

 

 

 

 

 

 

Resent Posts

Category