レスポンシブデザインとは？

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 61/76。

ウェブデザインにおいて、レスポンシブデザインは、デスクトップコンピュータのモニターから携帯電話まで、幅広いデバイスにわたって適応し、最適な閲覧体験を提供することを目指すウェブページを作成するためのアプローチです。レスポンシブなウェブサイトは、表示されているデバイスの画面サイズ、解像度、および向きに基づいて、レイアウト、コンテンツ、および機能を自動的に調整します。レスポンシブデザインの目標は、使用しているデバイスに関係なく、ユーザーがウェブサイトに簡単にアクセスし、操作できるようにすることです。

レスポンシブデザインは、以下を含む手法の組み合わせによって実現されます：

フレキシブルなグリッドとレイアウト：CSS gridやFlexboxを使用して、さまざまな画面サイズに適応できるレイアウトを作成します。

柔軟な画像とメディア: 画像やその他のメディアがレイアウトに合わせて比例的にスケールするようにします。

メディアクエリ: 画面の幅、高さ、向きなどのデバイスの特性に基づいて、異なるCSSスタイルを適用すること。

ウェブを閲覧するためにモバイルデバイスを使用する人が増えるにつれ、ウェブサイトを使いやすくするためにレスポンシブデザインは不可欠になっています。それは、あなたのサイトがどのデバイスでも見栄えが良く、適切に機能することを保証し、ユーザーにスムーズで一貫した体験を提供します。

チャレンジ

簡単

見出し（<h1>）、段落（<p>）、および2つの画像（<img>）を含むHTMLドキュメントが与えられています。あなたのタスクは、基本的なCSSを追加して要素をレスポンシブにし、固定の高さ（fixed height）と自動の高さ（auto height）の違いを明確に示すことです。以下の手順に従ってください：

<h1>要素をターゲットとするCSSルールを記述してください。font-sizeを5vwに設定します。これにより、見出しのフォントサイズがビューポートの幅に応じてレスポンシブになります。
<p>要素をターゲットとするCSSルールを記述してください。font-sizeを3vwに設定します。これにより、段落のフォントサイズがビューポートの幅に応じてレスポンシブになります。
.fixed-heightクラスをターゲットとするCSSルールを記述してください。widthを100%に、heightを150pxに設定します。これにより、固定の高さを強制することで画像が歪んで表示されます。
.auto-heightクラスをターゲットとするCSSルールを記述してください。widthを100%に、heightをautoに設定します。これにより、アスペクト比を維持しながら画像が比例して拡大縮小されます。
コンテナ（.container）に対して、widthを300px、borderを2px solid #ccc、marginを20px、paddingを10pxにするCSSルールを記述してください。

チートシート

レスポンシブデザインは、フレキシブルなレイアウト、スケーラブルなメディア、およびメディアクエリを通じて、さまざまなデバイスや画面サイズに適応するウェブページを作成します。

レスポンシブデザインの主な手法：

フレキシブルなグリッドとレイアウト: CSS GridまたはFlexboxを使用する
フレキシブルな画像とメディア: レイアウトに合わせて比例的にスケーリングする
メディアクエリ: デバイスの特性に基づいて異なるスタイルを適用する

レスポンシブなタイポグラフィにはビューポート単位を使用します：

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

適切なスケーリングで画像をレスポンシブにします：

/* 固定の高さ - 歪みの原因になります */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* 自動の高さ - アスペクト比を維持します */
.auto-height {
  width: 100%;
  height: auto;
}

自分で試してみよう

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>