新HTML/CSS入門講座（応用編）5.Webサイトをレスポンシブに！で、Zooloppaのサイトをスマートフォンで見た時に適用されるcssを書いてサイトのレスポンシブ化を行いました。
スマホ向けレイアウト確認にも、ブラウザの検証ツールは大活躍してくれます！
スマホ表示の確認方法
ブラウザの検証ツールを立ち上げます。
chromeの場合は検証ツール左上、Elementsの横あたりにスマートフォンのようなマークのアイコンがあります。
アイコンをクリックすると画面の表示が変わります。
こちらがスマートフォンの幅で表示した場合のサイトの見え方です。
cssで
@media(max-width: 768px){} を設定しているのにPCサイズの画面のままの場合は、ブラウザをリロードするとスマートフォン用のcssに切り替わります。
スマートフォン画面の見かた
chromeなどブラウザの検証ツールにはそれぞれ、オーソドックスなスマートフォン用のディスプレイサイズが登録されています。
検証画面の上部、端末名が書かれている部分をクリックして、
プルダウンから対象のスマートフォンを選ぶと表示サイズが変わります。
プルダウン一番上の「Responsive」を選ぶと、
フレーム部分をドラッグして自分で画面幅を設定することも出来ます。
右端の回転しているようなアイコンをクリックで 縦画面と横画面を切り替えられます。
このスマートフォンサイズ表示で、開発ツールの位置をブラウザの横側にすると
↓
確認と調整がしやすいのではないでしょうか。
ちなみに、スマートフォン表示アイコンを押ない（有効化しない）状態で、 検証ツール部分の幅を広くとる事でもスマートフォンサイズの確認はできます。
お好きな方でスマホ表示の確認を行って下さい。
Zooloppaサイトをより見やすく調整！
画講座の方でスマートフォンで見られるように、メディアクエリを使ってスタイルを追加しました。最低限の調整は出来ていますが、検証ツールで見てみると
ナビゲーションが右に寄っていたり、 タイトルが一文字だけ自動改行されていたり、 「flex-direction: column;」に変更した動物紹介部分が、どの写真の説明か分かりにくかったり... 気になる部分がいくつかありますよね。
練習も兼ねて検証ツールを使いながら直していきましょう。
1.ヘッダー部分
検証ツールで「global-nav」クラスを指定したdivタグの中にある<ul>タグを選択します。
ブラウザ側で<ul>タグに対してpaddingが付けられていることが分かります。
余計なpaddingを0にして打ち消してあげると、
偏りが無くなりました。
それぞれのリンクの位置が近く、別の部分をタップしてしまいそうなので
<li>タグにmargin-bottomも追加しておきましょう。
※検証ツールに入力したスタイル指定は、作成中のcssファイルにも追加して保存してください。
2.タイトル部分
「この子にあって握手しよう」が一行で収まるように変更します。
cssファイルではh1タグに対して何の指定もしていないので
ブラウザ側でフォントサイズを「2em」にして見出しとして強調してくれています。
2emだと改行されてしまうので、少し小さめの「1.7em」にしてみるとこうなります。
逆に文字をもっと大きくして、左右にpaddingで間隔を作っても良さそうです。
デザイン（完成図）がある場合はそれに沿って、 無い場合は見やすいと感じるスタイルの設定を考えつつ調整してみましょう。
3.section部分
縦並びに変更したsection部分。
このままだと少し詰まっていて見にくいので、
margin-bottomの指定を加えてみます。
比較
元ファイルと調整した結果を比較してみます。
トップ部分
コンテンツ部分
少しの調整ですが、見やすさはアップしているのではないでしょうか。
特にmarginやfont-sizeなど、プロパティ値を何px,何emなどの数値で入力する部分は、検証ツールのStylesを使って出来栄えを確認しながら作っていくとスムーズに進めるはずです。