前回まではモバイルファーストで制作してきました。

この作ったコンテンツが、他のデバイスで最適な表示になるようにカスタマイズしていきます。

慣れてしまえば、モバイルファーストで作ってる最中に、他デバイスの表示を想像しながら一緒にコーディングできるようになります。

それまでは、今回のようにコンテンツごとに確認するか、モバイルファーストでページを完成させてから確認する方法でやっていきましょう。

*-*-* Chapter26 *-*-*

レスポンシブデザイン対応にしよう

目次

1. ディスクトップだと背景画像が隠れる
2. デバイスに応じて有効幅や配置を変えよう
3. スマホ以外の有効幅を変更して右寄せにする。
   1. 試しにスマホ以外のデバイスで見た時の設定を変更しよう！
4. 背景画像のサイズをデバイスに応じて指定する
5. CSSでブレイクポイントを指定しよう
6. メディアクエリを使ってみよう
   1. メディアクエリで「●●px以上」を指定
   2. メディアクエリで「●●px未満」を指定
   3. メディアクエリ「●●px以上　●●px未満」を指定
7. ブレイクポイント別に確認してみよう
   1. ブラウザ幅「767px」の場合
   2. ブラウザ幅「768px」の場合
   3. ブラウザ幅「769px」の場合
   4. ブラウザ幅「1199px」の場合
   5. ブラウザ幅「1200px」の場合
8. スマホ以外だけメディアクエリで表示を変えてみよう

SAKUWEB さくうぇぶ

ディスクトップだと背景画像が隠れる

モバイルファーストで制作している現在のサンプルサイトを、タブレットやディスクトップのサイズで確認してみましょう。

まずは、気になる点を洗い出します。

1）テキストパーツの幅が広くて間延びしちゃってる。

2）ネコちゃんのかわいい寝顔がテキストパーツで隠れている。

3）画像が大きくて圧迫感がある。

修正していきましょう。

デバイスに応じて有効幅や配置を変えよう

まずは、テキストパーツの間延び問題です。

ここは、デバイスごとに幅を変えていくことで解決します。

以前学びましたね。

SAKUWEB さくうぇぶ

また、背景との兼ね合いも考えてみましょう。

背景とテキストパーツの重なるエリアを小さくすれば、ネコちゃんの寝顔を見せる範囲も広くなりますね。

背景画像を左寄せに、テキストパーツを右寄せにすれば重なり部分が少なくなります。

やっていきましょう。

スマホ以外の有効幅を変更して右寄せにする。

以下は、テキストパーツの今現在のコードです。

<div class="col-10 offset-1 bg-white rounded-3">
  <!--  中略  -->
</div>

有効幅は「col-10」と、空白が「offset-1」ですね。

-Q-　試しにスマホ以外のデバイスで見た時の設定を変更しよう！　-！-

スマホ以外の有効幅を「7」に変更し、右寄せにしてみてください。

「スマホ以外」の幅指定は前にやりましたね。

また、「7」+「右寄せ」にするにはどうすれば良いでしょうか。

では正解を。

<div class="col-10 offset-1 col-sm-7 offset-sm-5 bg-white rounded-3">
    <!--  中略  -->
</div>

「スマホ以外」は、ブレイクポイントで指定すればいいんでしたね。

「col-10 offset-1」は保持したまま、「col-sm-7 offset-sm-5」を列挙します。

「sm」のブレイクポイントは「576px以上」でしたね。

「576px以上」の場合の有効幅を「col-sm-7」に設定します。

さらに右寄せなので、「offset-sm」が「5」になりますね。

覚えてますか？グリッドシステムでは12分割なので、12-7で5となります。

これでテキストパーツの有効幅をデバイス別に設定し、右寄せにできました。

ブラウザで確認してみると、テストパーツのサイズと位置が変わったので、寝顔がちゃんと表示されるようになりました。

これで気になる点の1番と2番がクリアです。

背景画像のサイズをデバイスに応じて指定する

3番の圧迫感を解消するために、デバイスごとに画像サイズを変更してみましょう。

cssにも、ブレイクポイントごとにスタイルを指定できる記述方法があります。

これを利用することで、全デバイスのスタイルを変更できるため、どのデバイスを見ても最適に表示すること、レスポンシブデザインが可能になります。

CSSでブレイクポイントを指定しよう

ブレイクポイントを設定するには以下のように記述します。

@media (width < 768px) {
  /* 中略 */
}

今までのcssとは大分記述方法が違いますね。

ちょっととっつきにくいかもしれませんが、レスポンシブデザインを実現するためには必須なので、覚えておきましょう。

メディアクエリを使ってみよう

メディアクエリとは、画面サイズに応じてスタイルを切り替える機能です。

記述方法は「@media」で宣言して、続く括弧内に画面の指定サイズを設定します。

ここでは「比較演算子」を使ってサイズを指定します。

指定サイズの時だけ、スタイルが適用される仕組みです。

@media (width < 768px) {
  /* 中略 */
}

/*
@media (画面サイズの指定) {}
*/

括弧内の指定の仕方がいろいろあるので見ていきましょう。

ちなみに、この比較演算子での記述方法は、新しい方法です。

2023年3月にブラウザ「safari」の最新版が対応したので、これから使えるようになります。

古い方法よりも柔軟な設定ができるので、今回は新しい記述方法を学びましょう。

メディアクエリで「●●px以上」を指定

「以上」を指定するには、「size<= 」「>= size」「size <」を使います。

それぞれの比較演算子+sizeの組み合わせで、アクティブになる範囲が異なります。

/*　768px以上　*/

/* 1-- ( size <= width )　適用範囲：768px～　*/
@media (768px <= width){
}

/* 2-- ( width >= size )　適用範囲：768px～　*/
@media (width >= 768px){
}

/* 3-- ( size <= width )　適用範囲：769px～　*/
@media (768px < width) {
}

比較演算子のどちらにsizeを置くかで、1番の「<=」にするか、2番の「>=」にするかが変わってきます。

共に有効範囲は同じ「768px～」となるので、1番でも2番でもどっちで指定しても問題ありません。

3番の「<」については、有効範囲が「769px～」となり、1・2番とは違いますね。

2つの違いは、有効範囲に指定したサイズ（768px）を含めるか否かです。

不等号に「=」が付く場合（<=、 >=）

　指定サイズを含めた幅以上（768pxを含める）

不等号に「=」が付かない場合（<）

　指定サイズを含めない幅以上（768pxを含めない＝769px～）

指定したい方を使いましょう。

メディアクエリで「●●px未満」を指定

「未満」を指定するには、「<= size」「size >= 」「< size」を使います。

「以上」の指定と同じように、それぞれの比較演算子+sizeの組み合わせで、アクティブになる範囲が異なります。

/*　768px未満　*/

/* 1--  ( width <= size )　適用範囲：0～768px　*/
@media (width <= 768px){
}

/* 2-- ( size >= width )　適用範囲：0～768px　*/
@media (768px >= width){
}

/* 3-- ( width < size )　適用範囲：0～767」px　*/
@media (width < 768px) {
}

1・2番の有効範囲は「0～768px」となり、768pxも含めた範囲です。

3番の有効範囲は「0～767px」となり、768pxを含めない範囲となります。

ちなみに、「width」という単語がありますが、cssでよく使われるプロパティで「幅」を意味しています。

メディアクエリ「●●px以上　●●px未満」を指定

「以上」「未満」は、「width」で繋いで指定します。

それぞれの比較演算子+sizeの組み合わせで、アクティブになる範囲が異なります。

/*　768px以上1200px未満　*/

/* 1--  ( size <= width <= size )　適用範囲：768px～1200px　*/
@media (768px <= width <= 1200px){
}

/* 2-- ( size <= width < size )　適用範囲：768px～1199px　*/
@media (768px <= width < 1200px){
}

/* 3-- ( size < width < size )　適用範囲：769px～1199px　*/
@media (768px < width < 1200px) {
}

「size 」「width 」の場所は変わらないので、比較演算子をどう組み合わせるかになりますね。

ブレイクポイント別に確認してみよう

ブラウザ幅を「767px」「768px」「769px」した場合のアクティブ状況を確認してみましょう。

ブラウザ幅「767px」の場合

767pxで有効になる指定

「768px未満」

　水色の部分、すべて

ブラウザ幅「768px」の場合

768pxで有効になる指定

　「768px以上」

　オレンジの部分、「=」をつけた指定のみ

　「768px未満」

　水色の部分、「=」をつけた指定のみ

　※「=」がついていない場合、無効になる

　「768px以上1200px未満」

　ピンクの部分、「=」をつけた指定のみ

ブラウザ幅「769px」の場合

769pxで有効になる指定

　「768px以上」

　オレンジの部分、全部

　「768px以上1200px未満」

　ピンクの部分、全部

ブラウザ幅「1199px」の場合

1199pxで有効になる指定

　「768px以上」

　オレンジの部分、全部

　「768px以上1200px未満」

　ピンクの部分、全部

ブラウザ幅「1200px」の場合

1200pxで有効になる指定

　「768px以上」

　オレンジの部分、全部

　「768px以上1200px未満」

　ピンクの部分、「=」をつけた指定のみ

　※「=」がついていない場合、無効になる

スマホ以外だけメディアクエリで表示を変えてみよう

今現在のcssの指定です。

.catbed-intro {
    background: url(../img/bedintroBg02.webp) no-repeat top left / contain;
    padding-top: 13rem;    
}

メディアクエリを使って、

スマホ以外のデバイスで「背景画像のサイズ」と「余白サイズ」を小さくしてみましょう。

以下の流れでやってみてください。

1–　メディアクエリで「768px以上」を設定

2–　「catbed-intro」を指定し、背景画像のサイズだけ75％に変更

※画像サイズだけ指定する場合は「background-size」を使用します。

3–　「padding-top」を「10rem」に変更

それでは正解

.catbed-intro {
    background: url(../img/bedintroBg02.webp) no-repeat top left / contain;
    padding-top: 13rem;    
}

@media (768px <= width) {
  .catbed-intro {
      background-size: 75%;
      padding-top: 10rem;  
  }
}

メディアクエリで「768px以上」を指定し、「background-size:75%;」「padding:10rem;」に設定しました。

「background-size:75%;」は、画像のサイズを75％で表示するという意味です。

「cover」「contain」以外にも数字で調節が可能です。

ブラウザの幅を大きくして確認してみましょう。768px以上で表示が変われば完成です。

メディアクエリ、何となく理解できたでしょうか？

いつもと違う記述方法の上、比較演算子に慣れてないと覚えるの大変ですね。

そんなときは、いろんなブログで紹介されているので、検索してみてください。

これでこのコンテンツは完成です。

次は、別のブロークングリッドレイアウトを作っていきます。