<span>と<div>の使い方

<div>と<span>を使い分ける

<div>と<span>の違い

<span>と<div>の使い方

<div>と<span>タグはそっくりのタグで、それ自身では何の意味も持たない、ただ単に範囲を示すタグです。
違うところと言えば、<div>は、前後に改行が入り、<span>には改行が入りません。この二つのタグはstyle属性を使ったり、クラスやIDでスタイルを設定させて、始めて意味性を持たせることによって、<div><span>で囲まれた範囲にデザインが適用されます。

もう少し簡単に言えば、
<div>と</div>に囲まれた範囲のデザインをこのようにしなさい、
<span>と</span>に囲まれた範囲のデザインをこのようにしなさい、
という命令をクラスやIDを使って、スタイルシートに記述したり、<div><span>タグに直接記述したりして、設定します。

<div>は、前後に改行が入るので段落・さらに大きな範囲・ページ毎などの設定に、<span>は改行が入らないので文や単語（センテンス・ワード）の設定
と、覚えておきましょう。

<span>の使い方

例えば、文字色を変えたり、背景色をつける場合

下記のように文章の文字色を変えたり、文字に背景色をつけたりする場合<span>にスタイルを設定して表示させます。

サンプル文章↓↓

奇跡が必要なら、起こすつもりだ。この世の誰もが生まれてくるときに、親や家柄を選ぶことはできない。俺たちが選べるのはたった一つ今日をどのように生きるか。それだけだ。

<span>に直接スタイルを記述する

奇跡が必要なら、<span style="color:#cc3333">起こすつもりだ。</span>この世の誰もが生まれてくるときに、親や家柄を<span style="color:#ffffff; background:#999999">選ぶことはできない。</span>俺たちが選べるのはたった一つ<span style="color:#3366ff">今日をどのように生きるか。</span>それだけだ。

スタイルシートにクラス名で記述

<head>と</head>の間に下記のタグを入れます。
任意のクラス名でスタイルを記述します。
　→　htmlでspanに囲まれた文字のスタイルが変化します。

<style type="text/css">

</style>

html　↓↓

奇跡が必要なら、<span class="red">起こすつもりだ。</span>この世の誰もが生まれてくるときに、親や家柄を<span class="grey">選ぶことはできない。</span>俺たちが選べるのはたった一つ<span class:"blue">今日をどのように生きるか。</span>それだけだ。

<div>の使い方

<div>は「class」「ID」ととっても仲よしです。
<div>の設定はclass、IDを使ってスタイルシートに記述するのがとても楽です。
<span>と違って、大きな塊ごとデザインできるので、スタイルシートに記述すれば、デザインやレイアウトを変えたりするのがとても楽にできます。
最初のサンプルの例をさらに<div>で囲ってアレンジしてみます。

サンプル文章↓↓　先ほど、<span>を使って一部の文字色を変えたサンプル文章を、さらにこのように表示されるように<div>を使って設定するには？

奇跡が必要なら、起こすつもりだ。この世の誰もが生まれてくるときに、親や家柄を選ぶことはできない。俺たちが選べるのはたった一つ今日をどのように生きるか。それだけだ。

サンプル文章全体を点線で囲み、行間を200%に、枠線からは適当な距離を作ります。

<head>と</head>の間に下記のタグを入れます。
任意のクラス名でスタイルを記述します。

<style type="text/css">

</style>

html　↓↓

<div class="waku">奇跡が必要なら、<span class="red">起こすつもりだ。</span>この世の誰もが生まれてくるときに、親や家柄を<span class="grey">選ぶことはできない。</span>俺たちが選べるのはたった一つ<span class:"blue">今日をどのように生きるか。</span>それだけだ。</div>

<div>も<span>も意味を持たないなんて、ちょっとかわいそうな言われ方ですよね。このタグがなければ、スタイルやレイアウトを設定する時に「ここからここまでだよ」って囲ってあげられないのですから・・・範囲の始めと終わりを示す大事なタグです。

<div>と<span>

css
java
home