HTML と CSS を使用して初めてのレスポンシブ Web サイトを構築する-CSSチュートリアル-php.cn

HTML と CSS を使用して初めてのレスポンシブ Web サイトを構築する

王林

リリース： 2024-07-31 02:59:32

オリジナル

593 人が閲覧しました

Building Your First Responsive Website with HTML and CSS

レスポンシブ Web サイトの作成は、フロントエンド開発者にとって必須のスキルです。レスポンシブ Web サイトは、デバイスと画面サイズに基づいてレイアウトとコンテンツを調整し、すべてのデバイスで優れたユーザーエクスペリエンスを保証します。この記事では、HTML と CSS を使用して基本的なレスポンシブ Web サイトを構築するプロセスを説明します。

前提条件

始める前に、HTML と CSS の基本を理解しておく必要があります。 CSS Flexbox とメディアクエリに精通していることも有益です。

ステップ 1: プロジェクトのセットアップ

まず、新しいプロジェクトフォルダーを作成し、次のファイルを追加します。

Index.html: メインの HTML ファイル。
styles.css: Web サイトのスタイルを設定するための CSS ファイル。

ステップ 2: HTML の構造化

index.html を開いて、必要な基本的な HTML 構造を追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Responsive Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Welcome to My Website</h2>
            <p>This is a simple responsive website built with HTML and CSS.</p>
        </section>
        <section id="about">
            <h2>About Us</h2>
            <p>We provide excellent web development services.</p>
        </section>
        <section id="services">
            <h2>Our Services</h2>
            <p>We offer a wide range of web development services.</p>
        </section>
        <section id="contact">
            <h2>Contact Us</h2>
            <p>Feel free to reach out to us for any inquiries.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Responsive Website</p>
    </footer>
</body>
</html>

ログイン後にコピー

ステップ 3: ウェブサイトのスタイルを設定する

次に、styles.css ファイルを開いて、いくつかの基本スタイルを追加することから始めます。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
}

header h1 {
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 2rem;
}

section {
    margin-bottom: 2rem;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

ログイン後にコピー

ステップ 4: レスポンシブにする

Web サイトの応答性を高めるために、メディアクエリを使用します。これらにより、画面サイズに基づいてさまざまなスタイルを適用できます。次のメディアクエリをstyles.cssに追加します:

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 0.5rem 0;
    }

    main {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5rem;
    }

    nav ul li {
        margin: 0.25rem 0;
    }

    main {
        padding: 0.5rem;
    }
}

ログイン後にコピー

ステップ 5: Web サイトをテストする

Web ブラウザでindex.html を開き、ブラウザウィンドウのサイズを変更して、さまざまな画面サイズに合わせてレイアウトがどのように調整されるかを確認します。ナビゲーションメニューが垂直方向にスタックされ、画面の幅が狭くなるにつれてコンテンツの周囲のパディングが減少することがわかります。

ついに

これで、HTML と CSS を使用してシンプルなレスポンシブ Web サイトを構築できました。この例では、Web ページの構造化とメディアクエリを使用したレスポンシブデザインの作成の基本について説明します。経験を積むにつれて、CSS グリッド、フレックスボックス、レスポンシブ画像などの高度なテクニックを探索して、より複雑で動的なレイアウトを作成できるようになります。

お楽しみに!!!

以上がHTML と CSS を使用して初めてのレスポンシブ Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。