レスポンシブ・デザイン

WordPressのテーマを、長いあいだお世話になった「BizVector」から、WordPressのデフォルトのひとつ「Twenty-eightteen」に変更した。

こちらもレスポンシブ・デザインに対応しているけれど、一部、じぶんでスタイルシートを書く必要に迫られている。

オッケー、レスポンシブ・デザインについて整理してみよう。

定義は、こうだ。

ひとつのHTMLで配信し、CSSはデバイスごとに用意し、表示を変化させる。

まずHTMLに、ビューポイントのタグを記述する必要があるが、そもそも、「Twenty-eightteen」は、レスポンス・デザインになっているので、こちらは不要だろう。

ブレイクポイント(表示されるデバイスの画像幅)に応じ、スタイルシートが変わるように記述する。

メディアクエリをつかう。

(記述例)

@media screen and (max-width: 480px){
      p{color:#FFFFF;}
}

画面幅480px以下のとき、p{color:#FFFFF;}のスタイルシートが活きる。

ま、なんとか、ここまで、うまく理解できた。けれど、実際には、該当するところに、どのようなスタイルシートを記述したら良いのか、そこが、つかめていなかかったりする。

気づいたことを、お気軽に。
公開まで、やや時間がかかりまーす!