webデザイン独学【無料】装飾に便利なspanタグ。

装飾に便利なspanタグ！｜WEBデザイナー独学

これまで紹介したHTMLタグにはそれぞれ役割があり意味を持っています。しかし中には意味を持たないHTMLタグの要素も存在します。その一つがspan（スパン）タグです。このspanタグには意味を何も持ち合わせていません。どちらかというとCSSの装飾のために存在するタグです。ここではそのspan（スパン）タグの使い方について説明します。

こんにちは！あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を２年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。

もくじ


webデザイン独学【無料】装飾に便利なspanタグ。

spanタグはスタイルのため？どういうことだろう…

あーる君コアラ

これまでのHTMLタグには意味を持ち合わせていたわよね！

あーる子コアラ

span（スパン）タグの使い方

冒頭で述べたように、spanタグというHTMLには意味を持ち合わせていません。ではどのようにspanタグを使うのか紹介していきます。ここでこのブログでもよく使用している３パターンを紹介します。

文章中の文字に色をつけて強調したい。

以前「重要」なワードを強調するタグとしてstrongタグを紹介しました。strongタグで囲むことで視覚的にも強調されます。更にstrongタグにCSSを適用することで色や太さを変更することもできます。

しかしstrongタグにはspanタグと違い大切な意味を持ち合わせています。それはページ内で重要なワードに対してstrongタグは利用するという意味を持っています。

言い換えるとGoogleのロボットにアピールするような意味も兼ね備えています。そのためstrongタグを乱用することはおすすめできない！ということを紹介しました。詳しくはHTML（lesson11）を閲覧してください。

HTML（lesson11）はこちら

ホームページの文章で「重要」なワードを強調するタグ！

そこで都合よく使えるのがspanタグです。何度使ってもデメリットが無いため乱用もできます。例えば文章のある箇所にだけ色を変えたい場合は以下のようにします。

例１

HTMLとCSSを学ぶことでホームページが自分で作成できます。

文章の中で「ホームページ」という箇所だけ色が変わっています。HTMLのソースコードは以下のようになります。

HTML

<body>
<p>HTMLとCSSを学ぶことで<span class="color01">ホームページ</span>が自分で作成できます。</p>
</body>

まずホームページという文言にspanタグで囲います。そして今回はclassを適用しました。名称をcolor01という名前にしています。

CSS

.color01{
font-weight:bold;
color:#f4079b;
}

class名に対して太文字にする記述と色を付与するカラーコードを適用しています。そうすることで文章中のある文字に対してカラーを変更し強調することができます。

※ font-weight(フォントウエイト)、bold（ボールド）では太文字にするスタイルです。

文章中の文字にペンで書いたようなアンダーラインを引きたい。

文章中の文言にアンダーラインを引くようなスタイルもspanタグを活用して表現できます。まるでノートにペンを用いて表現するようなCSSです。

例２

HTMLとCSSを学ぶことでホームページが自分で作成できます。

上記のように文章中にペンで書いたようなアンダーラインを引くことができます。

HTML

<body>
<p>HTMLとCSSを学ぶことで<span class="andline">ホームページが自分で作成できます。</span></p>
</body>

ホームページが自分で作成できます。という文言に対してspanタグで囲みます。class名はandlineという名前にしました。

CSS

.andline{
background:linear-gradient(transparent 70%, #b4e0f7 70%);
}

上記のようにCSSを書くことでペンで書いたようなアンダーラインを引くことができます。

ここでワンポイントアドバイスです。

このスタイルは元々アンダーラインを引くためのCSSではありません。その様にみえる表現方法です。ですのでコピペで対応できれば大丈夫です。

記述はコピペを効率よく活用するスキルもかなり大切です。必要なポイントだけまずは覚えていく。とても大事です。

今回のスタイルではカラーコードの#b4e0f7を変更することで色が変わることだけ覚えておきましょう。

カラーコードを調べる時のおすすめサイト

カラーコードを調べるときに、コードをまとめてくれているサイトなどがあります。Googleで「カラーコード表」など検索する様々ヒットしますが、一つ下記に紹介しておきます。

※ IllustratorやPhotoshopを使っている方はWEBで使えるカラーコードを調べることもできます。

文章中の文字を大きくしたい。

文章のフォントのサイズを大きくすることもできます。サイズを変更することでバリエーション豊かな文章にすることも可能です。

例３

HTMLとCSSを学ぶことでホームページが自分で作成できます。

ホームページの文言のみフォントサイズを大きくして、色を変えています。

HTML

<body>
<p>HTMLとCSSを学ぶことで<span class="size01">ホームページ</span>が自分で作成できます。</p>
</body>

ホームページの文言をspanタグで囲みます。class名にsize01という名称をつけました。

CSS

.size01{
font-size:130%;
font-weight:bold;
color:#f4079b;
}

class名に対してフォントサイズを１３０％に拡大。フォントウエイトで太文字に、文字カラーを適用しています。

まとめ

spanタグは文章中の文言に装飾できる。spanタグにHTML要素としての意味は持ち合わせていない。CSSを活用するために用意されたタグである。

Lesson.5

テキストに対するCSSスタイル ｜Webデザイナー独学