記事を書いていると文章を強調させるために囲み枠を使うことがありますが、今回はそんな時に役立つシンプルでシックな囲み枠を３種類ご紹介！すべてCSSのみで作成し、レスポンシブにも対応済みです！
使いどころの多い色つき囲み枠
まず、文章の中で目立たせたいときに使うと効果的な色付きの囲み枠。緑なら注意点、青なら要点といった具合に使う色によっておおよそのイメージを与えることができるため記事内に使うとかなりメリハリがつき視覚的に分かりやすくなります。
ただの枠線のみでは寂しいので、枠の中に一回り小さな枠を作り背景色をつけました。これで、シンプルだけど目立つデザインになり視線誘導効果もアップ。よりアクセントが欲しければアイコンを使ってスタイリグすることもできるので、サイトの雰囲気に合わせてカスタマイズしてみてください。
サンプル
HTML
<div class="boxblue">
<div class="boxblue-inner>
<p>ここに好きな文章を入れてください。</p>
</div>
</div>
CSS
.boxblue{
border: 1px solid #093475;
margin: 20px 0px;
}
.boxblue-inner{
border: 5px solid #fff;
padding: 15px;
color: #093475;
background: #eee;
}
色付き囲み枠サンプル（アイコンあり）
アイコンは30×30サイズで作っています。
サンプル
HTML
<div class="boxgreen">
<div class="boxgreen-inner">
<p>ここに好きな文章を入れてください。</p>
</div>
</div>
CSS
.boxgreen {
border: 1px solid #afcd7f;
margin: 20px 0px;
}
.boxgreen-inner {
border: 5px solid #fff;
background: #f6ffec;
padding: 15px;
color: #608722;
}
.boxgreen-inner::before {
content: "";
position: absolute;
background: url("ここに画像のURLを入力") no-repeat top left;
width: 30px;
height: 30px;
}
.boxgreen-inner p {
margin-bottom: 6px;
padding-left: 40px;
}
斜線の囲み枠
ただの直線よりちょっとだけ目立たせたいときに便利なのが、斜線を使った囲み枠。ナチュラルやガーリなデザインによくマッチします。作り方としては、斜線で作った背景の上に白をかぶせる感じですね。CSSなので管理が楽ですが、その代わりIEには非対応。
サンプル
HTML
<div class="sbox">
<div class="sbox2">
<p>ここに好きな文章を入れてください。</p>
</div>
</div>
CSS
.sbox {
padding: 8px;
background: -webkit-gradient(linear, left top, right bottom, from(#ddd), color-stop(0.25, #ddd), color-stop(0.25, white), color-stop(0.5, white), color-stop(0.5, #ddd), color-stop(0.75, #ddd), color-stop(0.75, white), to(white));
background: -moz-linear-gradient(-45deg, #ddd 25%, white 25%, white 50%, #ddd 50%, #ddd 75%, white 75%, white);
background: linear-gradient(-45deg, #ddd 25%, white 25%, white 50%, #ddd 50%, #ddd 75%, white 75%, white);
background-size: 4px 4px;
}
.sbox2{
background:#fff;
padding: 15px;
font-size: 14px;
}
