【CSS】CSSと<span>タグでカラーボックスを作る方法

CSSと<span>タグでカラーボックスを作る

今回はCSSと<span>タグで色付きのボックスを作る方法を説明します。 

＜CSS＞

CSSで作るボックスの高さと幅、文字とボックスの色の指定。<span></span>をボックス化するために「display」を「block」に指定します。<span>の場合は「display」を「block」にしないとボックスにならない。<div></div>の場合は元々が「block」要素なので最後の一行「display: block;」は必要ありません。

.box {
 height: 80px;  /*高さ*/
 width: 80px;  /*幅*/
 background-color: #F39;  /*背景の色*/
 color: #FFF;  /*フォントの色*/
 display: block;  /*ブロック要素に指定*/
}

＜HTMLソース＞

任意の <span> タグに "box"クラスを設定するだけで、その位置にカラーボックスが作られます。

<span class="box">ボックス</span> 

＜結果＞

以下のように<span>タグから「80ピクセル×80ピクセル」のピンク色のボックスが作られました。 

ボックス

END