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

この記事の目的

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

divタグとspanタグとは

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

2つの違い

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>タグがわからない方は以下の記事をお読みください。

タグごとにCSSを設定したいときは?

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

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

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