はじめに
スマホで確認した際に「横スクロールが発生して読みにくい」と感じたことがきっかけです。デザインを大きく変えずに対応できる方法を整理しようと思いました。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
Webサイトをスマートフォンでも快適に閲覧できるようにするためには、レスポンシブ対応が欠かせません。
この記事では、ホンダ社労士事務所のサイトにおける、基本的なレスポンシブ設計の工夫をまとめます。
スマホ対応しているポイントまとめ
1. <meta name="viewport"> の指定
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
スマホ画面の横幅に合わせてページが調整されるようになります。これにより、スマホでの横スクロールが不要になります。
2. 画像・入力欄に width: 100% を指定
<img src="xxx" style="width: 100%; height: auto;" />
input[type="text"],
input[type="email"],
textarea {
width: 100%;
}
画面サイズに応じて自動でサイズが調整され、スマホでも快適に閲覧・操作できます。
3. コンテンツの最大幅設定
.container {
max-width: 960px;
margin: 0 auto;
}
PCでは最大幅を確保しつつ、スマホでは画面サイズに応じた中央寄せの表示が可能です。
4. 適度な余白で読みやすさを確保
section {
padding: 30px 20px;
}
main {
padding: 40px 20px;
}
余白を設けることで、スマホでも窮屈に感じにくく、文章が読みやすくなります。
5. フォームやボタンのスマホ対応
button {
padding: 10px 20px;
border-radius: 25px;
font-size: 16px;
}
指で操作しやすい大きさになっており、ユーザーの操作性を高めます。
補足：さらに高度なレスポンシブ対応をしたい場合
| 対応内容 | 方法 |
|---|---|
| ナビゲーションをハンバーガーメニューにする | JavaScript + メディアクエリ |
| 2カラムをスマホで1カラムにする |
@media クエリの活用 |
| テキストサイズを可変にする |
clamp()、%、em、vw 単位などを活用 |
まとめ
現状のHTML＋CSS構成では、以下のように基本的なレスポンシブ対応が整っています：
- スマホ画面でも要素が自然に配置される
- 入力欄やボタンが使いやすく設計されている
- 余白や幅の工夫により、読みやすさ・操作性を両立
CSSをさらに調整すれば、より洗練されたスマホ対応サイトへと発展させることも可能です。