レスポンシブデザインCSSの構成

公開日: 

GushのCSSは随所にコメントを入れており、どこを触ればどこに反映されるのかわかりやすくなっています。

はじめてレスポンシブデザインに触れる方のために、構成内容を簡単にご説明します。

ブレイクポイント(画面分岐点)

当テーマは、画面(ウィンドウ)の幅に合わせてレイアウトが変わるようになっています。

ベースを768px以下のスマホ用に設定し、タブレット(768px以上)とPC(1024px以上)にブレイクポイントを設定しています。

全サイズに共通するものを上から順に書いていき、ブレイクポイントに達すると上書き処理されるイメージ。

記事内見出しタグの例

たとえば、記事内の<h2>はこのように設定してあります。

画面幅が768px以上になると、下記設定が適用されます。

左側ボーダーの太さと余白が変わっていますね。
さらに1024pxになるとこうなります。

フォントサイズと余白が変わります。

このように、スマホ用・タブレット用・PC用の設定がひとつのCSSで処理されています。

全体の構成イメージ

CSSの全体的な構成はこのようになります。

「media screen」がブレイクポイントの設定です。「min-width」の数値を書き換えればブレイクポイントを自由に設定できます。また、もっと細かいブレイクポイントを追加していくことも可能です。

画面サイズや解像度は多様化しているので、すべてに対応しようとするとかなり細かい設定が要りますね。今のところ「スマホ」「タブレット」「PC」で充分だと思います。

IE8以下への対応

古いバージョンのIEはHTML5やCSS3に対応していないため、JavaScriptを読み込ませて対応させています。

header.phpに記述してあります。

ただ、これでも完璧には動作しません。Windoes XPも徐々に姿を消していくので、IE8以下はあまり気にしなくて良いでしょう。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

“レスポンシブデザインCSSの構成” への2件のフィードバック

  1. […] ushの作り方を見てみます。 Gush作者様のサイトにも説明があります。 →レスポンシブデザインCSSの構成 […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑