スマホ対応のためのHTMLとCSSのコーディング

現代のウェブ開発では、スマートフォン対応（レスポンシブデザイン）は必須です。本記事では、HTMLとCSSを活用したスマホ対応のコーディング方法を解説します。

ビューポートの設定

スマホで正しく表示されるように、まずは<meta>タグを設定します。

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

この設定により、デバイスの画面幅に合わせた表示が可能になります。

この部分の詳しい解説はこちら！！

ビューポートの詳しい解説！【初心者にもわかりやすい】

<meta name="viewport" content="width=device-width, initial-scale=1"> は、スマホ対応（レスポンシブデザイン）をする上で非常に重要な設定です。その知識をすべてわかりやすく解説しています！

monmontraining.com

2025.02.23

メディアクエリの活用

メディアクエリを使うことで、デバイスの画面サイズに応じたスタイルを適用できます。

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
    padding: 10px;
  }
}

max-width: 768pxのルールは、タブレット以下のサイズで適用されます。

フレキシブルなレイアウト

スマホ対応のためには、固定幅ではなく柔軟なレイアウトが重要です。

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

また、flexbox や grid を活用することで、レイアウト調整がしやすくなります。

.flex-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .flex-container {
    flex-direction: row;
  }
}

flexについての詳しい説明はこちらへ！

画像の最適化

スマホで画像を適切に表示するために、CSSで最大幅を設定しましょう。

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

height: auto; を指定することで、アスペクト比を保ったまま縮小できます。

タッチ操作の考慮

スマホではマウスではなく指で操作するため、タッチ領域を適切に設定することが重要です。

button {
  padding: 12px 20px;
  font-size: 16px;
}

また、hoverの代わりに:activeや:focusを活用するとよいでしょう。

まとめ

スマホ対応の基本は、

これらを意識したコーディングを行うことで、より使いやすいウェブサイトを作ることができます。