はじめに

スマホで確認した際に「横スクロールが発生して読みにくい」と感じたことがきっかけです。デザインを大きく変えずに対応できる方法を整理しようと思いました。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

Webサイトをスマートフォンでも快適に閲覧できるようにするためには、レスポンシブ対応が欠かせません。

この記事では、ホンダ社労士事務所のサイトにおける、基本的なレスポンシブ設計の工夫をまとめます。

スマホ対応しているポイントまとめ

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

スマホ画面の横幅に合わせてページが調整されるようになります。これにより、スマホでの横スクロールが不要になります。

<img src="xxx" style="width: 100%; height: auto;" />

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
}

画面サイズに応じて自動でサイズが調整され、スマホでも快適に閲覧・操作できます。

.container {
  max-width: 960px;
  margin: 0 auto;
}

PCでは最大幅を確保しつつ、スマホでは画面サイズに応じた中央寄せの表示が可能です。

section {
  padding: 30px 20px;
}
main {
  padding: 40px 20px;
}

余白を設けることで、スマホでも窮屈に感じにくく、文章が読みやすくなります。

button {
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 16px;
}

指で操作しやすい大きさになっており、ユーザーの操作性を高めます。

現状のHTML＋CSS構成では、以下のように基本的なレスポンシブ対応が整っています：

CSSをさらに調整すれば、より洗練されたスマホ対応サイトへと発展させることも可能です。