CSSメディアクエリーによるレスポンシブWebデザインの基本 | 俺の開発研究所

プログラミング|俺の開発研究所 プログラミング「プログラミング」の記事一覧です。

レスポンシブWebデザイン」は、あらゆるデバイスに対応したレスポンシブなレイアウトを実現することができます。画面サイズに応じてCSSだけを切り替えることができますが、HTMLは切り替えられません。

忘れないように手順をメモしておきましょう。

レスポンシブWebサイトデザインを作成するために、必ず行う作業は2つあります。

以上、レスポンシブWebデザインを実現するために必要な2つの作業についてご紹介しました。
次の章では、それぞれのステップについて詳しく説明します。

  • viewport metaタグを設定する
  • メディアクエリを使ったCSSの切り替え

viewportメタタグを設定する

まず、viewportメタタグの設定から始めましょう。

パソコン用にデザインされたページは、タブレット端末やスマートフォンではデスクトップよりも小さく見えることがあります。
ブラウザは、そのページが固定幅(iOSは980px)のPC用にデザインされたと仮定して、1回だけレンダリングしてから画面に合わせて拡大縮小しています。

ページの幅を想定して縮小する処理をやめ、代わりに画面の幅が同じになるようにページを描画させることができます。

書式はこちらで確認できます。

この項目は「width」と呼ばれます。ビューポートの幅は、「デバイス幅」で指定することで、ブラウザがデバイスの幅や寸法に合わせることができます。
initial」は縮尺のことです。1.0」を指定すると、デフォルトで拡大縮小がゼロになります。

メディアクエリによるCSSの切り替え

次に、メディアクエリを使ったCSSの切り替え。

メディアクエリ「@media...」を指定することで、CSSを切り替えることができます。{}」をCSSに記述することで、画面の幅に応じて適用するスタイルを分岐して切り替えることができます。

このような感じです。

/* 画面幅が480px以下の場合 */@media screen and (max-width:480px) {p{color: red;}} 。

max-widthに "480px "と指定し、画面の最大幅が480pxを超える場合にスタイルを適用する。

max-width "にも指定できますが、"max-width "と "min-width "が一般的な値です。

  • max-width」...画面幅が指定したサイズ以下の場合。
  • min-width"...画面の幅が最大サイズを超える場合。
  • max-height」...画面の高さが指定されたサイズを下回る、または等しい場合
  • min-height"...画面の高さが指定されたサイズより大きい場合
  • orientation:portrait"...画面の横幅(縦に持ったとき)が画面の縦幅より小さい場合
  • orientation:landscape」...画面幅が端末の高さを超える場合、端末を横向きに保持します。

複数の条件を指定することができます。

/* 画面幅が480px以上780px未満の場合 */@media screen and (min-width:480px) and (max-width:780px) {p{color: red;}}.

HTMLのリンクタグで、画面幅に応じて読み込むCSSを指定することができます。
しかし、1つのスタイルシートから複数のスタイルを作成する方が簡単です。

  

メディアクエリのサンプルとしきい値

次に、メディアクエリのサンプルです。

CSSは、他のスタイルを上書きして統率するスタイルです。
このスタイルは、一般的なものと言えます。PCの表示を基準にしています。そして、スマートフォンや、必要に応じてタブレット端末用に条件分岐させたスタイルです。
これにより、無駄な記述を減らすことができます。

/* 共通(PC用) */p{color: black;}/* 画面幅が480px以下の場合(スマートフォン用) */@media screen and (max-width:480px) {p{color: red;}/* 画面幅が780px以下の場合(タブレット用) */@media screen and (max-width:780px) {p{color: blue;}}

ディスプレイは、レスポンシブWebデザインで最も人気のあるスタイルの1つです。
スマートフォンからクラス名を隠すには、「div」タグに追加するか、「display; none;」や「display; block;」を使用する方法があります。

/* 共通(PC用) */p{display: block; /* 表示 */}/* 画面幅が480px以下の場合(スマートフォン用) */@media screen and (max-width:480px) {p{display: none; /* 非表示 */}} or less(タブレット用) */@media screen and (max-width:780px) {p{display: none; /* 表示なし */}} 。

スマートフォンの場合、条件分岐の閾値は約480px、タブレットの場合は780~900pxです。

最後に

以上がレスポンシブWebデザインの基本です。
現在、多くのWordPressテーマがレスポンシブ・ウェブデザインを基本としています。
テーマをパーソナライズする際には、レスポンシブWebデザインの基本を理解しておくことが重要です。

関連読書:

ドラゴンボール超 スーパーヒーロー:「ブロリー」より4年 新キャラが登場!

神作『無職転生~異世界行ったら本気出す~』の大推薦!

2022年夏|7月放送最新作TVアニメ情報まとめ!おすすめ6選を紹介!