HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

  1. ホーム
  2. HTML・CSS
  3. 基礎6. 要素の種類と記述のポイント

基礎6. 要素の種類と記述のポイント

      2019/04/29   hatano

ブロックレベルの要素とインラインの要素

タグは初期値でブロックレベルの要素とインラインの要素に分けることができます。実際には他にも種類はありますが、まずはこの2種類を理解してみましょう。

※CSSで種類は変更することもできます。これは初級27で解説していきます。

この2つの要素の特徴として

ブロックレベルの要素は次の要素が折り返して表示される。

インラインの要素は次の要素が横に並びます。

  • 初期値がブロックレベルの要素の一例…h1〜h6, p, div, ul, ol
  • 初期値がインラインの要素の一例…img, a, span

では実際に入力して表示して確認してみましょう。

下記のbase-html01.zipをダウンロードしてindex.htmlのbodyタグ内に記述してみましょう。

base-html01.zip

まずは、ブロックレベルの要素です。 


<body>
	<h1>見出し1</h1>
	<h2>見出し2</h2>
	<p>段落テキスト</p>
	<p>段落テキスト</p>
</body>

次にインラインの要素を確認してみましょう。 


<body>
	<a href="index.html">リンク</a>
	<a href="index.html">リンク</a>
</body>

タグの入れ子（ネスト）

タグの中にタグを記述することを「入れ子（ネスト）」と言います。入れ子にはルールがあります。インラインの要素内にインラインの要素を入れ子にできますが、ブロックレベルの要素は入れ子にできません。ブロックレベルの要素はブロックレベルの要素、インラインの要素のどちらでも入れ子にできます。ただし、このルールに当てはまらない要素もあります。種類は各要素の章で1つ1つ紹介していきます。

正しい入れ子

div, h1, pタグは、すべてブロックレベルの要素です。


<div>
<h1><a href="index.html">見出し1</a></h1>
	<p>段落のテキストです</p>
</div>

ソースコード内のインデント処理

今までのソースコードを見ると、文字が字下げ（インデント）されているところがあったことに気づいたでしょうか。

タグのインデント

インデント処理は入れ子の構造を分かりやすくするために入れています。開始タグと終了タグが範囲がどこまであるのか。また入れ子が何階層あるのかがひと目でわかります。

下記の2つのソースコードは、ブラウザの表示結果は同じです。構造がわかりやすいのは、どちらかは分かりますよね。 


<body>
<div>
<h1>見出し1</h1>
<p>段落のテキストです</p>
</div>
</body>



<body>
	<div>
		<h1>見出し1</h1>
		<p>段落のテキストです</p>
	</div>
</body>

HTMLやCSSの編集は複数の人がかかわることが考えられます。自分だけでなく、ほかの人が見ても構造がわかりやすいソースコードにすることが重要です。インデントに使用する文字は、入れ子1階層ごとに、半角スペース2個またはタブ文字を利用するケースが制作現場では多くみられます。タブ文字はキーボード左上のあたりにある「Tab」というキーで入力ができます。インデントに使用した半角スペースまたはタブ文字ブラウザの表示には反映されません。

注意点は半角スペース、タブ文字はいくつ記述しても問題ありませんが全角スペースはブラウザがHTMLを正しく解析できなくなり表示が崩れる原因になりますので注意してください。

間違ったスペースの入れ方

ソースコード内の改行

ソースコード内の開始タグの前、終了タグの後ろに改行を入れて構造を分かりやすくしましょう。ソースコード内の改行はブラウザの表示に反映されません。ただしタグで囲んだテキストまたはインライン要素を改行すると、ブラウザは表示のときに半角スペース分の空きをいれてしまいます。タグ内のテキストまたはインラインの要素は改行させないようにしておきましょう。

下記は改行しない場合とした場合のソースコードです。ブラウザの表示に違いはありません。 


<body><div><h1>見出し1</h1><p>段落ですあああああああああああああああああああああああ</p></div></body>



<body>
	<div>
		<h1>見出し1</h1>
		<p>段落ですあああああああああああああああああああああああ</p>
	</div>
</body>

HTMLのコメント

HTMLのソースコード上で下記の記号で囲むと、コメント扱いになります。

HTMLのコメントの書き方

コメントはブラウザで表示されません。コメントはソースコード上にメモを残したり、一時的にソースコードを表示させたくない場合に利用します。下記のソースコードはコメントした状態です。ブラウザには表示されません。 


<body>
	<!-- コメントです -->
	<!-- <p>タグもコメントできます</p> -->
	<!--
		<p>複数行のコメントもできます</p>
		<p>複数行のコメントもできます</p>
	-->
</body>

練習問題

下記をクリックしてダウンロードして解凍してください。

index.html内のbodyタグ内のソースコードにインデントと改行をしてみましょう。

完成品は、compフォルダに用意してあります。

indent.zip

まとめ

  • 要素には初期値で、ブロックレベル、インラインという種類がある
  • ブロックレベルの要素は、次の要素が折り返す
  • インラインの要素は、次の要素が横に並ぶ
  • タグは入れ子にできる
  • 入れ子ごとにインデント処理をしてソースコードは見やすくする
  • コメント処理をしたソースコードはブラウザに表示されない

関連記事