新・HTML/CSS入門編6:注釈や細目を表す(small)

<!-- /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>
        <main>
          <article>
              <h1>マーガレットとお勉強</h1>
              <section>
                  <h2>あいさつ</h2>
                  こんにちは、霧島京子です。先日、マーガレットとプログラミングの勉強をしました。
              </section>
              <section>
                  <h2>マーガレットとしたいこと</h2>
                  <p>JavaScriptとCSSの勉強を一緒にしていけたらと思っています。</p>
              </section>
              <aside>
                  <h2>マーガレットとは</h2>
                  <p>マーガレットは私が自作したPCのことです。</p>
              </aside>
          </article>
        </main>
        <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>
        <main>
          <article>
              <h1>マーガレットとお勉強</h1>
              <section>
                  <h2>あいさつ</h2>
                  こんにちは、霧島京子です。先日、マーガレットとプログラミングの勉強をしました。
              </section>
              <section>
                  <h2>マーガレットとしたいこと</h2>
                  <p>JavaScriptとCSSの勉強を一緒にしていけたらと思っています。</p>
              </section>
              <aside>
                  <h2>マーガレットとは</h2>
                  <p>マーガレットは私が自作したPCのことです。</p>
              </aside>
          </article>
        </main>
        <footer>
            &copy;2024 Kyoko Kirishima
        </footer>
    </body>
</html>

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

演習1

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

演習課題「著作権情報を設定してみよう」

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

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

Tips

動画へ戻る

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

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

詳しい説明を読む

＃04:注釈や細目を表す(small)

このチャプターでは、ただし書きや注意を表すsmall要素について学習します。

small要素

small要素は表示上のスタイルと関係なしに、ただし書きや注意のような、注釈や小さく表示される文を表す要素です。典型的には免責事項、警告、法的制約、著作権などを取り上げる際に使われます。

他のテキストと異なることを示すため、一段階小さいフォントでテキストが表示されます。しかし、small要素はあくまでも、ただし書きや注意であるという意味を持つテキストレベルセマンティクスなので、文字を小さくするといったスタイリングのために使うものではありません。

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

今回作成したコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
    <p>本文</p>
    <footer>
        <small>&copy;2022 Paiza, Inc.</small>
    </footer>
</body>
</html>

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編6: テキストレベルセマンティクスを理解しよう > 注釈や細目を表す(small)