色々な使い方ができるCSS3ボックスデザイン

author photo

Byinfobloger

CSS3ボックスデザイン

この記事では複数のボックスデザインを紹介します。

背景色やタイトル入りなど色々な場面で使用できるのではないでしょうか。

スポンサーリンク

薄い背景色にワンポイントの左ボーダーボックス

薄い灰色の背景色のボックスです。
ワンポイントとして左の線を少し太めの緑系にしました。

HTML
<div class="color-box1 color-box-border1">
<p><!-- ここに文章 --></p>
</div>

薄い黄色系の背景色のボックスです。
ワンポイントとして左の線を少し太めの黄土色系にしました。

HTML
<div class="color-box2 color-box-border2">
<p><!-- ここに文章 --></p>
</div>

薄いピンクの背景色のボックスです。
ワンポイントとして左の線を少し太めの赤系系にしました。

HTML
<div class="color-box3 color-box-border3">
<p><!-- ここに文章 --></p>
</div>

ワンポイントタイトルつきボックス

STEP1

タイトルは自由に変えることができます。 ボックスの背景やボーダーもクラスを追加するだけで変えることができます。

HTML
<div class="label-box1 label-box-border1 ">
<span class="box-title"><!-- ここにタイトル --></span>
<p><!-- ここに本文 --></p>
</div>
STEP2

使い方としては緑系のボックスは肯定的な内容を書いたり、黄色系を注意を促したり、赤系はデメリットなどを記述した、アイディア次第で色々と使えると思います。

HTML
<div class="label-box2 label-box-border2 ">
<span class="box-title"><!-- ここにタイトル --></span>
<p><!-- ここに本文 --></p>
</div>
STEP3

今回のようにタイトルをSTEPと入れる時は同じボックスを使ったほうが良いかもしれません。偶数列と奇数列でボックスを変えるのも読者の目を引きつけることが出来るかもしれませんね。

HTML
<div class="label-box3 label-box-border3 ">
<span class="box-title"><!-- ここにタイトル --></span>
<p><!-- ここに本文 --></p>
</div>
STEP4

今回は4つのワンポイントタイトル付きボックスをテンプレートに組み込みました。このテンプレートを使えば簡単に読み込むことができます。

HTML
<div class="label-box4 label-box-border4 ">
<span class="box-title"><!-- ここにタイトル --></span>
<p><!-- ここに本文 --></p>
</div>

タイトル付きの背景色なしボックス3選

ここにタイトル

タイトル付きのシンプルなボックスです。

タイトルにはFontAwesomeのアイコンをしようしています。

HTML
<div class="Check-title"><!--ここにタイトル--></div>
<div class="Title-box1">
<p>ここに文章</p>
</div>
ここにタイトル

FontAwesomeのアイコンはテンプレートで読み込んでいますので、FontAwesomeのアクセスしてアイコンを選ぶだけです。

HTML
<div class="Check-title"><!--ここにタイトル--></div>
<div class="Title-box2">
<p>ここに文章</p>
</div>
ここにタイトル

FontAwesomeの使い方やGoogleフォントの使い方については、別の記事で紹介していますのでそちらを参考にしてください。

HTML
<div class="Check-title"><!--ここにタイトル--></div>
<div class="Title-box3">
<p>ここに文章</p>
</div>

タイトル付き背景色ありのボックス3選

ここにタイトル

こちらもタイトルにFontAwesomeを使っています。

タイトルが目立つように背景に色を付けました。

HTML
<div class="Title-bg-box1">
<div class="box-title"><!-- ここにタイトル --></div>
<p><!-- 本文 --></p>
</div>
ここにタイトル

背景に色が付いた事によって、使いすぎると目立ちすぎて逆効果かもしれません。

状況によって適度に使ったほうがいいかもしれませんね。

HTML
<div class="Title-bg-box2">
<div class="box-title"><!-- ここにタイトル --></div>
<p><!-- 本文 --></p>
</div>
ここにタイトル

タイトルの背景色を3色です。

自分で「この時はこの背景色を使おう」と規則を決めた方が良いのでのないでしょうか。

HTML
<div class="Title-bg-box3">
<div class="box-title"><!-- ここにタイトル --></div>
<p><!-- 本文 --></p>
</div>

まとめ

今回はHTMLとCSSだけで作成できるボックスの紹介でした。

記事をみてもらうと分かると思いますが、このように全てのボックスを使ってしまうと見づらいですよね。

ボックスもそうですが装飾なども使いすぎると逆効果になってしまいますので気をつけましょう。

ここで紹介したボックスは、このテンプレートに組み込まれていますのでコピペするだけで使用できます。

次回はGoogleウェブフォントの使い方とFontAwesomeのウェブアイコンについて紹介したいと思います。

関連記事
Share

Comments 0

Leave a reply