3-6. スマホでの見た目を調整する

このチャプターでは、スマホ表示での見た目の調整を行います。

ブラウザの検証ツールでスマホの見た目を確認する

各ブラウザには、「検証ツール（デベロッパーツール）」という機能が搭載されています。この機能を利用すると、PC上でエミュレーター的にスマホやiPad（タブレット端末）での表示を確認したり、HTMLやCSSを編集するといったことが可能になります（なお、このHTMLやCSSの編集はこの場限りのものなので、実際のサイトやファイルに影響は与えません）

検証ツールで利用できるスマホやiPadなどのエミュレーターは、あくまでもそのブラウザが利用しているブラウザエンジン（Google ChromeやMicrosoft EdgeであればChromium、SafariであればWebkit）に依存しているので、かならずしも厳密に表示が同じということはないですが、手軽に各デバイスの見た目を確認できるので、とても便利です。

さきほど作成したプロフィールページを、検証ツールを利用してスマホの画面で確認します。以下はGoogle ChromeとSafariの検証ツールを利用した操作手順を解説しています。多少の違いはありますが、Firefox、Micrisoft Edgeの検証ツールでも操作方法はおおむね同じです。

検証ツールの表示方法：Google Chromeの場合

index.htmlをブラウザで開き、画面上（リンク要素になっていない箇所）を右クリックして出てきたメニューから「検証」を選びます。Firefoxは「調査」、Microsoft Edgeは「検査」という項目が該当します（ブラウザの設定メニューからでも選べます）

Google Chrome検証ツールの使い方説明のキャプチャ画面

「検証」を選ぶとブラウザ画面が分割され、以下のような表示が出てきます。この分割された画面で、左上のPCとスマホがセットになったようなアイコンをクリックします。

Google Chrome検証ツールの使い方説明のキャプチャ画面2

画面表示が以下のように切り替わります。画面上部に表示されるプルダウンメニューから、エミュレーターで使用できるデバイス（ブラウザに内蔵されているもの）を選んで表示を切り替えることができます。

Google Chrome検証ツールの使い方説明のキャプチャ画面3

検証ツールの表示方法：Safariの場合

index.htmlをブラウザで開き、画面上（リンク要素になっていない箇所）を右クリックしてメニューを表示します。

Safari検証ツールの使い方説明のキャプチャ画面2

Safariの場合は、「要素の詳細を表示」というメニュー項目が「検証」に該当します。

ただし、この項目は右クリックで出てくるメニューには最初からは表示されていません。事前に「設定」の「詳細」画面で「Webデベロッパ用の機能を表示」にチェクを入れ、機能を有効化する必要があります（機能を有効化すると、ブラウザのメニューバーに「開発」というメニューが追加されます）

Safari検証ツールの使い方説明のキャプチャ画面3

「要素の詳細を表示」を選ぶとブラウザ画面が分割され、検証メニューが表示されます。しかし、Safariではこの検証メニューからは表示を切り替えることができません。

ブラウザメニューバーの「開発」メニューの「レスポンシブデザインモードにする」（ショートカットキーはCntrl+⌘+R）はを選ぶことで、スマホなどの画面に切り替わります。なお、終了する場合は同じく「開発」メニューの「レスポンシブデザインモードを終了」（ショートカットキーは同じ）を選びます。

Safari検証ツールの使い方説明のキャプチャ画面4

画面が切り替わったら、上部左に表示されるプルダウンメニューで表示するデバイスを選択します。

Safari検証ツールの使い方説明のキャプチャ画面5

Safariの場合、選択できるデバイスはiPhoneとiPadのみです。

なお、Safariの場合は検証メニューを開かなくても、「開発」メニュー（あるいはショートカットキー）でPCとスマホ、タブレットの見た目の表示切り替えが可能です。

スマホ表示用にCSSを調整する

ここではiPhone SEを選択し、表示を確認しています。

検証ツール画面1

スマホで見るとリンク項目のテキストが大きく感じられるので、すこしだけ小さくするように調整することにします。

スマホ用のCSSは同じファイル内に記述しますが、デバイスごとに表示を切り替える必要があるため、「メディアクエリ」を利用してCSSの記述を行います。

メディアクエリとは

先のチャプターでもすこし触れましたが、デバイスの画面サイズ（ブラウザの表示幅）ごとの表示幅の違いによるCSSの調整は、「メディアクエリ」と呼ばれる手法で行います。メディアクエリはビューポート（表示領域）のサイズに応じてCSSを切り替え、異なるレイアウトを実現するための手法です。

記述は@media screen and (...) {}というもので、screen and (...)の部分にCSSの切り替えを発生させるビューポート（表示領域、表示幅）を指定します。この切り替えが発生する指定値のことを「ブレイクポイント」といいます。

以下は主にウェブサイトで利用されるメディアクエリの指定例です。@media screen and (max-width: *px)と@media screen and (min-width: *px)をそれぞれ記述する場合、min（以下）とmax（以上）で指定した数値も含むため、指定する値は同じではなく、1pxずらした数値を指定します。

@media screen and (max-width: 799px) {
  /* 表示幅の横幅サイズが799px以下の場合 */
  p {
    color: red;
  }
}

@media screen and (min-width: 800px) {
  /* 表示幅の横幅サイズが800px以上の場合 */
  p {
    color: blue;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* 表示幅の横幅サイズが768px以上1024px以下の場合 */
  p {
    color: green;
  }
}

screenは主に画面を対象とした記述です。

max-widthは最大幅を指定します。上記ひとつ目の例では、表示幅が「799px以下」の場合はp要素の文字は赤色で表示されます。スマホなど画面幅の小さな表示の指定で使用されます。

min-widthは最小幅を指定します上記ふたつ目の例では、表示幅が「800px以上」の場合はp要素の文字は青色で表示されます。PCなど画面幅の大きな表示の指定で使用されます。

min-widthとmax-widthを合わせた記述も可能です。上記みっつ目の例では、表示幅が「768px以上1024px以内」の場合はp要素の文字は緑色で表示されます。iPadなど主にタブレット画面の表示の指定で使用されます。

なお、メディアクエリを以下のように@media printと指定すると、印刷時のCSSを調整することが可能です。

@media print {
  /* 印刷時のレイアウトCSS */
}

スマホ用のCSSを調整する

それではスマホ表示用のCSSを記述します。リスト項目はmain要素の子要素なので、CSSは.footerセレクタのコメントの上、.mainセレクタの最後に記述します。

.main ul li h3 {
  font-size: 1.15em;
}

/*（略）*/

@media screen and (max-width: 549px) {
  /* スマホでの表示 */
  .main ul li h3 {
    font-size: 1em;
  }

  .main ul li p {
    font-size: 0.9em;
  }
}

メディアクエリで指定する数値は任意で指定可能なので、適宜調整してください。ここでは549pxをブレイクポイント（切り替わり）としています。

@mediaの内部も、CSSの記述方法は同じです。ここではスマホの場合、h3要素は1em（body要素のフォントサイズと同じ）とし、p要素のテキストのサイズをすこし小さくしています。

表示確認

この状態でstyle.cssを保存し、index.htmlをブラウザで開くと、以下のように表示されます。

メディアクエリを適用した状態のindex.htmlのキャプチャ画面

再度ブラウザの検証ツールで確認すると、フォントサイズが小さくなっていることが確認できます。検証ツールの表示を解除する（PCとスマホがセットになったようなアイコンを押す）とPC表示の状態に戻り、見た目の違いを確認できます。

なお、検証ツールでは要素にあたっているCSSを確認することが可能です。以下のキャプチャーでは、h3要素において、スマホ表示の際はPCのh3にあてたCSSがメディアクエリで指定したCSSで上書きされていることが確認できます。

検証ツールの使い方説明のキャプチャ画面

ここまでに記述したコード

ここまで記述したCSSファイルの中身です。

@charset "utf-8";

/* font@google */
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');


/* ============================ */
/*  reset
/* ============================ */

body, p, h1, h2, h3, ul, li, figure, small {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}


/* ============================ */
/*  base
/* ============================ */

:root {
  --baseColor: #143d60;
  --subColor: #eb5b00;
  --whiteColor: #fefefe;
  --bgColor: #fdfbee;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--baseColor);
  font-size: 1rem;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  line-height: 1.8;
  background-color: var(--bgColor);
}

h1,
h2 {
  margin-bottom: 10px;
  color: var(--subColor);
  font-weight: 400;
  font-style: normal;
  font-family: 'Fascinate Inline', system-ui;
  text-align: center;
}


/* ============================ */
/*  link
/* ============================ */

a {
  transition: all 0.3s;
}

a:link,
a:visited {
  color: var(--baseColor);
  text-decoration-line: underline;
  text-decoration-color: var(--subColor);
  /* text-decoration: underline var(--subColor); /* Safari以外は一括指定でも可 */
}

a:hover,
a:active {
  color: var(--subColor);
  text-decoration: none;
}


/* ============================ */
/*  .wrapper
/* ============================ */

.wrapper {
  margin: 40px auto;
  width: 90%;
  max-width: 550px;
  /* width: min(90%, 550px); /* ←まとめてこのように書くこともできます */
}


/* ============================ */
/*  .header
/* ============================ */

.header {
  margin-bottom: 40px;
}

h1 {
  font-size: 2.5em;
}

.prof_icon {
  margin: 0 auto 20px;
  width: fit-content;
  border-radius: 50%;
  overflow: hidden;
}


/* ============================ */
/*  .main
/* ============================ */

.main {
  margin-bottom: 40px;
}

h2 {
  font-size: 2.25em;
}

.main ul li {
  margin-bottom: 15px;
  list-style: none;
}

.main ul li a {
  padding: 15px 50px 15px 15px;
  text-decoration: none;
  background-color: var(--whiteColor);
  border: 1px solid var(--baseColor);
  border-radius: 5px;
  position: relative;
  display: block;
}

.main ul li a:hover {
  color: var(--subColor);
  border-color: var(--subColor);
}

.main ul li h3 {
  font-size: 1.15em;
}

.main ul li h3 .ph-fill {
  margin-right: 5px;
}

.main ul li a > .ph-fill {
  margin-block: auto;
  font-size: 18px;
  width: 18px;
  height: 18px;
  position: absolute;
  inset-block: 0;
  right: 15px;
}

@media screen and (max-width: 549px) {
  /* スマホでの表示 */
  .main ul li h3 {
    font-size: 1em;
  }

  .main ul li p {
    font-size: 0.9em;
  }
}


/* ============================ */
/*  .footer
/* ============================ */

.footer {
  text-align: center;
}

.footer small {
  font-size: 0.85em;
}

改行分もカウントしていますが、全体で200行弱のコードです。

以上でCSSの記述も完全に終わり、プロフィールページが完成しました。ここまでおつかれさまでした。

参考情報など

このチャプターで解説したCSSのプロパティや値などについて、詳細を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントなどもご覧ください。

results matching ""

    No results matching ""