Grok先生のHTML/CSS講座

レスポンシブとは？

レスポンシブデザインは、スマホやPCなど異なる画面サイズに対応する技術です。`SPARKLE_DYNAMIC.html`では、この写真がモバイルで縦に並ぶよう調整されています。

ソースコード例（メディアクエリ）:

@media (max-width: 768px) {
    .photo-section {
        flex-direction: column;
    }
    .photo-section img,
    .text-box {
        width: 100%;
    }
}

画面幅が768px以下でレイアウトを変更します。

ビューポートの設定

``で、モバイル表示を最適化します。このクローズアップ写真も、デバイスに応じて適切なサイズで表示されます。

ソースコード例:

これを``に追加します。

実践してみよう

`SPARKLE_DYNAMIC.html`のレスポンシブ設定を試してみましょう。陽太と悠斗の笑顔がどんなデバイスでも美しく見えるように調整してください。

サンプルページを見る