【HTML CSS 独学2】 基礎を固めて高く積み上げ！ 「タグ ＆ class編 」 個人投資家のFIREへの旅路 第199夜
HTML CSS独学の第２回です。
前回はこちらでHTMLタグについて書きました。
今回も、タグについてですが、前回のものとは少し違います。
<body></body>タグ内で使用し、WEBサイトを形作っていくためのタグになります。
【タグとは】
タグについて、もう一度振り返ります。
タグで囲むことによって、その囲んだ中身が、何なのかを
ブラウザやコンピュータに認識させることができます。
人間で言えば、
apple という文字だけでは、
食べ物のリンゴのことなのか
iPhoneのappleのことなのか
明確に判断はできません。
そこで、
<食べ物> apple </食べ物>
という形で、タグで囲むと、
このappleは食べ物のリンゴのことだと認識できますね。
これと、同じことを、ブラウザやコンピューターが認識できるようにタグをつけていく作業が、HTMLにおけるコーディングになります。
つまり、
タグとは、要素を定義するためのツールになります。
そのタグには、さまざまな種類がありますが、
使用してく中で、自然と覚えてしまいますので、ご安心ください！
では、どのようなタグがあるのか見ていきましょう！
【div タグ】 ディブタグ
divタグ：
・要素をグループ化するときに使うタグ。
・「divided」＝「分けられた、分かれた」が語源となる。
・<div> </div>で囲んだ要素がグループ化される。
<div>
<P>おはようございます！！</p>
<p>今日も頑張りましょう！</p>
</div>このように書くと、
<P>おはようございます！！</p>
<p>今日も頑張りましょう！</p>
この２つの要素が一塊のグループと認識されます。
後で解説しますが、
<p> </p>タグは、文章などを書くときに使うタグです。
【class】 クラス
class属性：
・divタグにつける属性（名前）
・複数のdivタグを区別するために使う
・命名は自由、グループ化した中身を表す英単語が望ましい
・CSSでこのclass名を指定して、そのclass名を持つグループだけに、CSSの効果が反映されるようにするなどの目的で、class属性を付ける。
＜class用法 グループに名前をつける＞
divタグで囲むとグループ化して、そのグループに名前をつけることができます。
これが、class です。
例えば、こんな感じです。
<div class="message">
<p>おはようございます！！</p>
<p>今日も頑張りましょう！</p>
</div>先程のdivタグに、"message"というclass名を付けました。
命名は自由ですが、誰が見てもわかりやすく、英単語であることが望ましいです。
＜class用法 グループに区別する＞
WEBサイトを構成するために、複数のdivタグを使い、グループ化してくことになりますので、そのグループを区別するためにも、使用します。
<div class="message">
<P¥p>おはようございます！！</p>
<p>今日も頑張りましょう！</p>
</div>
<div class="message2">
<p>こんばんは！！</p>
<p>今日もおつかれさまでした！</p>
</div>このように、２つ目のグループには、"message2"というclass名をつけて、"message"と区別します。
＜class用法 グループごとにCSSを指定する＞
別の回で解説しますが、CSSを使って、HTMLで書いたWEBサイトの基本要素に、装飾をすることができます。
例えば、文字の色を変えたり、文字のサイズを変えたりです。
"message"のグループの文字は赤にしたい
"message2"のグループの文字は青にしたい
この場合には、こう書きます！
HTML
<div class="message">
<p>おはようございます！！</p>
<p>今日も頑張りましょう！</p>
</div>
<div class="message2">
<p>こんばんは！！</p>
<p>今日もおつかれさまでした！</p>
</div>CSS
.massage p {
color: red;
}
.message2 p {
color: blue;
}
このように、CSSでは、どのグループに装飾するかを指定できます。
.message p というのは、
"message"というclass名のグループの<p>タグを指定しています。
そして、{ } 内の装飾をするという意味です。
つまり、
.massage p {
color: red;
}
の意味は、
"message"というclass名のグループの<p>タグのcolorをredにする。
CSSで、classを指定する場合は、class名の先頭にドットをつけます。
class名が、"message"の場合は、「.message」と書きます。
CSSについては、次回以降に詳しく解説します！
楽しいですよ〜！！
【WEBサイトの構成】
WEBサイトには基本的な型があります。
上から順に行くと、
ヘッダー部分
ナビ部分
メインコンテンツ部分
メインコンテンツの中身
フッター部分
大まかに言えば、このような形です。
この一般的な構成を作るにあたり、先程紹介した、class名で区別をしてくと、
<div class="header">
<div class="navi">
<div class="main">
<div class="main-content1">
<div class="main-content2">
<div class="footer">
このように書いて、区別することができます。
しかし、もっと良い書き方があるので、そちらを知っておく方が良いです。
【headerタグ】 ヘッダータグ
<header> </header>このように書きます。
めちゃめちゃ簡単でわかりやすいですね。
header部分は、headerというタグを使います。
ちなみに、CSSで指定する場合は、header { } と書けば、<header>部分を指定できます。classの時のようにドットは必要ありません。
【navタグ】 ナブタグ
WEBサイトの上部にある、ナビゲーションメニュを区別するためのタグです。
このように、WEBサイトの各ページへのリングが貼ってある場所ですね。
この場合のナビゲーションメニュの見た目を作るコードはこうなります
<nav>
<ul>
<li>TOP</li>
<li>Stock Investment</li>
<li>Movie Review</li>
<li>Web Design</li>
<li>Concept</li>
<li>Contact</li>
</ul>
</nav>ここに、リンク先へ移動させるための、aタグというものを追記する必要がありますが、今は割愛します。
<ul> </ul>というタグは、メニュのような「リスト」を作るタグです。
<li></li>は、<ul>の中のリストの項目につけるタグです。
こちらは基本的にはこの形で毎回使用するので、そのうち覚えちゃいますので、よく分からなくても問題なし！です。
このHTMLのに対して、CSSで装飾して、画像のような、横並びのメニュができます。
【mainタグ】 メインタグ
<main> </main>WEBサイトのメインコンテンツのブロックに使用します。
<main> </main>で囲った中身が、そのWEBサイトのメインコンテンツになります。
なので、先に紹介した、header、navなどの要素は、mainの中に入れてはいけません。
このように書くことは間違いです。
間違い例
<main>
<header> </header>
<nav>
<ul>
<li>TOP</li>
<li>Stock Investment</li>
<li>Movie Review</li>
<li>Web Design</li>
<li>Concept</li>
<li>Contact</li>
</ul>
</nav>
</main>mainタグの中には、その名の通り、メインとなる要素を入れる必要があります。
正解例
<header> </header>
<nav>
<ul>
<li>TOP</li>
<li>Stock Investment</li>
<li>Movie Review</li>
<li>Web Design</li>
<li>Concept</li>
<li>Contact</li>
</ul>
</nav>
<main>
</main>では、
mainの中に入れる、タグを見ていきましょう
【articleタグ】 アーティクルタグ
<article> </article>単独で成り立つコンテンツのブロックを定義します。
そのブロックだけで完結できる必要があります。
これ、よくわからないですよね〜。
例えば、ブログサイトであれば、個別記事が、article要素になります。
確かし、ブログの記事のページだけを読んでも、そのページだけで、完結していますね。
このような、箇所をグループ化するのが、
articleタグです。
【asideタグ】 アサイドタグ
<aside> </aside> メインコンテンツと、間接的な関係にある箇所に使用する。
サイドバーなどに使用することが多い。
ココがサイドバーですね。
このグループを作るときは、このように書きます。
【sectionタグ】 セクションタグ
<section> </section>articleタグと同じような使い方です。
しかしsectionタグは、区分けするだけと考えましょう。
sectionタグを使用する場合、必ずh1～h6といった見出しタグをセットで使用することがルールになっています。
この見出しタグは、
ここが見出しであると、ブラウザに理解させるためのタグです。
SEO上も重要になります。
sectionタグの具体的な使用方は、
<article>
<h1>カレーの作り方</h1>
<section>
<h2>野菜をカットする</h2>
<p>〜</p>
</section>
<section>
<h2>野菜を炒める</h2>
<p>〜</p>
</section>
</article>こんな感じですね。
articleタグで囲っている箇所は、「カレーの作り方」というブログの記事全体です。
その記事の中で、sectionが２つあります。
一つ目のsectionでは、「野菜をカットする」
二つ目のsectionでは、「野菜を炒める」
という内容が、書かれています。
つまり、
ブログ記事全体が、articleタグで、その中の、小単位のブロックがsectionとなります。
【footerタグ】 フッタータグ
<footer> </footer>文字通り、フッター部分を定義するタグです。
WEBサイトの下の部分です。
このように、フッターにナビゲーションがついていたりします。
【HTML CSS 独学 タグ・class 編まとめ】
今回紹介したタグを簡略してまとめます。
divタグ ：要素をグループ化する
headerタグ：ヘッダーを定義する
navタグ ：ナビメニュを定義する
mainタグ ：メインコンテンツを定義する
articleタグ ：単独の記事などを定義する
asideタグ ：サイドバーなどを定義する
sectionタグ ：区分けされた箇所を定義する
これらの、タグでグループ化をして、
そのグループに名前をつけることができます。
class属性：要素に名前をつける
CSSで、classを指定することで、そのclassのみに、装飾をしたり、文字の色変えたりと、個別にCSSを効かせるということが可能になります。
今回は、このように、
WEBページを構成していく大きなグループ、ブロックを定義するタグを紹介しました。
このタグを使って、大きなグループを作り、
その中身を、作っていくことで、WEBサイトが構成されていきます。
次回は、
さらに細かい要素を定義するタグを解説します！！
わからなければ調べる！
覚える必要はありませんよ！
自分で調べるて答えを見つける力が最重要です。
この記事が気に入ったらサポートをしてみませんか？