コピペで使える！注意書きやワンポイント用のCSSカラーボックス

どうもこんにちは。

今日のこの記事の構想を練っている時、

「どんな～いろ～～が好き？　あか！　あ～かいいろが好き～～～
　いちばん先になくなるよ～～～　　あかいクレヨン～～」

って歌が頭から離れませんでした。どうもdaiです。

速水けんたろうおにいさんと茂森あゆみおねえさんが黄金時代だと思っています。

コピペOK！ワンポイントに使えるcssカラーボックス

最近カスタマイズ系の記事が増えてきてアレなんですが、何かとこういうのも需要があるみたいなので、

ちょこちょこ書いていこうと思ったりしちゃったりしています。

本当はこの記事とかこの記事とかこの記事とかこの記事とか、がっつり文章で攻めた記事もあるんで、よかったらそっちも読んで・・・欲しいな・・・とか☆

ということで今回は、cssで簡単に作れるカラフルなボックスの作り方をご紹介。

突然ですが、

皆さんも、「注意書き」とか「ポイント」とか「ちなみに・・・」とか、
ちょっとワンポイントで情報を伝えたいときありますよね。

そこで役立つのがcssのカラフルボックス。

超お手軽なので、ぜひ使ってみてください♪

使用例

どうですか！なかなか使えるでしょう！？

コード（コピペでOK！のはず！）

７色用意しました。

htmlはこちら

<div class="box">普通の白いボックス</div>

<div class="box box-red">情熱の赤いボックス</div>

<div class="box box-blue">冷静の青いボックス</div>

<div class="box box-green">平穏の緑色ボックス</div>

<div class="box box-yellow">黄金の黄色ボックス</div>

<div class="box box-pink">おっぱいのピンクボックス</div>

<div class="box box-orange">柑橘のオレンジボックス</div>

cssはこちら

.box の中身は使いやすいように自由に変更してください。

あと、「太いのが好きなのぉ・・・///」ってぐらい、枠線が太いのがお好きな場合は、「border:1px solid ・・・」ってなってる部分の数字を2とか3とか500に変更してくださいね。

.box{
	position:relative;
	width:90%;
	line-height:1.8;
	padding:6px 12px!important;
	margin:0 auto 20px!important;
	border:1px solid silver;
	background-color:#f9f9f9;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
}

.box-red{color:#b94a48;border:1px solid #f5c2c9;background-color:#f2dede;}
.box-blue{color:#3a87ad;border:1px solid #ace9f5;background-color:#d9edf7;}
.box-green{color:#48832b;border:1px solid #c6f5ab;background-color:#eafddf;}
.box-yellow{color:#97911e;border:1px solid #f3ee85;background-color:#fefee2;}
.box-pink{color:#d97c9e;border:1px solid #fddce9;background-color:#fff5f9;}
.box-orange{color:#b9714f;border:1px solid #fbd69d;background-color:#f5e5c9;}

いかがでしょう？

簡単なコードコピペだけで、ちょっとしたカラーボックスができちゃう(・ω<)

おまけ　こんなのもあるよ

勢いで作りました。↓

こんなレインボーでテッテレーなボックスも作れるんです。

同じくコピペでどうぞ。

htmlはこちら

<div class="box-rainbow">
<div class="box-rainbow-nakami">ここにレインボーテッテレーボックスの中身</div>
</div>

今回は先ほどの「box」というクラスはいれず、「box-rainbow」単体で作っています。
そうしないとおかしくなるので。

cssはこちら

.box-rainbow{
     border-left:5px solid #ff0000;
     border-right:5px solid #F7C12E;
     line-height:1.8;
     background-color:#f9f9f9;
     -webkit-border-radius:6px;
     -moz-border-radius:6px;
     -ms-border-radius:6px;
     -o-border-radius:6px;
     border-radius:6px;}

.box-rainbow:before, .box-rainbow:after {
     content:"";
     display:block;
     height:5px;
     width:100%;
     background: -moz-linear-gradient(left, rgb(255,0,102) 0%, rgb(181,97,214) 27%, rgb(57,124,200) 49%, rgb(0,193,164) 73%, rgb(247,193,46) 100%);
     background: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(255,0,102)), color-stop(0.27, rgb(181,97,214)), color-stop(0.49, rgb(57,124,200)), color-stop(0.73, rgb(0,193,164)), color-stop(1, rgb(247,193,46))); 
     background: -o-linear-gradient(top left, rgb(255,0,102), rgb(181,97,214), rgb(57,124,200), rgb(0,193,164), rgb(247,193,46));
}

.box-rainbow-nakami{margin:30px;}

長ったらしくてごめんなさい。

何を書いているかというと、現状ではボーダー（枠線）にこういうグラデーションをかけることはできないので、

beforeとかafterっていう「擬似要素」を作り、
そこに背景でグラデーションをかけることで、枠線っぽくしています。

え？意味がよくわからない？

ええんです。こんなの分からなくてええんです。がんがんコピペして使ってやってください。

まとめ

レインボーの方はブログ記事最後の「●●のまとめ」「●●の一言」的な場所に使ってもいいかもしれません。

あと、「AddQuicktag」というプラグインをお使いの方は、

今日紹介したHTMLコードをあらかじめ登録しておけば、ワンタッチで呼び出せるのでめちゃくちゃ便利ですよ。

私もカラーボックスは登録してます。ちょっとしたアクセントに使えます。

ということで、何かご不明な点があればご一報を。

では！