見出しのデザインやテキストの強調に囲み枠をつける方法

2017年7月11日

記事を読みやすくするために見出し・文などに囲み枠をつける方法

せっかくだから読みやすい・見やすい記事が書きたい!

でも…よく見かける表示の仕方もどうしていいのかわからない...。

何とか調べたりしてやっては見たが、すぐ忘れてしまう…(=∀=) のでなるべく使いやすく・シンプルなものを書き留めておいた。

 

CSSにコードを入力して使う方法

テンプレートのCSSにコードを入力しておき、記事(文章)にHTMLコードをつけて入力して表示する。 いろいろできるが、シンプルのものにした。

色の実線で囲む

**********

CSS

.aiirobox {
padding: 1em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #165e83;
}
.aiirobox p {
margin: 0;
padding: 0;
}

HTML

<div class="aiirobox">**********</div>

 

色の実線で囲む(色違い)

**********

CSS

.graybox {
padding: 1em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #e8ecef;
}
.graybox p {
margin: 0;
padding: 0;
}

HTML

<div class="graybox">**********</div>

 

丸い角の実線・実線と同じ色の文字

**********

CSS

.aibox2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #507ea4;/*文字色*/
background: #FFF;
border: solid 3px #507ea4;/*線*/
border-radius: 10px;/*角の丸み*/
}
.aibox2 p {
margin: 0;
padding: 0;
}

HTML

<div class="aibox2">**********</div>

 

上にラインのあるデザイン

**********

CSS

.bordertop{
padding: 1em 1em;
margin: 2em 0;
color: #5d627b;
background: white;
border-top: solid 5px #5d627b;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.bordertop p {
margin: 0;
padding: 0;
}

HTML

<div class="bordertop">**********</div>

 

横縦ライン・バック色付き・文字同色

**********

CSS

.sidebox {
background-color: #eaf4fc;
border-left: 8px solid #165e83;
color: #165e83;
margin: 1em 0;
padding: 1em;
}

HTML

<div class="sidebox"**********</div>

 

薄いグレーの二重線

**********

CSS

.doublebox {
padding: 1em 1em;
margin: 2em 0;
border: double 5px #ddd;
}
.doublebox p {
margin: 0;
padding: 0;
}

HTML

<div class="doublebox">**********</div>

 

背景のみグレーの枠

**********

CSS

.shadowwaku {
padding: 1em 1em;
margin: 2em 0;
color: #222222;
background: #e8ecef;/*背景色*/
}
.shadowwaku p {
margin: 0;
padding: 0;
}

HTML

<div class="shadowwaku">*****</div>

 

ブルーの見出し付き枠

+++++

**********

CSS

.point {
position: relative;
margin: 2em 0;
padding: 1em 1em;
border: solid 3px #507ea4;
border-radius: 8px;
}
.point .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #507ea4;
font-weight: bold;
}
.point p {
margin: 0;
padding: 0;
}

HTML

<div class="point"><span class="box-title">+++++</span><p>*****</p></div>

 

グレーの見出し付き枠

+++++

*****

CSS

.point2 {
position: relative;
margin: 2em 0;
padding: 1em 1em;
border: solid 3px #ddd;
border-radius: 8px;
}
.point2 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #ddd;
font-weight: bold;
}
.point2 p {
margin: 0;
padding: 0;
}

HTML

<div class="point2"><span class="box-title">+++++</span><p>*****</p></div>

 

シンプルな見出し付き枠

+++++

**********

CSS

.point3 {
position: relative;
margin: 2em 0;
padding: 1em 1em;
border: solid 2px #696969;
border-radius: 4px;
}
.point3 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 15px;
background: #FFF;
color: #696969;
font-weight: bold;
}
.point3 p {
margin: 0;
padding: 0;
}

HTML

<div class="point3"><span class="box-title">+++++</span><p>*****</p></div>

 

枠の名前は自分が覚えやすそうなのを付け、作ってみたが、色・線の太さなど、変更可能。 まだほかにも表示の仕方はある・・・