3 レスポンシブ・デザインを設定する

戻る

近年は「レスポンシブ」なウェブデザインが重視されています。それは簡単に言うと「さまざまなデバイスでの表示に対応したデザイン」と言うような意味です。

従来は、パソコン用とスマートフォン用に全く異なる別々のサイトを作るといった対応を行っていましたが、パソコンでもスマホでも見やすいページを作れば、一つのページを作るだけで全ての機器に対応できるので便利ですし、製作作業やページの修正作業も楽になります。

CSSが進化したことでそのようなニーズに対応できるようになり、「レスポンシブ・デザイン」が大きく広がるきっかけとなったのです。

レスポンシブ (responsive) ── [形容動詞］反応が良いさま。感じやすいさま。

レスポンシブ・デザインの基本

ボックスの横並び設定を解除すると、ボックスの並びは基本の縦並びに戻ります。

この特徴を利用し、ブラウザ画面の横幅に応じて横並びを解除するよう設定すれば、画面の横幅が広いときには横並びで、画面の横幅が狭いときには縦並びで、というふうに画面のレイアウトを変更できます。

例えば、スマホのように小さな画面で２段組などを行うと、文字が細かくなりすぎて、とても読みにくくなってしまいます。一方、パソコンのように広い画面の場合は、スマホ用ページのデザインをすると文字が大きすぎて、画面の広さを有効に活用できません。

であれば、画面の広さに応じてレイアウトやデザインを自動的に変更してしまえ、というわけですね😁

これは同じウェブページを、閲覧している機器の画面に合った最適なレイアウトで表示するという「レスポンシブ・デザイン」の基本テクニックとなります。

ボックスの並びを変えてレイアウト変更。

具体的にブラウザ画面の横幅に応じて横並びを解除するには、横並び関連の設定を「メディアクエリ」@media (～) {～}と呼ばれるもので囲み、解除するポイントを指定します。

たとえば、以下のように指定すると、ブラウザ画面の横幅が768ピクセル以上の時にスタイルシートが適用され、横並びの表示になりますが、767ピクセル以下のときにはスタイルシートが無効になり、横並びは解除され、縦並びになります。

ここで紹介する設定を試す場合は、box.htmlとbox.cssを使うと良いでしょう。
<div class="box1"> BOX1 </div> <div class="wrap"> <div class="box2"> BOX2 </div> <div class="box3"> BOX3 </div> </div> <div class="box4"> BOX4 </div>
/* 幅768px以上 */@media (min-width:768px) {

/* 横に並べる設定 */
.wrap:after { content:"";
              display:block;
              clear:both; }
.box2 { float:left; }
.box3 { float:left; }

}
@media {～}内のCSS設定は、条件を満たした時だけ有効になります。条件は「min-width:768px」=「画面の最低幅が768px」=「画面幅が768px以上のとき」という解釈になります。

つまり「画面幅が768px以上のとき」だけ「横に並べる設定が有効」になるので、逆に「768px未満のとき」は横に並べる設定が有効にならず、「縦並び」に戻るというわけです。
メディアクエリ @media... の効力で、ブラウザ画面の横幅に応じて横並びが解除される。

なお、@media で指定した、横並びを解除するポイント（ここでは768ピクセル）は「ブレイクポイント」と呼ばれ、主要なスマートフォンやタブレットなどの画面サイズを参考にして調整されます。

一般的に Apple iPad などのタブレット端末やパソコンの画面の横幅は768ピクセル以上で処理されていることが多いため、上記の設定を例としています。（スマートフォンなどはおおむね768ピクセル未満の横幅になります）

なお凝ったページレイアウトを設計する場合、スマホ・タブレット・PCなどの端末に合わせて、数段階にブレークポイントを設けたり、解除の順番を調整したりする場合もあります。

@mediaを記入する位置

メディアクエリを使ってスタイルシートの調整を行う場合、原則 @media ( ) {～} はスタイルシートの末尾近くに書くのが無難です。

これはスタイルシートの仕様で、設定が重複した場合、前の設定は後から書いた設定で上書きされるというルールだからです。よってメディアクエリが他の設定を上書きできるよう、スタイルシートの末尾のほうに書きます。

もちろん設定の上書きを正しく管理しきれるのであれば、末尾にこだわる必要はないかもしれません。

例

下の例はメディアクエリを書く位置によって挙動が変わってしまう例です。
<div>なんとか、かんとか</div>
div { color:blue; }

@media (min-width:768px) {
  div { color:red; }
}
上の例の場合、画面の横幅が768px以上のとき、color:red; の効果が color:blue; の効果を上書きします。（想定通りの動作です）
@media (min-width:768px) {
  div { color:red; }
}

div { color:blue; }
しかし上の例のように、メディアクエリを先に書くと、後に書かれた color:blue; の効果が color:red; の効果を常に上書きするので、メディアクエリが有効であろうとなかろうと、color:red; の効果が現れることはありません。
設定の重複に注意を払いつつ、今回の課題はこれらの技術を踏まえた上で、作成を行っていきましょう。

参考

メディアクエリーとは - MDN