「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > HTML と CSS を使用して初めてのレスポンシブ Web サイトを構築する

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

2024 年 8 月 6 日に公開
ブラウズ:506

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 構造を追加します。



    
    
    Responsive Website
    


    

My Responsive Website

Welcome to My Website

This is a simple responsive website built with HTML and CSS.

About Us

We provide excellent web development services.

Our Services

We offer a wide range of web development services.

Contact Us

Feel free to reach out to us for any inquiries.

© 2024 My Responsive Website

ステップ 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 グリッド、フレックスボックス、レスポンシブ画像などの高度なテクニックを探索して、より複雑で動的なレイアウトを作成できるようになります。

乞うご期待!!!

リリースステートメント この記事は次の場所に転載されています: https://dev.to/egbo2255/building-your-first-sensitive-website-with-html-and-css-32eh?1 侵害がある場合は、[email protected] までご連絡ください。それを削除するには
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3