フロントエンド入門：レスポンシブ対応って何？CSSで画面サイズに応じたデザインを作ったので紹介してみる

はじめに

スマートフォンやタブレットなど、さまざまな画面サイズでWebサイトが閲覧される現代では、"レスポンシブ対応" が欠かせません。

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

本記事では、CSSのメディアクエリを使ったレスポンシブ対応の具体的な実装方法について、コードとあわせて解説します。

書こうと思ったきっかけ

自分で作ったWebサイトをスマホで確認したときに、ナビゲーションがはみ出していたり、メニューが見づらくなっていたりすることがありました。

「PCでは完璧なのに！」と思って調べた結果、メディアクエリを使ったレスポンシブ対応に行き着いたため、忘れないようにまとめておきます。

内容の説明（レスポンシブ対応のCSSコード）

以下は、画面幅が768px以下のときに適用されるスタイルです。主にナビゲーションメニューをスマホ向けに切り替えるための設定です。

@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    background-color: #fff;
    position: absolute;
    top: 70px;
    right: 20px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
  }

  .nav-menu.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .hamburger {
    display: flex;
  }
}

解説ポイント

• .nav-menu：通常は非表示にし、メニューが開かれたときだけ表示。
• .nav-menu.active：JavaScriptなどでクラスが付与されると表示される。
• .menu-toggleと.hamburger：PCでは非表示にし、スマホでは表示。
• position: absolute を使用し、画面右上にナビゲーションが展開されるように設計。

このような仕組みで、限られた画面スペースを有効活用し、使いやすいUIを実現できます。

まとめ

レスポンシブ対応のCSSは、メディアクエリを活用することで簡単に実装できます。

特にナビゲーション周りはスマホでの使いやすさに直結するため、見落とさずに対応することが大切です。

今後は、レスポンシブだけでなく、アニメーションやARIA属性の付与なども取り入れながら、さらに洗練されたモバイルUXを目指していきたいと思います。