レスポンシブルWebデザインの基本設定

レスポンシブWebデザインとは?

スマートフォン、タブレット、パソコンなどの異なる画面サイズの端末で、「CSS(スタイルシート)を変更」することで、それぞれの端末に最適化されたWebサイトを表示することです。特徴的なのが、スマホサイト、PCサイトといった風に、別のHTMLを使い作成するのではなく「1つのHTMLファイル」で作成するところです。

レスポンシブウェブデザインを採用する理由

Googleさんが推奨しているからであります。

基本設定

HTMLファイルのheadエリアに以下のmetaタグを追記してください。

IE 9の表示に対応させるためには、以下も追記してください。(サポートが終了しているie8以下は、対応していません。)

html5対応なら下記も追記

headエリアに追記する内容をまとめるとこんな感じです。

CSSの書き方!

//ブラウザの横幅が767px以内の端末に適用するCSS //ブラウザの横幅が768px以上の端末に適用するCSS
解像度の早見表は下記のページの「ポイント」カラムを参照してください。