3-5. スマホでの見た目を調整する
このチャプターでは、スマホで表示した際の調整を行います。
ブラウザの検証ツールでスマホの見た目を確認する
各ブラウザには検証ツール（デベロッパーツール）という機能が搭載されており、この機能を利用することで、PC上でエミュレーター的にスマホやiPadでの表示を確認したり、HTMLやCSSを編集するといったことが可能です（このHTMLｙCSSの編集はこの場限りのものなので、実際のサイトやファイルに影響は与えません）
さきほど作成したプロフィールページを、スマホの画面で確認します。以下Google Chromeを例にしていますが、SafariやFirefox、Micrisoft Edgeでも多少操作は違いますがおおむねは同じです。
検証ツールの表示方法
index.htmlをブラウザで開き、画面上で右クリックをして出てきたメニューから「検証」を選びます。Firefoxは「調査」、Microfoft Edgeは「検査」という項目が該当します（ブラウザの設定メニューにも入っています）
Safariは「要素の詳細を表示」というメニュー項目ですが、先に「設定」の「詳細」画面で「Webデベロッパ用の機能を表示」にチェクを入れる必要があります。
「検証」を選ぶとブラウザ画面が分割され、以下のような表示が出てくるので、左上のPCとスマホがセットになったようなアイコンをクリックします。
画面表示がPC表示から切り替わります。画面上部に表示されるプルダウンメニューから、エミュレーターで使用できるデバイス（ブラウザに内蔵されているもの）を選んで表示を切り替えることができます。
スマホ表示用にCSSを調整する
ここではエミュレーターでiPhone SEを選択し、確認しています。
メディアクエリとは
先にもすこし解説していますが、デバイスの画面サイズ（ブラウザの表示幅）ごとの表示幅の違いによるCSSの調整は、「メディアクエリ」と呼ばれる手法で行います。@media screen and (...) {}という記述で、screen and (...)の部分にCSSを切り替える表示幅を指定します（ブレイクポイントといいます）
以下は主にWebサイトで利用されるメディアクエリの指定例です。
@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を調整する
さて、作成したプロフィールページをスマホで見ると、リスト項目のフォントサイズがすこし大きいと感じるので、調整します。
main部分の調整なので、CSSは.footerのコメントの上に記述しました。
.main ul li h3 {
font-size: 1.15em;
}
/*（略）*/
@media screen, print 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をブラウザで開くと、以下のように表示されます。
再度ブラウザのエミュレーターで確認すると、フォントサイズが小さくなっていることが確認できます。エミュレーターの表示を解除する（PCとスマホがセットになったようなアイコンを押す）とPC表示の状態に戻り、見た目の違いを確認できます。
検証ツールでは要素にあたっているCSSを確認することが可能です。以下のキャプチャーでは、h3要素において、スマホ表示の際はPCのh3にあてたCSSがメディアクエリで指定した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のプロパティや値などについて、詳細を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントなどもご覧ください。