WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！
第６回では、最強タグ <div> と <span> が何故に最強か？を具体的なサンプルを使いながら解説します。
目次
最強タグ div と span とは
「<b> で太字にする」、「<center> でセンタリングする」などの特殊能力を持つ 「HTMLタグ」がありますが、<div> タグと、<span> タグは何も特殊能力を持ちません。
何も特殊能力を持たない <div> と <span> タグが「HTMLタグ」の中で実は最強のタグなのです。
何も持たないことが最も持っている不思議
……禅問答ですね。
■ <div> と <span> タグの使い方
〇 <div> の使い方
<div> タグは、<div> ～ </div> で囲まれた範囲を、「ひとくくりの情報（ブロック）」として定義するタグです。ブロックの前後で改行します。
次のサンプルを使います。
こんにちは、<div>■ここが div の範囲です■</div> こんばんは。
こちらを表示すると、■～■の前後で改行して表示します。それ以外の見た目上の変化はありません。
ポイント
こんにちは、
〇 <span> の使い方
<span> タグは、<span> ～ <span> で囲まれた範囲を、「ひとくくりの情報（ブロック）」として定義するタグです。ブロックの終わりで改行しません。
次のサンプルを使います。
こんにちは、<span>■ここが span の範囲です■</span> こんばんは。
こちらを表示すると、▲～▲の前後で改行しません。つまり、見た目上の変化は何もありません。
ポイント
こんにちは、▲ここが span の範囲です▲ こんばんは。
<div> と <span> が最強の理由
<div> と <span> は、何も特殊能力が無いことが、最も優れた能力なのです。これが最強の理由を解説します。
■ 装飾は style 属性で指定できる
「<b> 太字にする」や、「<center> センタリングする」などの装飾は、すべて style 属性で指定できます。
<div> や <span> も同じく、style 属性が使えます。
〇 Style 属性を使う（１）【style 属性で太字にする】
次のサンプルを使います。
こんにちは、<div style="font-weight:bold;">■ここが div の範囲です■</div> こんばんは。
<br>
<br>
こんにちは、<span style="font-weight:bold;">▲ここが span の範囲です▲</span> こんばんは。
"font-weight:bold;" で、「フォント（文字）のスタイルを 太字 にしてね！」と指定しています。
こちらを表示すると、■～■、▲～▲の間が太字になります。
ポイント
こんにちは、
こんにちは、▲ここが span の範囲です▲ こんばんは。
〇 Style 属性を使う（２）【style 属性でセンタリングにする】
次のサンプルを使います。
こんにちは、<div style="text-align: center;">■ここが div の範囲です■</div> こんばんは。
"text-align: center;" で、「センタリングしてね」と指定しています。
こちらを表示すると、■～■の間をセンタリングします。
ポイント
こんにちは、
〇 Style 属性を使う（３）【style 属性で蛍光下線マーカーを引いてみる】
次のサンプルを使います。
こんにちは、<span style="background: linear-gradient(transparent 70%, #ffd7f7 30%);">▲ここが span の範囲です▲</span> こんばんは。
"background: linear-gradient(transparent 70%, #ffd7f7 30%);" で、「蛍光下線マーカー」を指定しています。
こちらを表示すると、▲～▲の間に蛍光下線マーカーを引きます。
ポイント
こんにちは、▲ここが span の範囲です▲ こんばんは。
background プロパティ（項目）は、「指定した範囲の後ろをどうするの？」と指定する名前です。
linear-gradient(transparent 70%, #ffd7f7 30%) が少し難しい表現ですが、「linear-gradient() で「グラデーションしてね」と指定しており、上70%を transparent（透明）に、下30%をカラーコード（#ffd7f7）ピンクにしてね」と指定しています。
はい、これ、難しいですね！覚えなくて問題ありまっせん！
蛍光下線マーカーを使いたいときは、上記サンプルをそのままコピーすれば使えますので！
ポイント
HTML の学習では、細かい書き方や名前は覚える必要はありません。
「何ができるか」だけ覚えてください。あとは、使いたいときに、タグや細かい書き方をサンプルからコピーするだけです。
〇 Style 属性を使う（４）【枠線を引いてみる】
次のサンプルを使います。
こんにちは、<span style="border: 2px solid red;">▲ここが span の範囲です▲</span> こんばんは。
"border: 2px solid red;" で、「枠線を 2ピクセルで直線で赤色で引いてね」と指定しています。
こちらを表示すると、▲～▲の間に枠線を引きます。
ポイント
こんにちは、▲ここが span の範囲です▲ こんばんは。
■ <div> や <span> が最強の理由
上記のとおり、<b> や <center> そのほかで指定できる特殊な装飾は、style 属性で指定することができます。
style 属性を使うと、単純な「HTMLタグ」では指定できない（蛍光下線マーカーのような ）凝った表現をすることができるので、装飾（見た目）については、style 属性の利用がより有効です。
ポイント
装飾を style 属性が行いますので、何か特殊なことをする「HTMLタグ」はもはや邪魔者以外の何物でもなく、何もしない範囲だけ指定できる <div> や <span> タグが非常に使い勝手が良くなります。
style 属性を利用することで、まるで白地のキャンパスに絵を描いていくかのように使えることが、何もしない「HTMLタグ」である、<div> と <span> が最強のタグである理由です。
まとめ
記事の装飾では、「HTMLタグ」の <b> （太字）や、<center> （センタリング）などの特殊能力を持つタグはあまり使いません。
装飾では、<div> または <style> で範囲を指定し、style 属性で、色や形、フォントなどを指定して利用します。
ド レ ミ ファ ソ ラ シ ド
↑ 応用すると、こんなことも簡単にできます。
■ 次の記事に進む
-
-
HTML入門編（７）（最強の技 class を使う）
WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！第７回では、class 属性を使って style 属性を共用する方法を解説します。
続きを見る
■ 最初から読む
-
-
HTML入門編（１）（WordPress で HTML を使ってみよう！）
WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か？」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。
続きを見る
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。
