【HTML】divタグとspanタグの使い方と違い:初心者向けに解説

HTMLのdivタグとspanタグの使い方と違いをゼロからわかるように解説していきます。

この記事の目的

ブログサービスやWordPressなどのCMSを使って構築しているブログやWEBメディアの記事やページを作成する際に必要なhtmlの知識を身に着ける。

divタグとspanタグとは

cssを定義して装飾したいときに使用するタグです。使用する前にスタイルシート(CSSファイル)にデザインを記述しておく必要があります。

divタグ	前後に改行が入る。
spanタグ	前後に改行が入らない。

divタグ	背景色の設定,線で囲む(ボックスレイアウト)など
spanタグ	文字単位でデザインを変える場合(色や大きさ等)など

書き方


<div class="クラス名">
<p><span class="クラス名">「文章」</span></p>
</div>


<div class="box11">
<p><span class="danger-bold">ブログ向けHTML講座</span></p>
</div>

ブログ記事に使うHTMLを一通り学ぶならブログ向けHTML講座

解説

上の場合、背景をdivタグで定義し、文字色は改行が入らないspanタグで定義しています。

<p>タグがわからない方は以下の記事をお読みください。

<h>タグや<p>タグなどのHTMLタグごとにCSSを設定したいときはclassまたはidを使用し、以下のように記述します。


<h3 class="クラス名"></h3>
<h3 id="クラス名"></h3>

こちらのやり方は以下の記事で解説しているのでこちらをお読みください。