新・HTML/CSS入門編5:メインコンテンツ

<!-- /var/www/html/index.html -->
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <header>
            <nav>
                <h1>最近の投稿</h1>
                <ul>
                    <li><a href="#">ホーム</a></li>
                    <li><a href="#">プログラミング</a></li>
                    <li><a href="#">プロフィール</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <h1>マーガレットとお勉強</h1>
            <section>
                <h2>あいさつ</h2>
                こんにちは、霧島京子です。先日、マーガレットとプログラミングの勉強をしました。
            </section>
            <section>
                <h2>マーガレットとしたいこと</h2>
                <p>JavaScriptとCSSの勉強を一緒にしていけたらと思っています。</p>
            </section>
            <aside>
                <h2>マーガレットとは</h2>
                <p>マーガレットは私が自作したPCのことです。</p>
            </aside>
        </article>
        <footer>
            &copy;2024 Kyoko Kirishima
        </footer>
    </body>
</html>

<!-- /var/www/html/index.html -->
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <header>
            <nav>
                <h1>最近の投稿</h1>
                <ul>
                    <li><a href="#">ホーム</a></li>
                    <li><a href="#">プログラミング</a></li>
                    <li><a href="#">プロフィール</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <h1>マーガレットとお勉強</h1>
            <section>
                <h2>あいさつ</h2>
                こんにちは、霧島京子です。先日、マーガレットとプログラミングの勉強をしました。
            </section>
            <section>
                <h2>マーガレットとしたいこと</h2>
                <p>JavaScriptとCSSの勉強を一緒にしていけたらと思っています。</p>
            </section>
            <aside>
                <h2>マーガレットとは</h2>
                <p>マーガレットは私が自作したPCのことです。</p>
            </aside>
        </article>
        <footer>
            &copy;2024 Kyoko Kirishima
        </footer>
    </body>
</html>

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

演習1

問題ログインすると模範解答や入力を見ることができます

演習課題「メインコンテンツを設定してみよう」

現在、1つ前のレッスンで作成したブログを表示しています。
ブログのメインコンテンツであるarticle要素の内容をメインコンテンツとして設定するため、mainタグで囲むよう変更して下さい。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃07:メインコンテンツ

このチャプターでは、メインコンテンツとそれを表すmain(メイン)要素について学習します。

main要素

main要素は文書のメインコンテンツを表す要素です。前のレッスンで学習したセクショニングコンテンツと似たような役割を持っていますが、実際はセクショニングコンテンツではありません。

また、1つの文書はmain要素を複数持つことができません。

MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/main

今回作成したコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <header>
        <nav>
            <h1>最近の記事</h1>
            <ul>
                <li>C言語でレベルアップ問題集を解いてみた</li>
                <li>Python3入門編の講座を受けてみた</li>
                <li>オススメのラーメン屋を紹介する</li>
                <li>スキルチェックに挑戦してみた</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h1>ブログはじめました</h1>
            <section>
                <h2>あいさつ</h2>
                <p>こんにちは、paiza太郎です。あいさつブログを開設しました。</p>
            <section>
            <section>
                <h2>今後の目標</h2>
                <p>C言語とHTMLをマスターしたいです。</p>
            </section>
            <aside>
                <h2>用語解説</h2>
                HTMLは「HyperText Markup Language」の略でマークアップ言語の1つです。
            </aside>
        </article>
    </main>
    <footer>
        &copy;2022 Paiza, Inc.
    </footer>
</body>
</html>

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編5: グルーピングコンテンツ > メインコンテンツ