HTML ブロック

HTMLタグはブロックレベル要素の性質、もしくはインライン要素の性質のどちらかを持っています。

ブロックレベル要素とは

ブロックレベル要素は、一つのかたまりとして扱われることが多く、ブラウザでは前後に改行が入ります。

例： <h1>、<p>、<ul>、<table>

インライン要素とは

インライン要素は改行せずに表示されます。

例： <b>、<td>、<a>、<img>

今の段階はこの区別がわかればいいです。

divタグ

divタグは、単体で意味を持たないタグですが、タグで囲った部分をブロックレベル要素としてグループ化することができるタグです。

グループ化することで指定した範囲にスタイルシートを適用したりすることができます。

もう一つの用途はレイアウトを整えることです。次の章で詳しく説明します。

サンプルコード

<div align="center">
この属性で文章の位置を調整することができます。<br>
これは中央寄りです。
</div>

<div align="left">
この属性で文章の位置を調整することができます。<br>
これは左寄りです。
</div>

<div align="right">
この属性で文章の位置を調整することができます。<br>
これは右寄りです。
</div>

表示例

spanタグ

spanもタグ自体には意味がありません。

divタグと似ていますが、divタグがブロックレベル要素であるのに対し、spanタグはインライン要素です。

スタイル付けのために要素をグループ化する用途で使用することができます。文章の一部の装飾によく使います。

サンプルコード

<p>この部分が<span style="color:red">赤色</span>で表示されます。</p>

<p><span style="background: pink;">
    <a href="https://codinghaku.com/" target="_blank">https://codinghaku</a>
</span>.com/</p>

表示例

この部分が赤色で表示されます。

https://codinghaku .com/