読者です 読者をやめる 読者になる 読者になる

よなかのはなし

http://www.hiroseyonaka.com/

文章を強調したいときにおすすめ!フルCSSで作るレスポンシブ対応の囲み枠

f:id:hiroseyonaka:20160904043640p:plain

記事を書いていると文章を強調させるために囲み枠を使うことがありますが、CSSでborderを指定するだけじゃちょっと物足りないときもありますよね。今回はそんな時に役立つ囲み枠の作り方をご紹介します。なお、すべて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;
}

見出しつき囲み枠

見出しつきの囲み枠は、よく施設の案内や著者紹介などに用いられます。ブログなら、記事の最後に内容のまとめを入力する時などに使うと効果的!

見出しつき囲み枠サンプル

ここに見出し

ここに好きな文章を入れてください。

HTML

<div class="headingbox">
<p class="heading_black">ここに見出し</p>
<div class="headingbox_inner1">
<div class="headingbox_inner2">
<p>ここに好きな文章を入れてください。</p>
</div>
</div>
</div>

CSS

.headingbox {
    display: block;
    border: 1px solid #000;
    margin: 0 0 40px;
}

.headingbox .heading_black {
    height: 45px;
    background-color: #000;
    color: #fff;
    padding-left: 25px;
    font-size: 17px;
    font-size: 1.7rem;
    line-height: 45px;
}

.headingbox .headingbox_inner1 {
    display: block;
    padding: 20px;
}

.headingbox div {
    line-height: 1;
    margin: 0;
}


.headingbox .headingbox_inner1 .headingbox_inner2 {
    overflow: hidden;
}


.headingbox .heading_black {
    height: 40px;
    background-color: #000;
    color: #fff;
    padding-left: 20px;
    font-size: 17px;
    font-size: 1.3rem;
    line-height: 45px;
}

斜線の囲み枠

ただの直線よりちょっとだけ目立たせたいときに便利なのが、斜線を使った囲み枠。ナチュラルやガーリなデザインによくマッチします。作り方としては、斜線で作った背景の上に白をかぶせる感じですね。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;
}

おすすめ記事紹介にぴったりな見出し付き囲み枠

最近ブログの記事下に「おすすめ記事」を表示させている人をよく見かけますが、そのさい使われているのが以下のような囲み枠。見出しのウェブアイコンを変えれば色々なアレンジができます。

見出しつき囲み枠(アイコンあり)

あわせて読みたい

ここに好きな文章を入れましょう。


下準備

見出しに使っているウェブアイコン「Font Awesome」を読み込むために、以下のコードをヘッダーにペーストしてください。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


HTML

<div id="recommend_box">
<div class="recommend_title"><span>あわせて読みたい</span></div>
<p>ここ好きな文章を入れましょう</p>
</div>


CSS

#recommend_box {
    position: relative;
    border: 1px solid #CCCCCC;
    padding: 25px 30px 20px 30px;
}

.recommend_title {
    position: absolute;
    top: -15px;
    left: 20px;
    font-weight: bold;
    font-size: 1.2em;
    background: #FFFFFF;
    padding: 0 8px;
}

.recommend_title:before {
    content: "\f11d";
    display: inline-block;
    font-family: FontAwesome;
    margin-right: 7px;
}

もしもウェブアイコンを変えたいときはCSSの中にある

.recommend_title:before {
    content: "\f11d";
}

を以下の好きなアイコンのコードに書き換えましょう。


見出しに使えそうなウェブアイコン一覧

(右向き矢印)

.recommend_title:before {
    content: "\f0a4";
}

(えんぴつ)

.recommend_title:before {
    content: "\f040";
}

(メガホン)

.recommend_title:before {
    content: "\f0a1";
}