Webサイト制作の旅に出よう！

WEB制作

プログラミングに興味はあっても、「何から始めたらいいか分からない」「本を読んでも挫折してしまう…」そんな風に感じていませんか？Webサイト制作は、専門的な知識がなくても、HTMLとCSSの基礎さえあれば誰でも始めることができます。

この記事では、Web制作の「三種の神器」のうち、基本中の基本であるHTMLとCSSに焦点を当て、実際に手を動かしながら一つのWebサイトを作り上げていく実践的なガイドを提供します。難しい専門用語はなるべく避け、一つひとつのステップを丁寧に解説しますので、ご安心ください。さあ、一緒にWebサイト制作の楽しい旅に出かけましょう！

ステップ1：Webサイトの「設計図」を描く（HTML）

Webサイトを作るには、まずページの骨組みを定義する必要があります。この骨組みを作るのが**HTML（HyperText Markup Language）**です。HTMLは、見出し、段落、画像、リンクといった要素を配置するための言語で、まるで家の設計図を描くようなものです。

必要な道具を用意しよう

  • テキストエディタ: プログラミング専用のメモ帳のようなものです。Windowsなら「メモ帳」、Macなら「テキストエディット」でも十分ですが、無料で使える「Visual Studio Code（VS Code）」が最もおすすめです。
  • Webブラウザ: Google ChromeやSafariなど、Webサイトを見るためのソフトです。

最初のHTMLファイルを作成しよう

テキストエディタを開き、以下のコードをコピー＆ペーストしてください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私のポートフォリオサイト</title>
</head>
<body>

    <header>
        <h1>私のポートフォリオサイト</h1>
        <p>ようこそ！私の作品をご覧ください。</p>
    </header>

    <main>
        <section>
            <h2>自己紹介</h2>
            <p>こんにちは！私の名前は〇〇です。Web制作の学習を始めたばかりですが、日々の成長を楽しんでいます。</p>
        </section>

        <section>
            <h2>私の作品</h2>
            <article>
                <h3>作品1：シンプルなブログサイト</h3>
                <p>初めてHTMLとCSSだけで作ったブログサイトです。</p>
            </article>
            <article>
                <h3>作品2：カフェの紹介ページ</h3>
                <p>FlexboxとGridを使ってレイアウトを工夫しました。</p>
            </article>
        </section>

    </main>

    <footer>
        <p>&copy; 2024 私のポートフォリオ</p>
    </footer>

</body>
</html>

コードを貼り付けたら、ファイル名を「index.html」として保存してください。そして、そのファイルをダブルクリックしてブラウザで開いてみましょう。装飾のないシンプルなテキストが表示されるはずです。これがWebサイトの土台です。

ステップ2：Webサイトを「おしゃれに」飾る（CSS）

HTMLで作った骨組みに、色や形、レイアウトといった「装飾」を施すのが**CSS（Cascading Style Sheets）**です。CSSは、Webサイトの見た目を一変させる魔法のような言語です。

CSSファイルを作成しよう

新しいテキストファイルを作成し、以下のコードをコピー＆ペーストしてください。

CSS

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: white;
    padding: 2rem;
    text-align: center;
}

header p {
    font-style: italic;
}

main {
    max-width: 960px;
    margin: 2rem auto;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section {
    margin-bottom: 2rem;
}

h1, h2, h3 {
    color: #007bff;
}

article {
    border-left: 5px solid #007bff;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: white;
}

このファイルを「style.css」という名前で、先ほど保存した「index.html」と同じフォルダに保存してください。

HTMLとCSSを連携させる

HTMLファイルにCSSを読み込ませるには、HTMLファイルの<head>タグ内に以下の1行を追加します。

HTML

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

この行は、「このHTMLに、style.cssというファイルをスタイルシートとして適用してください」という指示になります。

修正した「index.html」を保存し、ブラウザで再読み込みしてみてください。さっきまで味気なかったページが、まるで違うWebサイトのように装飾されているはずです。

ステップ3：レイアウトを整える（FlexboxとGrid）

CSSの基本プロパティだけでも見た目は整えられますが、要素の配置を自由自在に操るには、FlexboxやCSS Gridといったレイアウト用の技術が不可欠です。

Flexboxで横並びのナビゲーションメニューを作る

今回はナビゲーションメニューがないので、代わりに作品のセクションをFlexboxで横並びにしてみましょう。index.htmlの<h2>私の作品</h2>の下に、以下のコードを追加します。

HTML

<div class="works-container">
    <article class="work-item">
        <h3>作品1：シンプルなブログサイト</h3>
        <p>初めてHTMLとCSSだけで作ったブログサイトです。</p>
    </article>
    <article class="work-item">
        <h3>作品2：カフェの紹介ページ</h3>
        <p>FlexboxとGridを使ってレイアウトを工夫しました。</p>
    </article>
</div>

そして、style.cssに以下のCSSを追加します。

CSS

.works-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.work-item {
    flex: 1;
    border: 1px solid #ddd;
    padding: 1.5rem;
    border-radius: 8px;
    background-color: #f9f9f9;
}

works-containerにdisplay: flex;を設定することで、その中のwork-itemが横並びになります。justify-content: space-between;で両端に寄せ、flex: 1;で均等な幅に広がるように指示しています。

まとめ：Web制作は「小さな達成感」の積み重ね

お疲れ様でした！これであなただけのオリジナルのWebサイトが完成しました。今回のガイドで学んだことは、Web制作のほんの入り口に過ぎません。しかし、この小さな成功体験こそが、これからの学習の大きな原動力になります。

  • HTMLでコンテンツを定義する
  • CSSで見た目を装飾する
  • FlexboxやGridでレイアウトを整える

この3つのステップをマスターすれば、あなたのアイデアを形にするための強力なツールを手に入れたことになります。

次は、画像を追加したり、リンクを貼ったり、さらに装飾を加えてみましょう。そして、JavaScriptを学び、Webサイトに動きをつけることに挑戦してみてください。Web制作の旅は、ここからが本当の始まりです。あなたの創造性をWebの世界で存分に発揮してください！

タイトルとURLをコピーしました