HTMLで作ったページをスマートフォンで開くと、文字や画像が小さすぎたり、横スクロールが出たりすることがあります。スマホ専用ページを別に作るのではなく、1つのHTMLを画面幅へ合わせて変化させるレスポンシブWebデザインが基本です。
スマホ対応では、最初にmeta viewportを設定し、画像やコンテナの幅を柔軟にし、必要な場所だけメディアクエリでレイアウトを切り替えます。HTMLだけでは完成せず、CSSとの組み合わせが必要です。
この記事では、パソコン向けの3列レイアウトをスマートフォン向けの1列表示へ変更する手順を、変更前の状態から順番に解説します。文字、画像、ボタン、表の確認ポイントもまとめました。
HTMLをスマホ対応する3つの基本
上の図は、スマホ対応の基本的な流れです。最初から特定の端末だけを目標にせず、狭い画面から広い画面まで内容が無理なく読める状態を目指します。
- HTMLの
head要素へviewportを設定する - 幅を固定せず、コンテナと画像が画面内へ収まるCSSを書く
- 内容が窮屈になる幅でメディアクエリを追加する
この順番で作ると、CSSの指定を増やしすぎずに対応できます。まずは小さなカード一覧を例に、実際のコードを追加していきましょう。
変更前のHTMLとCSSを確認する
変更前は、3枚のカードを横に並べたページです。HTMLは内容の構造を作り、CSSで幅と配置を指定しています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サービス紹介</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<h1>サービス紹介</h1>
<div class="cards">
<article class="card">
<h2>制作</h2>
<p>目的に合うWebページを制作します。</p>
</article>
<article class="card">
<h2>運用</h2>
<p>公開後の更新をサポートします。</p>
</article>
<article class="card">
<h2>改善</h2>
<p>アクセス状況から改善します。</p>
</article>
</div>
</main>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
color: #172033;
}
.container {
width: 960px;
margin-inline: auto;
}
.cards {
display: flex;
gap: 24px;
}
.card {
width: 304px;
padding: 24px;
border: 1px solid #d7dce5;
border-radius: 12px;
}containerが960px、カードが304pxに固定されています。960pxより狭い画面では内容が収まらず、ページ全体に横スクロールが出ます。
viewportをHTMLへ追加する
最初に、head要素へviewportのmeta要素を追加します。スマートフォンのブラウザへ、表示領域の幅を端末の幅として扱うように伝える設定です。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サービス紹介</title>
<link rel="stylesheet" href="style.css">
</head>width=device-widthは表示領域を端末幅へ合わせ、initial-scale=1は初期表示の拡大率を等倍にします。この1行だけでレイアウトが自動的に整うわけではなく、次にCSSの固定幅も修正します。
user-scalable=noなどで利用者の拡大操作を制限すると、小さい文字を拡大できなくなる場合があります。特別な理由がなければ、ズームを禁止する指定は加えません。
幅を固定値から柔軟な値へ変更する
次に、コンテナとカードの固定幅を外します。狭い画面を基準にCSSを書き、画面が広くなったときだけ最大幅を制限するモバイルファーストの形に変更します。
.container {
width: min(100% - 32px, 960px);
margin-inline: auto;
}
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.card {
min-width: 0;
padding: 20px;
border: 1px solid #d7dce5;
border-radius: 12px;
}width: min(100% - 32px, 960px)により、狭い画面では左右16pxずつの余白を残し、広い画面でも最大960pxまでに収まります。カードは最初から1列なので、スマートフォンでも横へはみ出しません。
min-width: 0は、GridやFlexの子要素に長い文字列がある場合のはみ出しを防ぎやすくする指定です。URLや英単語が長いときは、必要に応じてoverflow-wrap: anywhereも検討します。
メディアクエリで2列・3列へ切り替える
1列のままでも読めますが、画面が広いと余白が多くなります。カードの内容が無理なく並ぶ幅を確認し、2列と3列へ切り替えるメディアクエリを追加します。
/* 640px以上で2列 */
@media (min-width: 40rem) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
/* 960px以上で3列 */
@media (min-width: 60rem) {
.cards {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}@media (min-width: 40rem)の中は、表示領域が40rem以上のときだけ適用されます。スマホ向けの基本スタイルを先に書き、広い画面向けの変更を後から追加する構成です。
ブレイクポイントは「スマートフォンは必ず何px」と端末名だけで決めません。ブラウザ幅をゆっくり広げ、内容が窮屈になる直前や余白が大きくなりすぎる位置で決めると、未知の端末にも対応しやすくなります。
画像と動画を画面内へ収める
幅の大きい画像には、親要素より広がらない指定を加えます。HTMLのwidthとheight属性は表示比率の計算に役立つため、画像の元サイズに合わせて残します。
<img
class="hero-image"
src="service.jpg"
alt="ノートパソコンでWebページを確認する様子"
width="1200"
height="800"
>.hero-image {
display: block;
max-width: 100%;
height: auto;
}max-width: 100%で親要素より大きくならないようにし、height: autoで縦横比を保ちます。画像を単純に縮小するだけでなく、画面幅に応じて適切な画像ファイルを選ぶsrcsetとsizesも表示速度の改善に役立ちます。
文字・ボタン・ナビゲーションを調整する
本文を横へ詰め込みすぎない
文字を小さくして無理に収めるのではなく、適度な余白と行間を保ちます。本文の基本サイズを相対単位で指定すると、ブラウザや利用者の文字サイズ設定も反映しやすくなります。
body {
font-size: 1rem;
line-height: 1.7;
}
h1 {
font-size: clamp(1.75rem, 1.4rem + 2vw, 3rem);
line-height: 1.2;
}clamp()は最小値、画面幅に応じた値、最大値の順に指定します。見出しがスマートフォンで大きすぎず、パソコンで小さすぎない範囲へ収まります。
ボタンを押しやすくする
リンクやボタンは、指で押したときに隣の項目を誤操作しない大きさと間隔を確保します。文字だけの小さな領域にせず、paddingを使って操作できる範囲を広げましょう。
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.7em 1.2em;
}メニューをキーボードでも操作できるようにする
スマホ用メニューを開閉する場合は、見た目だけのdivではなくbuttonを使います。開閉状態はaria-expandedで伝え、Tabキーで移動したときのフォーカス表示も消さないようにします。
表と長いコードの横スクロールを限定する
列数が多い表を無理に縮めると、文字が1文字ずつ改行されて読みにくくなります。ページ全体ではなく、表を囲む要素だけ横スクロールできるようにします。
<div class="table-scroll" tabindex="0">
<table>
<!-- 表の内容 -->
</table>
</div>.table-scroll {
max-width: 100%;
overflow-x: auto;
}スクロール可能な範囲には、必要に応じて説明文や視覚的な手掛かりを加えます。コードブロックや地図など、固定幅になりやすい部品も同じ考え方で確認してください。
スマホ対応を確認する方法
- ブラウザのウィンドウ幅を狭くして横スクロールが出ないか確認する
- 開発者ツールのデバイス表示で複数の幅を確認する
- 文字サイズを拡大して内容が重ならないか確認する
- Tabキーでリンク・ボタン・メニューを操作する
- 実際のスマートフォンでもタップとスクロールを確認する
特定の幅だけを見るのではなく、320px程度の狭い表示から大きな画面まで連続して変えてください。途中の幅でカードが急に窮屈になる場合は、ブレイクポイントや余白を調整します。
HTMLとCSSを初めて組み合わせる場合は、基本のファイル作成から小さなページを完成させる流れも確認しておくと理解しやすくなります。
HTMLのスマホ対応に関するよくある質問
HTMLだけでスマホ対応できますか？
viewportの設定はHTMLへ書きますが、幅・並び方・文字サイズなどの変更にはCSSが必要です。HTMLで内容の構造を作り、CSSで画面幅に応じた見た目を指定します。
スマホ用HTMLを別に作る必要はありますか？
一般的なページでは、同じHTMLをCSSで変化させる方法から検討します。内容を二重に管理せずに済み、端末幅が増えても対応しやすいためです。
メディアクエリは何pxにすればよいですか？
端末名だけで固定せず、実際の内容が崩れる位置を基準に決めます。最初は1列で作り、カードを2列にしても十分な幅が取れる位置、3列にしても読みやすい位置をブラウザで探してください。
まとめ
HTMLをスマホ対応するには、viewportの設定、柔軟な幅、メディアクエリの3つを組み合わせます。狭い画面の1列表示を基本にし、内容が無理なく並ぶ幅で2列・3列へ広げると分かりやすいCSSになります。
画像、文字、ボタン、ナビゲーション、表も個別に確認してください。最後は開発者ツールだけで終わらせず、実機とキーボード操作でも読みやすさ・押しやすさを確かめましょう。