Grok先生のHTML/CSS講座

HTMLとは？

HTMLはウェブページの構造を作る言語です。`SPARKLE_DYNAMIC.html`では、`

<header>
    <h1>SPARKLE DYNAMIC</h1>
    <p class="subtitle">アクティブスポーツコレクション</p>
</header>

CSSでデザイン

CSSはHTMLにスタイルを加えます。`SPARKLE_DYNAMIC.html`では、ダークグリーンとオレンジで統一感を出し、Flexboxでレイアウトを整えました。このクローズアップ写真は、CSSで強調した製品の魅力を示しています。

ソースコード例（セクションのスタイル）:

.photo-section {
    display: flex;
    align-items: center;
    margin: 40px 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

このCSSは、写真とテキストを横に並べ、影を付けて立体感を出します。

実践してみよう

`SPARKLE_DYNAMIC.html`を参考に、自分のページを作ってみましょう。この陽太と悠斗の笑顔のような写真を`

<section class="photo-section">
    <img src="image3.jpg" alt="陽太と悠斗の笑顔">
    <div class="text-box">
        <h2>青春の輝きを今すぐ</h2>
        <p>陽太と悠斗のように輝こう！</p>
    </div>
</section>