レベルアップHTML

【HTMLレベルアップ8本ノック 1本目】divにクラスをつける

bodyタグ内に好きなdivタグを追加し、それに好きな名前を追加してください。

HTMLタグにはclassという名前をつけることができます。今回はdivタグにclassを追加します。
classはclass="クラス名" のように書きます。

例えば、

<div>
    <h1>ブログのタイトル</h1>
    <p>ブログの本文</p>
</div>

の場合、

<div class="blog-article">
    <h1>ブログのタイトル</h1>
    <p>ブログの本文</p>
</div>

や

<div class="article">
    <h1>ブログのタイトル</h1>
    <p>ブログの本文</p>
</div>

のように、好きな名前をつけることが出来ます。
名前をつけていくことでそれぞれのパーツ（要素）がどういう役割かが分かりやすくなります。

最終更新: 2020/10/24 14:12

次のHTMLタグ全てに好きなclass属性を追加してください。

<div>
    <h1>ブログのタイトル</h1>
    <p>ブログの本文</p>
</div>

classはdivタグ以外のタグにもつけられます。
名前の付け方に決まりはないですが、後から見やすくするために分かりやすいclass（クラス属性の値といいます）をつけるのがおすすめです。

例えば、こんな感じで追加してください。

<div class="article">
    <h1 class="title">ブログのタイトル</h1>
    <p class="body">ブログの本文</p>
</div>

最終更新: 2020/10/07 17:30

bodyタグ内に好きなタイトルと好きな文章（段落）を追加し、その文章中の一部に（spanを使って）好きな名前を追加してください。

divはまとまりをつくってグループ化するときに使います。名前をつけることでどんな役割なのかが分かりやすくなります。
似たようなケースとして、文の途中など一部に名前をつけたいことがあります。
そんなときにつかうのがspanタグです。

例えば、

<div>
    <h1>ブログのタイトル</h1>
    <p>ブログの本文。by しもじま</p>
</div>

のように、本文の最後に誰が書いたかを追記したとします。
このままでも分かりますが、ここにspanタグをつけることでパーツと認識することができます。

<div>
    <h1>ブログのタイトル</h1>
    <p>ブログの本文。<span>by しもじま</span></p>
</div>

普通はここにclassを追加してより分かりやすくします。

<div>
    <h1>ブログのタイトル</h1>
    <p>ブログの本文。<span class="author">by しもじま</span></p>
</div>

divと比べると、spanは局所的な一部の名前をつけるときに使うことが多いです。

どこにpを使うか、divを使うか、spanを使うかは、これでなければならないという答えはないので、これから実際にサイトをつくりながら一緒に使いこなせるようになりましょう。

最終更新: 2020/10/07 17:44

このページのHTMLを確認してください。

最終更新: 2020/10/07 17:36

ページ全体のタイトルを追加してください。

ページ全体のタイトルはheadタグ内に書きます。
titleタグを使って

<head>
  <title>HTMLレベルアップ</title>
</head>

のように書きます。
これはブラウザのタブなどに表示されます。

最終更新: 2020/10/24 14:11

次のhtmlにidを使って好きな名前を追加してください。

<h1>HTML レベルアップノック</h1>

idはclassとほとんど同じです。
例えば、このように書きます。

<h1 id=“title”>HTML レベルアップノック</h1>

ここで名称を整理しておきます。
classはclass属性といいます。そしてそこに入力する名前と呼んでいた部分を、そのclass属性の値といいます。
idも同じように、id属性といいます。その名前の部分を、id属性の値といいます。

idとclassはほとんど同じなのですが、もちろん違いがあります。
それは、id属性の値は1つのHTMLページに対して1回だけということです。
それに対してclass属性の値は繰り返し使うことができます。

最終更新: 2020/10/24 14:11

好きなサイトのHTMLを書いてスクリーンショットをコメントに送ってください。
CSSを書かないと同じサイトをつくることは出来ませんが、どんな風にHTMLを書いているのか、divを使ってるかspanを使ってるか、などを考えるだけでとても勉強になり、実践力につながります！

最終更新: 2020/10/07 17:39