HTML入門編（６）（最強タグ div と span）

---

---

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！

第６回では、最強タグ <div> と <span> が何故に最強か？を具体的なサンプルを使いながら解説します。

最強タグ div と span とは

「<b> で太字にする」、「<center> でセンタリングする」などの特殊能力を持つ 「HTMLタグ」がありますが、<div> タグと、<span> タグは何も特殊能力を持ちません。

何も特殊能力を持たない <div> と <span> タグが「HTMLタグ」の中で実は最強のタグなのです。

何も持たないことが最も持っている不思議

……禅問答ですね。

■ <div> と <span> タグの使い方

〇　<div> の使い方

<div> タグは、<div> ～ </div> で囲まれた範囲を、「ひとくくりの情報（ブロック）」として定義するタグです。ブロックの前後で改行します。

次のサンプルを使います。

こちらを表示すると、■～■の前後で改行して表示します。それ以外の見た目上の変化はありません。

〇　<span> の使い方

<span> タグは、<span> ～ <span> で囲まれた範囲を、「ひとくくりの情報（ブロック）」として定義するタグです。ブロックの終わりで改行しません。

次のサンプルを使います。

こちらを表示すると、▲～▲の前後で改行しません。つまり、見た目上の変化は何もありません。

<div> と <span> が最強の理由

<div> と <span> は、何も特殊能力が無いことが、最も優れた能力なのです。これが最強の理由を解説します。

■ 装飾は style 属性で指定できる

「<b> 太字にする」や、「<center> センタリングする」などの装飾は、すべて style 属性で指定できます。

<div> や <span> も同じく、style 属性が使えます。

〇　Style 属性を使う（１）【style 属性で太字にする】

次のサンプルを使います。

"font-weight:bold;" で、「フォント（文字）のスタイルを 太字 にしてね！」と指定しています。

こちらを表示すると、■～■、▲～▲の間が太字になります。

〇　Style 属性を使う（２）【style 属性でセンタリングにする】

次のサンプルを使います。

"text-align: center;" で、「センタリングしてね」と指定しています。

こちらを表示すると、■～■の間をセンタリングします。

〇　Style 属性を使う（３）【style 属性で蛍光下線マーカーを引いてみる】

次のサンプルを使います。

"background: linear-gradient(transparent 70%, #ffd7f7 30%);" で、「蛍光下線マーカー」を指定しています。

こちらを表示すると、▲～▲の間に蛍光下線マーカーを引きます。

background プロパティ（項目）は、「指定した範囲の後ろをどうするの？」と指定する名前です。

linear-gradient(transparent 70%, #ffd7f7 30%) が少し難しい表現ですが、「linear-gradient() で「グラデーションしてね」と指定しており、上70%を transparent（透明）に、下30%をカラーコード（#ffd7f7）ピンクにしてね」と指定しています。

はい、これ、難しいですね！覚えなくて問題ありまっせん！

蛍光下線マーカーを使いたいときは、上記サンプルをそのままコピーすれば使えますので！

〇　Style 属性を使う（４）【枠線を引いてみる】

次のサンプルを使います。

"border: 2px solid red;" で、「枠線を 2ピクセルで直線で赤色で引いてね」と指定しています。

こちらを表示すると、▲～▲の間に枠線を引きます。

■ <div> や <span> が最強の理由

上記のとおり、<b> や <center> そのほかで指定できる特殊な装飾は、style 属性で指定することができます。

style 属性を使うと、単純な「HTMLタグ」では指定できない（蛍光下線マーカーのような ）凝った表現をすることができるので、装飾（見た目）については、style 属性の利用がより有効です。

style 属性を利用することで、まるで白地のキャンパスに絵を描いていくかのように使えることが、何もしない「HTMLタグ」である、<div> と <span> が最強のタグである理由です。

まとめ

記事の装飾では、「HTMLタグ」の <b> （太字）や、<center> （センタリング）などの特殊能力を持つタグはあまり使いません。

装飾では、<div> または <style> で範囲を指定し、style 属性で、色や形、フォントなどを指定して利用します。

ド　 レ　 ミ　 ファ ソ　 ラ　 シ　 ド　

↑　応用すると、こんなことも簡単にできます。

■　次の記事に進む

HTML入門編（７）（最強の技 class を使う）

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！第７回では、class 属性を使って style 属性を共用する方法を解説します。

続きを見る

■　最初から読む

HTML入門編（１）（WordPress で HTML を使ってみよう！）

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か？」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

続きを見る

「WordPress で HTML / CSS を使う」一覧はこちらをクリック！

 

Presented By Boon Boon Blog .Com