spanとは？

spanの意味ですが「架かる、渡される、〜を結ぶ」と言う意味があります。
単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をグループ化することができるタグです。
基本的にどこかのデザインを変えたいときに使います。
前後に改行の入らないspanタグは文章の一部の文字色を変えたり、文字に下線を引いたりするときに便利です。
タグの分類としてはインライン要素です。

実際に書いていきます。
【例1　HTML:部分的に文字の色変更】

<p>
<span style="color:red">溝の駅</span>から秋葉原駅までは40分ほどかかります。
<span style="color:red">秋葉原</span>にはAKB48劇場があります。
劇場では抽選で、<span style="color:blue">当選した人</span>が劇場公演をみることができます。
</p>

 

【例1:表示例】

溝の駅から秋葉原駅までは40分ほどかかります。 秋葉原にはAKB48劇場があります。 劇場では抽選で、当選した人が劇場公演をみることができます。

⬆︎上記のようにspanで挟んだ部分だけを色指定することで部分的に色を変えることができます。

spanで文字の下に線を引く

【例2　HTML:部分的に文字の下に線を引く】

<p>
<span style="text-decoration: underline">溝の駅</span>から秋葉原駅までは40分ほどかかります。
<span style="text-decoration: underline">秋葉原</span>にはAKB48劇場があります。
劇場では抽選で、<span style="text-decoration: underline">当選した人</span>が劇場公演をみることができます。
</p>

【例2:表示例】

溝の駅から秋葉原駅までは40分ほどかかります。秋葉原にはAKB48劇場があります。 劇場では抽選で、当選した人が劇場公演をみることができます。

⬆︎上記のように「style=”text-decoration: underline”」といれることで文字の下に線を入れることができます。

spanで蛍光ペンのように色をつける

蛍光ペンマーカーのCSSは「linear-gradient()属性」(グラデーション)を使います。

linear-gradient(transparent 線の太さ, 線の色 0%)

【例3 HTML:蛍光ペンのように色をつける】

/* 細い蛍光ペン */

<p>
<span style="background: linear-gradient(transparent 100%, #ffff66 60%)">溝の駅</span>
から秋葉原駅までは40分ほどかかります。
<span style="background: linear-gradient(transparent 100%, #ffff66 60%)">秋葉原</span>
にはAKB48劇場があります。
劇場では抽選で、<span style="background: linear-gradient(transparent 60%, #66FFCC 60%)">
当選した人</span>が劇場公演をみることができます。
</p>

/* 太い蛍光ペン */

<p>
<span style="background: linear-gradient(transparent 0%, #ffff66 0%)">溝の駅</span>
から秋葉原駅までは40分ほどかかります。
<span style="background: linear-gradient(transparent 0%, #ffff66 0%)">秋葉原</span>
にはAKB48劇場があります。
劇場では抽選で、<span style="background: linear-gradient(transparent 0%, #66FFCC 0%)">
当選した人</span>が劇場公演をみることができます。</p>

【例3:表示例】
/* 細い蛍光ペン */

溝の駅から秋葉原駅までは40分ほどかかります。 秋葉原にはAKB48劇場があります。 劇場では抽選で、当選した人が劇場公演をみることができます。

/* 太い蛍光ペン */

溝の駅から秋葉原駅までは40分ほどかかります。 秋葉原にはAKB48劇場があります。 劇場では抽選で、当選した人が劇場公演をみることができます。

⬆︎上記のようにグラデーションの数値を変えることで任意の太さにすることができます。

最後に・・・

以上がspanの説明になります、このようにspanを使うことで任意の位置に蛍光ペンやアンダーラインを入れて強調することが可能になります。
span要素はよく使うと思うので覚えておいて損はないと思います。
他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, ,