「CSSでおしゃれな装飾！コピペで見出しをデザインしよう！」や「種類いろいろ！CSSのborder(線)の使い方」で紹介している内容と少しかぶりますが、ここでは囲み枠（ボックス）のデザインサンプルをご紹介します。
シンプル
文字を囲むように線がある基本的なものです。
border-radiusで四隅を丸くしました。線と文字の色を変え、文字も太くすることで文字が強調されたようになります。
背景塗りつぶし+文字色を設定してあります。幅を端まで表示したい場合はwidth:60%;を消してください。
上下に太い線を入れました。見出しにも使えそうですね。
上だけに線があるだけでも十分デザイン性があります。
左だけに線があり、影をつけました。
角に丸みをもたせる「border-radius」と、下にborderを指定すると立体感のあるボタン風ができます。
破線と二重線
破線にして背景色を指定してあります。線の太さはborder:2px～の数字で調整します。
内側に線があるだけでかわいらしいデザインになります。
上のものに「border-radius」を追加して四隅を丸くしました。
二重線（double）を使用しました。
左右だけに二重線を使用してます。
周りをぼかす
周りをぼかしてあります。ふわっとした印象になりました。
おしゃれ
斜めの線でおしゃれに
カギ、カッコのようなデザインで、文字は中央にくるようになっています。
四隅がクロスしているデザインです。シンプルに線と文字色が黒なので飾らないデザインになります。
付箋風
右下に影を付けるだけでふわっと角が持ち上がり付箋風のできあがりです。
吹き出し風
吹き出しにもつかえる下向きのボックスです。
下向きのボックスを枠線だけにしてみました。
心の声や考え事の時に使えそうなボックスデザインです。
こちらも心の声や考え事の時に使えそうですね。
タイトル付き
POINTやcheckなど、伝えたい事を強調したいときにお使いください。
上のデザイント反対に内側にラベルがあります。角を丸くしたことでやわらかく強調できます。
ページの内容と内容のちょっとした解説を入れるときに活躍しそうですね。
黒板風
右下にあるチョークが黒板らしさを出してますね。
ホワイトボード風
黒板風の応用でホワイトボード風のものも用意しました。シチュエーションによって使い分けて下さい。
最後に
ボックスはページ内で頻繁に使用するのではなく、ちょっと目立たせたい文言やまとめなどに使うといいかもしれませんね。
文字色と背景色を変えるだけでも印象がかわるのでぜひコピベしてご利用下さい。
ここで紹介したものを自分のサイトに実装する前に、色を変えたりして試してみたい方は下の「jsFiddleは～」も合わせて読んでみてください。
書いたHTMLとCSSを同じ画面内に結果として出してくれるのでとても便利です。
この記事へのコメントはありません。