前回はHTMLでCSSを読み込む方法を解説しました。
しかしまだまだHTMLファイルには見慣れない文字があるはず。
そこでこの記事ではその文字列を「要素」として見ていく方法を紹介します。
【完全無料】HTMLとCSSの学習ステップ一覧
てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。 ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...
続きを見る
ではさっそく見ていきましょう。
HTMLは要素の集まりである
今回は以下の記事で使ったHTMLファイルとCSSファイルを例に解説します。
HTMLとCSSとWEBページの関係性【理解できます】
あなたHTMLとCSSとWEBページってどんな関係性なんでしょうか? HTMLとCSSの勉強を始めるとHTMLとCSSを使ってWEBページをつくることができるというような言葉をよく見ますよね。 ...
続きを見る
まだ準備できていない方は準備しておいてください。
文字列は部分(要素)ごとに分けることができる
では解説に入っていきます。
あなたの目の前には、一見意味のわからない文字列が並んでいるHTMLファイルがありますよね?
しかし、実は要素ごとにわけることができます。
以下は今まで使ってきたindex.htmlファイルの1部です。
この部分を探してください。
<div id="title">
<ul>
<li><a href="#">DEMO1</a></li>
<li><a href="#">DEMO2</a></li>
<li><a href="#">DEMO3</a></li>
<li><a href="#">DEMO4</a></li>
</ul>
</div>
上記は以下の要素に分けることができます。
div要素<div id="title"> </div>
ul要素<ul> </ul>
li要素<li> </li>
a要素<ahref="#">DEMO1</a> <ahref="#">DEMO2</a> <ahref="#">DEMO3</a> <ahref="#">DEMO4</a>
ちなみに最初のタグを「開始タグ」、終わりのタグを「終了タグ」といいます。
<div id="title"> →開始タグ
</div> → 終了タグ
<ul>→開始タグ
</ul> → 終了タグ
いかがでしょうか?
「HTMLの文字列も色んな要素にわけることができるんだな」という認識がここまでで出来ていいればOKです。
各要素の意味一覧
HTMLで良く使われる要素とその意味を表にしてまとめていました。
HTML要素 | 意味 |
html | HTML要素であることを示す(大元の親であることを示す) |
head | メタデータの集まりであるヘッダー要素であることを表す |
body | 文書の見た目の(本体)部分を表す |
h1~h6 | 見出し。数字が大きくなるほど小さくなる。 |
p | 段落 |
div | 特定の要素をグループ化する |
form | フォーム要素 |
ul | 順不同のリストを作る要素 |
li | リストの各項目を表す |
table | テーブル要素であることを示す |
tr | テーブルの各行の要素 |
th、td | テーブルにおける見出しのセル、データセル |
b | 太文字を表す |
a | リンクを設定する |
img | 画像要素 |
※全部知りたい方はこちらを参考にどうぞ
ちなみに、今全てを暗記する必要はありません。
ただ「なんとなく意味はわかる」という状態にまずはなっておきましょう。
要素として扱えることで解説もわかりやすくなる
ということで今回は「HTMLファイルの文字列も、各パーツにわけることができて、それぞれ意味があるんだよ」という話をしました。
(今後は当サイトのHTML/CSS講座でも〇〇要素と呼んでいくので、この記事の内容は把握しておいてください)
実は今後紹介していくCSSも、HTMLの各要素を指定して装飾しています。
そのように、HTMLも要素ごとに捉えると扱いやすくなるわけです。
あなたも、ぜひHTMLを要素ごとに見ることができるようになっておきましょう。
今回は以上です。
次はHTMLのタグの書き方を解説していきます。
>>次の回:HTMLのタグの書き方【だれでもわかるように解説】
\ HTMLとCSSについて最初から学びたい方はこちら /
【完全無料】HTMLとCSSの学習ステップ一覧
てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。 ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...
続きを見る
\ Web制作の副業で今すぐ稼ぎたい方はこちら /
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る