最終確認と細かい部分の調整

• デザイン幅以外での表示を確認
• 最小幅
• スマホ/タブレットの境界
• タブレット/PCの境界
• PC幅
• 気になる部分を修正しよう
• 1.PC表示時のコンテンツ幅（最大）が狭い
• 2.カード横並びがコンテンツ幅より狭い
• 3.横並びのカードの高さを揃えたい
• 4.パンダ写真の下だけ、余白が多い
• 5.ファーストビュー画像が大きすぎる

デザイン幅以外での表示を確認

これまでスマホ幅表示は375px、タブレット幅は768px…とデザインの横幅を基準に、表示確認をしてきました。
ユーザーが使っている端末が違えば、表示領域のサイズも異なります。
他の幅で見てもレイアウトが崩れないか、確認していきましょう。

とはいえ、世の中にある端末サイズを1つずつ、細かく見ていくとキリがありません。
最低限のチェックとしては、メディアクエリに書いたブレークポイントの幅前後で表示を見ていきます。

最小幅

最小幅はデザイン要件/コーディング要件によって異なりますが、大体の場合320px。
特に指定がなければ、320px幅で問題がないか確認します。

検証ツールで320px幅の表示を見てみましょう。
Dimensionsを「Responsive」にすると、サイズを自分で入力できるので便利です。

上から下まで、ざっと表示を確認します。
レイアウト崩れや、横方向のはみ出しはありませんね。

気になるのは、ファーストビューでキリンの顔が見切れているくらいでしょうか。
デザインの方に合わせてこのままでも、background-positionを調整しても良いです。

スマホ/タブレットの境界

今回、タブレット幅用のCSSを適用するブレークポイントは600pxに指定しました。
そのギリギリ手前、599px幅での表示を確認していきます。

次に、タブレット幅での最小幅600pxに変更。

こちらも問題になるような表示崩れはなさそうです。

ヘッダーのロゴと、メニューの幅が親要素の幅を超えているので、2段になっているくらいでしょうか。
1列にしたい場合、例えば .header-logoに flex: 1; の指定でロゴ部分が自動縮小するようにできます。

２段でも崩れていると言われるほどではないので、どちらでも良さそうですね。

お好きな方を採用してください。
flex :1:を指定する場合は、合わせてtext-alignの上書きも必要になる点にだけ注意してください。

style.css - @media (min-width: 600px) { } 内

.header-logo{
    flex: 1;
    text-align: left;
}

タブレット/PCの境界

PC幅用のCSSを適用するブレークポイントは1024pxに指定しました。
ですので、次は1023px幅で表示を確認します。

上から下まで眺めてみて、問題なさそうなら次へ。

PC幅用に書いたCSSが適用される、1024pxに変更します。
便宜上PC幅と表現していますが、タブレットを横持ちした時にも適用されます。
ちなみに、iPad mini～5の横持ちが1024px、iPad mini6で1133px。Kindle Fire HDXは1280px。

1024pxだと、文字数と文字サイズの関係で、イベントのカード4枚並びがちょっとガタつきますね。
レイアウト自体の崩れではないので、OKとしておきましょう。

PC幅

PC幅の最大幅は、これという決まりがありません。
2画面を繋げたような横長ディスプレイまで、色々売られていますしね。

考えるとキリがないのですが、最も一般的なディスプレイ解像度は「1920×1080」。
そのほか、ラップトップで多く使われている1536 x 864、HD解像度の1366×768 のシェアが高くなっています。

StatCounter Global Stats - Screen Resolution Market Share
https://gs.statcounter.com/screen-resolution-stats/desktop/japan/

PC幅表示は、1920pxで問題なく見られるよう表示を整えるのはマスト。第一目標です。
（お仕事の条件等によっては幅2560pxまで、それ以上まで考慮することもあります）

また、PC幅で表示を確認していると、小さい端末幅で見ていた時には気にならなかったところも見えてきます。
ここまでのように表示幅を色々切り替えていく中で、違和感を持つ部分もあるでしょう。
そのあたりも調整できると良いですね。

例として、以下では5つの調整を紹介します。

気になる部分を修正しよう

1.PC表示時のコンテンツ幅（最大）が狭い

今回のコーディングでは、containerクラスを使ってコンテンツ幅を設定しています。
デザインではコンテンツ幅は最大1200pxまで…のはずですが、検証ツールで確認してみると、コンテンツ表示部分は最大1152pxまでしかありません。これは、box-sizing:border-boxを指定したことで、左右paddingの分までmax-width:1200px;に含まれているためです。

横1200pxまでコンテンツが表示されるようにする方法として、最もシンプルな方法はbox-sizingプロパティを変更すること。

style.css

.container{
  max-width: 1200px;
  margin: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: content-box;
}

このように、containerクラスのbox-sizingを「content-box」に指定し直すと、paddingを含まない形で1200pxが確保されます。

● calc( )関数を使う方法も

box-sizingプロパティでのボックス計算方法は、サイト内で統一しておきたい。
そんな場合には以下のような書き方もできます。

style.css

.container{
  max-width: calc( 1200px + 1.5rem + 1.5rem);
  margin: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

calc( )という書き方をすると、カッコの中身をブラウザの方で計算してくれます。

上の記述では「コンテンツ幅最大（1200px） + 左padding（1.5rem） + 右padding（1.5rem）」の合計が、max-whithの値として使われます。自分で計算しなくて良いので楽、remや%など変動する単位にも柔軟に対応してくれるので、とても便利ですね。

計算式で指定した場合、検証ツールのComputed（計算済み）パネルで値を確認できます。

2.カード横並びがコンテンツ幅より狭い

PC幅で見ると、「楽しいイベントいっぱいだよ」セクションのカード並びが、コンテンツ幅より少し狭いことに気づきます。

これは、card-wrapperクラスで指定している左右paddingの影響です。

カードをコンテンツ幅ぴったりに合わせるには、いくつか方法があります。
今回はネガティブマージンを使う方法を使ってみましょう。

● ネガティブマージン

ネガティブマージンとは、marginに負の数の値を設定する事を言います。
marginでは「-10px」のように、マイナスの値を指定することも可能です。

検証ツール上で試すと分かりやすいので、やってみましょう。
まず、CSSを追加したい要素を選びます。
今回の場合は、4つのカードを囲っている<div class="flex-container">です。

stylesパネルの上部、element.style{ }の中に試したいCSSを入力します。
card-wrapperクラスのpadding（左右15px）と相殺したいので、下図のように入力します。

<div class="flex-container">の横幅が、広くなったと思います。
これは下図のように、margin分をマイナスした分、コンテンツ幅が広くなるためです。

そして、その中にcard-wrapperクラスのpaddingが来ます。
これでネガティブマージンを設定した部分が相殺され、コンテンツ幅ピッタリになるイメージです。

検証ツール上は上手く出来たので、実際にstyle.cssの方にスタイル指定を書きましょう。

<div class="flex-container">に「card-container」クラスを新規追加。

index.html

<p class="text-white text-center">
    いつ訪れても楽しいズーロッパ東京。
</p>
<!-- ここからカード並び -->
<div class="flex-container card-container">
    <artilce class="card-wrapper">

作った「card-container」クラスに、左右のネガティブマージンを記述します。
card-wrapperクラスに左右paddingがつくタイミングに合わせ、@media (min-width: 600px) { }から適用します。

style.css - @media (min-width: 600px) { } 内

.card-container{
    margin-left: -15px;
    margin-right: -15px;
}

.card-wrapper{
    width: 50%;
    padding-left: 15px;
    padding-right: 15px;
}

3.横並びのカードの高さを揃えたい

ブレークポイントぎりぎりの幅1024pxでカード部分を見ると、以下のようにカードの高さがバラつきます。

原因は、h3見出しの文字数。
文字が多いと折り返して2行になるため、高さがズレてしまうのです。

表示幅が広い時でも、文字数によって高さが揃わない可能性があります。
もう少しきれいに見えるよう、簡単に調整します。

3-1. cardクラスの高さを100%にする

flexアイテムは、デフォルトで高さが揃うようになっています。
検証ツールで見てみると、<artilce class="card-wrapper">自体はh3見出しが1行のカードも、2行のカードと同じ位置まで伸びていますね。

直下にある<div class="card">も親要素の高さいっぱいになるように指定してみます。

なお、これはカードを横並びにしたときにだけ必要な設定です。
なのでセレクタを.card-wrapper .cardにして、@media (min-width: 600px) { }内に書きます。

style.css - @media (min-width: 600px) { } 内

.card-wrapper .card{
    height: 100%;
}

cardクラスの、白い背景部分の高さが揃いました。

3-2. justify-contentでカードのバランスを整える

カードの高さを揃えましたが、1つ目と3つ目は、下部が余ってしまっていてバランスが悪いですよね。
次は、カード内部のバランスを整えましょう。

このような時は、justify-contentというCSSプロパティを使うと便利です。
justify-contentプロパティは、フレックスアイテムの主軸方向における揃え位置を指定できます。
主軸方向とはflex-directionの値、フレックスアイテムを並べる方向です。

カード内にバランスよくアイテムが配置されるよう、space-betweenを指定してみましょう。
とは言え、今のまま justify-content のみ指定しても効きません。
合わせて、.card-wrapper .cardをflexコンテナ化するCSSも記述します。

style.css - @media (min-width: 600px) { } 内

.card-wrapper .card{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

最初の状態より、かなり見た目が整いましたね。

4.パンダ写真の下だけ、余白が多い

「ズーロッパ東京とは」のセクションにある、パンダの写真は、下だけ白い部分が広くなっています。
Google Chromeの検証ツールで見てみると、余分な白い部分は、paddingやmarginではなく青いハイライト（要素）になっていますね。

こう表示されている場合、原因はvertical-align。
イベントのカードで、画像と文字の高さを揃えるのに使ったCSSプロパティです。

vertical-alignの初期値はbaseline。
pやgなどを表示するためのスペースが、下にある余白のような部分です。

CSSでvertical-alignプロパティの値をbaseline以外に指定すれば、ピッタリと収まります。

style.css

.about-image img{
  vertical-align: bottom;
}

5.ファーストビュー画像が大きすぎる

PCディスプレイで最もシェアが多いと紹介した、1920px幅。
この幅で見てみると、ファーストビューの画像が拡大されすぎているように感じませんか？

これは切り出したPC用ファーストビュー画像が、横長すぎることが原因です。

デザインデータを見てみると、ファーストビュー画像はクリッピングマスクがかけられています。

最初にクリッピングマスクを適用している状態で書き出しました。
今度は、適用前の状態で書き出し直してみましょう。

以下では、Illustratorで画像を書き出し直す手順を紹介します。
Photoshop等が使える場合は、design-sozai > _moto > top.jpgをリサイズ・軽量化してもOKです。

ファーストビュー画像を書き出し直す

クリッピングマスク内の画像をコピーし、クリッピングマスクの外でペーストします。

邪魔にならない場所へ移動。
アセットの書き出しパネルに、クリッピングマスクの適用されていない画像を追加します。

アセットの名前を変更し、書き出し設定を1.5ｘの JPG 50 あたりに設定しておきます。
右下の書き出しボタンを押して、imagesフォルダ内に画像を書き出しましょう。

PC用の背景画像パスを変更

firstviewクラスに指定している、background-imageのパスを新しく書き出した画像に変更します。

style.css - @media (min-width: 1024px) { } 内

.firstview{
    background-image: url('images/top-newpc@1.5x-50.jpg');
    min-height: 706px;
}

キリン全体が入っていて、前の画像よりも綺麗に見えますね。

おまけ：画像の軽量化

新しく書き出したPC幅用のファーストビュー画像は、ファイル容量が大きいです。
無料で使える、オンラインの画像最適化ツールを使ってみましょう。

画像最適化ツールはかなり多く存在していますが、下記では『TinyPNG』というサイトを使ってみます。
『TinyPNG』は画質を保ったままファイルサイズを縮小してくれることが特徴のサービス。
劣化許容範囲などの設定がないので、手軽に使えます。

TinyPNG
https://tinypng.com/

使い方は、とても簡単。
「Drop your WebP, PNG or JPEG files here!」と書かれた点線の中に、最適化したい画像をドラッグ・アンド・ドロップするだけです。

自動的に読み込み・変換を行ってくれるので、finishedになるまで待ちましょう。

「Download All」のボタンが使えるようになったら、クリックしてダウンロードします。
フォルダを解凍して、最適化された画像を、imagesフォルダの元画像と置き換えましょう。

これで、レスポンシブデザインのWebページの調整完了です。
お疲れ様でした。