私たちは、お客様のプライバシーを大切にします

私たちは、お客様のブラウジング体験を向上させ、パーソナライズされた広告やコンテンツを提供し、当社のトラフィックを分析するためにクッキーを使用しています。「すべてのクッキーを受け入れる」をクリックすると、当社のクッキーの使用に同意したことになります。

同意に関する設定をカスタマイズ

当社は、お客様を効率的にナビゲートし、特定の機能を実行できることを目的としてクッキーを使用しています。以下の各同意項目の下に、すべてのクッキーの詳細情報が記載されています。

「必須」に分類されるクッキーは、サイトの基本的な機能を有効にするために不可欠であるため、お客様のブラウザに保存されます。

また、当社は、お客様による本サイトの利用状況を分析し、お客様の好みを保存し、お客様に関連するコンテンツや広告を提供するために、サードパーティーのクッキーを使用しています。これらのクッキーは、お客様の事前の同意がある場合にのみ、お客様のブラウザに保存されます。

お客様は、これらのクッキーの一部、または全部を有効または無効にすることができますが、一部のクッキーを無効にすると、お客様のブラウジング体験に影響を与える場合があります。

常に効にする

必須クッキーとは、安全なログインの提供や同意設定の調整など、このサイトの基本機能を有効にするために必要なクッキーです。これらのクッキーは、個人を特定できるようなデータを保存することはありません。

表示するクッキーがありません。

機能クッキーは、ソーシャルメディアプラットフォームでのウェブサイトのコンテンツの共有、フィードバックの収集、その他のサードパーティの機能など、特定の機能の実行をサポートします。

表示するクッキーがありません。

分析用クッキーは、訪問者がウェブサイトとどのように関わっているかを理解するために使用されます。これらのクッキーは、訪問者数、直帰率、トラフィックソースなどの指標に関する情報を提供することをサポートします。

表示するクッキーがありません。

パフォーマンスクッキーは、ウェブサイトの主要なパフォーマンス指標を理解し、分析するために使用され、訪問者に優れたユーザー体験を提供することをサポートします。

表示するクッキーがありません。

広告クッキーは、訪問者が以前に訪れたページに基づいてカスタマイズされた広告を提供し、広告キャンペーンの有効性を分析するために使用されます。

表示するクッキーがありません。

プログラミング

HTMLとCSSでウェブサイト作成

最終更新： 22/04/2025
1 分の読み

HTMLとCSSを使って、複数のページからなるウェブサイトを作成する方法について、初心者向けに完全かつ包括的な記事をお届けします。ウェブ開発の基本的な概念から、実際のコーディングの手順までをわかりやすく解説します。

1. ウェブサイト作成の準備

ウェブサイトを作成するには、まず以下の2つの基本的な技術を理解する必要があります。

関連記事

  • HTML (HyperText Markup Language): ウェブページの構造を定義するための言語。ウェブページのテキストや画像、リンクなどの要素を配置するために使用されます。

  • CSS (Cascading Style Sheets): ウェブページのデザインを定義するためのスタイルシート言語。HTMLで作成した要素に色、フォント、レイアウトなどのスタイルを適用することができます。

これらを組み合わせて、シンプルなウェブサイトを作成することができます。では、具体的な手順を見ていきましょう。

2. HTMLの基本

まずはHTMLの基本的な構造を理解しましょう。以下のコードは、シンプルなHTMLページの例です。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ウェブサイトタイトルtitle>
head>
<body>
    <header>
        <h1>ウェブサイトへようこそ!h1>
        <nav>
            <ul>
                <li><a href="index.html">ホームa>li>
                <li><a href="about.html">このサイトについてa>li>
                <li><a href="contact.html">お問い合わせa>li>
            ul>
        nav>
    header>
    
    <main>
        <h2>このページの内容h2>
        <p>ここにページの内容が入ります。画像やリンク、テキストを追加して、サイトを豊かにしましょう。p>
    main>

    <footer>
        <p>© 2025 あなたのサイト名p>
    footer>
body>
html>

このコードでは、HTMLドキュメントの基本的な要素が示されています。

  • : HTML5文書であることを宣言します。

  • タグ: HTML文書の開始を示します。

  • タグ: ページのメタ情報（文字セット、タイトル、スタイルなど）を定義します。

  • タグ: 実際にブラウザに表示されるコンテンツが入ります。

  • ,
    ,

    : ページのヘッダー、メインコンテンツ、フッターを定義します。

これで基本的なページ構造ができました。

3. 複数ページの作成

ウェブサイトを複数のページで構成する場合、各ページを個別のHTMLファイルとして作成します。上記のHTMLコードを使い、以下の3つのページを作成してみましょう。

  • index.html: ホームページ

  • about.html: サイトについて

  • contact.html: お問い合わせ

各ページのリンクを適切に設定して、ナビゲーションが機能するようにします。例えば、about.htmlの内容は次のように書きます。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>このサイトについてtitle>
head>
<body>
    <header>
        <h1>このサイトについてh1>
        <nav>
            <ul>
                <li><a href="index.html">ホームa>li>
                <li><a href="about.html">このサイトについてa>li>
                <li><a href="contact.html">お問い合わせa>li>
            ul>
        nav>
    header>
    
    <main>
        <h2>サイトの紹介h2>
        <p>このサイトは、HTMLとCSSを学ぶためのサンプルサイトです。p>
    main>

    <footer>
        <p>© 2025 あなたのサイト名p>
    footer>
body>
html>

index.htmlと同様に、about.htmlでもヘッダーとフッターを追加し、ナビゲーションリンクを設定しています。

4. CSSの基本

次に、CSSを使ってウェブサイトのデザインを整えます。まずは基本的なスタイルを設定してみましょう。

css
/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 15px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

main {
    padding: 20px;
    margin: 20px;
    background-color: white;
    border-radius: 8px;
}

上記のCSSでは、以下のようなスタイルを設定しています。

  • body: ページ全体のフォント、背景色、文字色を設定しています。

  • header: ヘッダーの背景色、テキスト色、パディングを設定しています。

  • footer: フッターのスタイルを固定位置に設定し、背景色や文字色を調整しています。

  • main: メインコンテンツの余白と背景色を設定し、デザインを整えています。

これをstyle.cssという名前で保存し、HTMLファイルの部分にリンクを追加します。

html
<link rel="stylesheet" href="style.css">

これで、CSSスタイルがHTMLファイルに適用されます。

5. 複数ページの統一感

複数のページを作成した後、各ページで同じCSSファイルを参照することで、ウェブサイト全体のデザインを統一することができます。また、ナビゲーションリンクをすべてのページに追加することで、訪問者がどのページからでも簡単にサイト内を移動できるようになります。

6. 結論

HTMLとCSSを使って、複数ページからなるシンプルなウェブサイトを作成する方法を学びました。まずHTMLでページの構造を作り、CSSでデザインを整えることで、基本的なウェブサイトが完成します。これをもとに、さらに詳細なデザインや機能を追加することができます。初心者でもステップバイステップで進めることができるので、ぜひ実際に手を動かしてみてください。

最終更新： 22/04/2025
1 分の読み
Back to top button