CSS

【3つだけでOK】CSSで作るおすすめボックス(囲み枠)デザイン

こんにちは。

今回はCSSを使ったブログのボックスデザイン(囲み枠)をご紹介します。


ブログをはじめて3か月近くになります。
ただでさえブログは文字量が多く、スマホで読まれることも多いので、読みやすいデザインとは何かを日々探っています。

せっかく自分が探している情報が載っているサイトを見つけてページを開いても、ゴチャッとした印象のサイトだと見る気がなくなって閉じてしまいますよね。

ましてやこのブログタイトルを名付けた以上はなるべく看板に偽りはなくしたいです。
※まだ偽りあるので日々改良します。。


見やすさのコツは少ない色数と間の取り方

さて、その読みやすいブログとは何か。


それは「シンプル・イズ・ベスト」なデザインです。


ブログを開設してすぐの時は特にそうですが、強調したいテキストには割と強めのデザインや色をつけたりしがちです。
しかも同記事内で何種類も何色も使うと、強調したい部分ばっかりで逆にどこを見ていいか、何が本当に言いたいのかわからなくなります。



ブログは広告とは違います。



商品やサービスを売るためのキャンペーンサイトであれば目を引く色やデザインを多用して、購入や申し込み、問い合わせに繋げるためのクリックポイントを何個も設けます。
しかし、ブログは内容をしっかり読んでもらい、読んだ人のプラスになってもらうためのものです。
そういう目的のあるユーザーに対してトーン&マナーの統一がないブログは不親切ですね。


数多くのユーザーを集めている先輩ブログを見てみると、至ってシンプルです。


まず色数が少ない。テキストを強調するデザインも淡い色で、文字も太字にする程度で色はほとんど付けません。
ページ全体がベーシックな白構成です。
でも強調したい部分にはしっかり目が止まります。

またニュースサイトのように行間も詰まっておらず、行間や写真、枠のまわりに絶妙なスペース(ピクセル数)の取り方をしているので読み進めても疲れません。
※ちなみに自分は行間を32px取っています。


ボックスデザインはこの3つだけでOK

さて、本題です。
今回はCSSを使ったブログのボックスデザイン(囲み枠)をご紹介します。



以下で紹介するこの3つだけあれば充分です。



極論、どれか1つでも充分です。


① 破線ボックス

まずはシンプルな破線のボックスです。
背景色は白なので囲んでいるだけですが、充分に余白をとって読ませたいテキストを強調させることができます。
これ1つだけでも充分だと思っています。

CSS
 .box1 {
     padding: 0.5em 1em;
     margin: 2em 0;
     background: #ffffff;
     border: dashed 2px #5b8bd0;
 }
 .box1 p {
     margin: 8px; 
     padding: 8px;
 }
HTML
<div class="box1">
    <p>ここに文章</p>
</div>

見出し付きボックス

見出しがここに入ります

手順を説明する時などに適しています。
見出しの頭に①②③など振るとよりわかりやすくなりますね。

CSS
.title-box{
  margin: 4em 0 2em 0;
	 background: #fffbf4;
  border: 1px solid #ff6666;
}
.title-box-title{
  font-size: 16px;
  position: absolute;
  margin-top: -37px;
  margin-left: -2px;
  color: #ff6666;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  padding: 6px 10px;
}

.title-box p{
   margin: 8px; 
   padding: 12px;
}
HTML
<div class="title-box">
<div class="title-box-title">ここに見出し</div>
    <p>ここに文章</p>
</div>

③ ポイントボックス

POINT

3つ目はそのままの名前ですが、こういう使い方です。
「まとめ」「チェック」でもいいですね。
自分はこの色ですが、背景を白にしているので、もう少し目立つ色でも良いと思います。

CSS
.point-box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 2px #ffc06e;
    border-radius: 8px;
}
.point-box .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #ffc06e;
    font-weight: bold;
}
.point-box p {
   margin: 8px; 
   padding: 8px;
}
HTML
<div class="point-box">
<div class="box-title">ここにタイトル</div>
    <p>ここに文章</p>
</div>


下記の記事がこれら3つの使用例です。
【レイズ筒香嘉智】オープン戦の成績から見えてきた収穫と課題

最低限、いや最大限この3つだけ使っていれば、すっきりとした見やすいブログになります。
お好みで色を変えるのは問題ないです。ただし薄い色をお勧めします。
参考サイト:原色大辞典



まだまだ自分もブログ勉強中の日々です。
これからも一緒に運営頑張りましょう!


こちらの記事もあわせてどうぞ

-CSS
-, , ,

Copyright© ナナヨミ ブログ , 2021 All Rights Reserved Powered by AFFINGER5.