月影

日々の雑感

ブログ執筆のためのHTML完全ガイド：その10　実践編：最初のブログ記事を完成させよう

ブログ改良

第9章：実践編：最初のブログ記事を完成させよう

これまでの章で、あなたはHTMLという名の「部品」をたくさん集めてきました。この最終章では、いよいよ最も楽しい作業、集めた部品をすべて組み上げて、一つの作品を完成させる番です！

この実践チュートリアルを通して、断片的な知識が繋がって一つのWebページという「作品」になる瞬間を体感し、「自分はHTMLで記事が書ける！」という確かな自信を手に入れましょう。

www.namuamidabu.com

チュートリアル：ゼロからブログ記事を作ってみよう！

さあ、架空のブログ記事「初めてのHTML」を、ステップ・バイ・ステップで一緒に作り上げていきましょう。

Step 1：土台を準備する（第2, 8章の知識）

まず、テキストエディタを開き、第2章で学んだ「設計図（ボイラープレート）」を貼り付けます。そして、第8章で学んだセマンティックHTMLの「賢い箱」を <body> の中に配置して、ページの骨格を作りましょう。ファイル名は index.html として保存します。

<!DOCTYPE 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>
    </header>
    <main>
        <article>
        </article>
    </main>
    <footer>
        <p>&copy; 2024 私のブログ</p>
    </footer>
</body>
</html>

Step 2：記事の主役、見出しと文章を入れる（第4章の知識）

<article> の中に、<h1>（本のタイトル）と <p>（段落）を使って、記事の基本的な内容を追加します。<title> タグの変更も忘れずに行いましょう。

<!-- <head>内 -->
<title>初めてのHTML：ブログ記事の書き方ガイド - 私のブログ</title>

<!-- <article>内 -->
<h1>初めてのHTML：ブログ記事の書き方ガイド</h1>
<p>この記事では、HTMLの基本を学び、自分自身でブログ記事を作成する方法を解説します。</p>
<p>HTMLはウェブページの骨格を作る言語です。<strong>表現の自由度</strong>が格段に向上します。</p>

Step 3：リスト、引用、画像、リンクで飾り付ける（第5, 6, 7章の知識）

ここからは、記事をより豊かにするパーツを追加していきます。<h2> でセクションを作り、<ul>（リスト）、<blockquote>（引用）、<img>（画像）、<a>（リンク）といった、これまで学んだタグを総動員しましょう！

<!-- <article>内に追記 -->
<h2>HTMLの主な利点</h2>
<ul>
    <li>レイアウトの自由なカスタマイズ</li>
    <li>SEO（検索エンジン最適化）への貢献</li>
    <li>アクセシビリティの向上</li>
</ul>

<p>ウェブ技術のドキュメントを提供するMDN Web Docsでは、次のように述べられています。</p>
<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML">
    <p>HyperText Markup Language (HTML) は、ウェブページを作成するために用いられる標準のマークアップ言語です。</p>
</blockquote>
<p>この情報は <cite>MDN Web Docs</cite> から引用しました。</p>

<h2>画像の表示</h2>
<p>HTMLを使えば、簡単に画像をページに表示できます。</p>
<img src="images/html-logo.png" width="150" alt="HTML5のロゴ">

<h2>さらに学ぶには</h2>
<p>より詳しい情報は、<a href="https://developer.mozilla.org/" target="_blank">MDNの公式サイト</a>をご覧ください。</p>
<p><a href="about.html">このブログについて</a>はこちら。</p>

おめでとうございます！これが完成したHTMLコードです

すべてのステップを統合すると、以下のHTMLファイルが完成します。あなたがこれまでの章で学んできた知識が、見事に一つの形になりましたね！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初めてのHTML：ブログ記事の書き方ガイド - 私のブログ</title>
</head>
<body>
    <header>
        <h1>私のブログ</h1>
    </header>
    <main>
        <article>
            <h1>初めてのHTML：ブログ記事の書き方ガイド</h1>
            <p>この記事では、HTMLの基本を学び、自分自身でブログ記事を作成する方法を解説します。</p>
            <p>HTMLはウェブページの骨格を作る言語です。<strong>表現の自由度</strong>が格段に向上します。</p>

            <h2>HTMLの主な利点</h2>
            <ul>
                <li>レイアウトの自由なカスタマイズ</li>
                <li>SEO（検索エンジン最適化）への貢献</li>
                <li>アクセシビリティの向上</li>
            </ul>

            <p>ウェブ技術のドキュメントを提供するMDN Web Docsでは、次のように述べられています。</p>
            <blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML">
                <p>HyperText Markup Language (HTML) は、ウェブページを作成するために用いられる標準のマークアップ言語です。</p>
            </blockquote>
            <p>この情報は <cite>MDN Web Docs</cite> から引用しました。</p>

            <h2>画像の表示</h2>
            <p>HTMLを使えば、簡単に画像をページに表示できます。</p>
            <img src="images/html-logo.png" width="150" alt="HTML5のロゴ">

            <h2>さらに学ぶには</h2>
            <p>より詳しい情報は、<a href="https://developer.mozilla.org/" target="_blank">MDNの公式サイト</a>をご覧ください。</p>
            <p><a href="about.html">このブログについて</a>はこちら。</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2024 私のブログ</p>
    </footer>
</body>
</html>

次のステップへ：CSSでデザインしよう！

今、あなたの手元には、構造的に完璧な「骨格」としてのHTMLファイルがあります。この時点では見た目がとてもシンプルですが、それで大成功です。

この骨格に美しい服を着せ、メイクを施すのが、CSS (Cascading Style Sheets) という言語の役割です。HTMLの学習を終えたあなたは、Web制作という広大な世界の、最も重要な第一歩を踏み出しました。この確かな土台があれば、CSS、そしてその先の学習もきっと乗り越えられるはずです。