JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

<SPAN>タグとCSSで色付きのボックスを作る方法

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

CSS

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

.box {
 height: 80px;
 width: 80px;
 background-color: #F39;
 color: #FFF;
 display: block;
}

 

HTML 

<span>タグに "box"クラスを設定するだけでボックスが作られる。

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

 

結果

下記の通り<span>タグをもとにして80ピクセル×80ピクセルのピンク色のボックスが作られた。 

ボックス

 

END