講座1

記事の文字をHTMLとCSSを使って枠で囲む方法

  • Jo Masafumi
  • Jo Masafumi
学習状況をツイッターでつぶやく

次は、記事の文字をHTMLとCSSを使って枠で囲む方法をします。

記事の文字をHTMLとCSSを使って枠で囲む方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「記事の文字をHTMLとCSSを使って枠で囲む方法」と入力します。

右側の「テキスト」を押します。

テキストのところにコードを貼り付けます。

テキストのところに下記のコードをコピーして、貼り付けます。

<div class="waku">
サンプル１
サンプル２
サンプル３
</div>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「サンプル１、サンプル２、サンプル３」の文字が黒い枠で囲まれていることを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*枠CSSコード*/
.waku{
    padding: 1em;
    margin-bottom: 2em;
    border: solid 3px black;
}

HTML

<div class="waku">
サンプル１
サンプル２
サンプル３
</div>

「padding」は、枠の内側の余白を指定するときに使います。

「margin-bottom」は、枠の外側の下側の余白を指定するときに使います。

「border」は、「solid」は「線の種類」、「3px」は「線の太さ」、「black」は「色」が入ります。

padding説明

paddingは、枠の内側の余白を指定するCSSコードです。

paddingの記入方法は、５種類あります。

padding一覧表

padding枠の内側の余白（上下左右）を指定する。
padding-top枠の内側の余白（上側）を指定する。
padding-bottom枠の内側の余白（下側）を指定する。
padding-right枠の内側の余白（右側）を指定する。
padding-left枠の内側の余白（左側）を指定する。

margin説明

marginは、枠の内側の余白を指定するCSSコードです。

marginの記入方法は、５種類あります。

margin一覧表

margin枠の外側の余白（上下左右）を指定する。
margin-top枠の外側の余白（上側）を指定する。
margin-bottom枠の外側の余白（下側）を指定する。
margin-right枠の外側の余白（右側）を指定する。
margin-left枠の外側の余白（左側）を指定する。

border説明

borderは、枠線のスタイルを指定するCSSコードです。

borderの記入方法は、9種類あります。

border一覧表

none枠なし。
solid実線で表示。
double二重線で表示。
dashed破線で表示。
dotted点線で表示。
groove立体的でへこんだ線で表示。
ridge立体的に、もりあがった線で表示。
inset全体を、へこませて表示。
outset全体を、もりあげて表示。

いろいろな枠の記入例

実線の枠

CSS

/*実線の枠　黒色*/
.waku1{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border: solid 3px black; /*3pxの黒線*/
}

HTML

<div class="waku1">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

実線の枠と背景色あり

CSS

/*実線の枠　背景グレー*/
.waku2{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border: solid 3px gray; /*3pxのグレー線*/
    background: #dbdbdb; /*背景　グレー*/
}

HTML

<div class="waku2">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

背景のみ

CSS

/*背景グレー*/
.waku3{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    background: #dbdbdb; /*背景　グレー*/
}

HTML

<div class="waku3">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

角を丸くする

CSS

/*実線の枠　黒枠　角丸み*/
.waku4{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border: solid 3px black; /*3pxの黒線*/
    border-radius: 1em;/*角の丸み*/
}

HTML

<div class="waku4">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

上下線

CSS

/*上下線　背景グレー*/
.waku5{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border-top: solid 10px gray; /*3pxのグレー線*/
    border-bottom: solid 10px gray; /*3pxのグレー線*/
    background: #dbdbdb; /*背景　グレー*/
}

HTML

<div class="waku5">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

二重線　枠

CSS

/*二重線　枠　赤線*/
.waku6{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border: double 10px red; /*二重線の赤線*/
    background: white; /*背景　白*/
}

HTML

<div class="waku6">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

破線の枠

CSS

/*破線の枠　緑線*/
.waku7{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border: dashed 5px green; /*破線の緑線*/
    background: white; /*背景　白*/
}

HTML

<div class="waku7">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

左右の二重線

CSS

/*左右の二重線　青線*/
.waku8{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border-left: double 10px blue;/*左線*/
    border-right: double 10px blue;/*右線*/
    background: white; /*背景　白*/
}

HTML

<div class="waku8">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

左に太線

CSS

/*左に太線　緑線*/
.waku9{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border-left: solid 20px green;/*左線*/
    background: white; /*背景　白*/
}

HTML

<div class="waku9">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

上に太線

CSS

/*上に太線　青線*/
.waku10{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border-top: solid 20px blue;/*上線*/
    background: white; /*背景　白*/
}

HTML

<div class="waku10">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

影をつける枠

CSS

/*影を付ける枠*/
.waku11{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border-top: solid 20px #afafff;/*上線*/
    color: black; /*文字色*/
    background: #c9ffff; /*背景*/
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.42); /*影*/
}

HTML

<div class="waku11">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

影で枠を表す

CSS

/*影で枠を表す*/
.waku12{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border-top: solid 20px #afafff;/*上線*/
    color: black; /*文字色*/
    background: white; /*背景*/
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.42); /*影*/
}

HTML

<div class="waku12">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

パソコン画面枠

CSS

/*パソコン画面枠*/
.waku13{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border-top: solid 20px #5a5aff;/*上線*/
    color: white; /*文字色*/
    background: black; /*背景*/
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.42); /*影*/
}

HTML

<div class="waku13">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

厚みのある枠

CSS

/*厚みのある枠*/
.waku14{
    padding: 1em; /*内側余白*/
    margin-bottom: 2em; /*下側余白*/
    border-bottom: solid 8px gray;/*下線*/
    color: black; /*文字色*/
    background: white; /*背景*/
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.42); /*影*/
    border-radius: 15px;
}

HTML

<div class="waku14">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

布みたいな枠

CSS

/*布みたいな枠*/
.waku15{
    padding: 1em; /*内側余白*/
    margin-top: 2em; /*上側余白外*/
    margin-bottom: 2em; /*下側余白外*/
    margin-right: 1em; /*右側余白外*/
    margin-left: 1em; /*左側余白外*/
    border: dashed 2px white; /*点線*/
    color: black; /*文字色*/
    background: #ffd6dd; /*背景*/
    box-shadow: 0px 0px 0px 13px #ffd6dd; /*外側の色*/
}

HTML

<div class="waku15">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

交差枠

CSS

/*交差枠*/
.waku16{
    padding: 1.5em; /*内側余白*/
    margin-top: 2em; /*上側余白外*/
    margin-bottom: 2em; /*下側余白外*/
    margin-right: 1em; /*右側余白外*/
    margin-left: 1em; /*左側余白外*/
    position: relative; /*通常の表示位置が基準*/
    border-top: solid 2px black; /*上線*/
    border-bottom: solid 2px black; /*上線*/
    color: black; /*文字色*/
    background: white; /*背景*/
}
.waku16:before, .waku16:after{
    content: ''; /*beforeとafterが入ったときのみ使用*/
    position: absolute; /*親要素の左上基準*/
    top: -10px; /*右左の線の始まりの位置*/
    width: 2px; /*左右の線の太さ*/　
    height: -webkit-calc(100% + 20px); /*線を縦に伸ばす*/
    height: calc(100% + 20px); /*線を縦に伸ばす*/
    background-color: black;
}
.waku16:before {left: 10px; /*左の線の位置*/
}
.waku16:after {right: 10px; /*右の線の位置*/
}

HTML

<div class="waku16">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

角に丸

CSS

/*角に丸*/
.waku17{
    margin-top: 2em; /*上側余白*/
    margin-bottom: 1em; /*下側余白*/
    position: relative; /*通常の表示位置が基準*/
    padding: 1em; /*枠の内側余白*/
    border: solid 2px #ffcb8a; /*枠*/
    border-radius: 5px; /*枠の丸み*/
}
.waku17:before,.waku17:after
{
    content: ''; /*beforeとafterが入ったときのみ使用*/
    position: absolute; /*親要素の左上基準*/
    width: 15px; /*丸の横幅*/
    height: 15px; /*丸の高さ*/
    border: solid 8px #ffcb8a; /*丸の線の太さ*/
    border-radius: 50%; /*丸み*/
}
.waku17:after {
    top:-12px; /*左上の丸　縦位置*/
    left:-12px; /*左上の丸　横位置*/
}
.waku17:before {
    bottom:-12px; /*右下の丸　縦位置*/
    right:-12px; /*右下の丸　横位置*/
}

HTML

<div class="waku17">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

ドラクエ風枠

CSS

/*ドラクエ風枠*/
.waku18{
    padding: 1em; /*内側余白*/
    margin-top: 2em; /*上側余白外*/
    margin-bottom: 2em; /*下側余白外*/
    margin-right: 1em; /*右側余白外*/
    margin-left: 1em; /*左側余白外*/
    border: solid 2px white; /*線*/
    color: white; /*文字色*/
    background: black; /*背景*/
    box-shadow: 0px 0px 0px 13px black; /*外側の色*/
}

HTML

<div class="waku18">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

かっこ枠

CSS

/*かっこ枠*/
.waku19 {
    position: relative; /*通常の表示位置が基準*/
    padding:1em; /*内側の余白*/
    margin-bottom:1em; /*枠の下側の余白*/
}
.waku19:before,.waku19:after{ 
    content:''; /*beforeとafterが入ったときのみ使用*/
    width: 30px; /*かっこの線の長さ*/
    height: 30px; /*かっこの線の長さ*/
    position: absolute; /*親要素の左上基準*/
    display: inline-block; /*横に並ぶ*/
}
.waku19:before{
    border-left: solid 3px blue; /*かっこの線の太さ*/
    border-top: solid 3px blue; /*かっこの線の太さ*/
    top:0; /*左上の位置*/
    left: 0; /*左上の位置*/
}
.waku19:after{
    border-right: solid 3px blue; /*かっこの線の太さ*/
    border-bottom: solid 3px blue; /*かっこの線の太さ*/
    bottom:0; /*右下の位置*/
    right: 0; /*右下の位置*/
}

HTML

<div class="waku19">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

大きいかっこ枠

CSS

/*大きいかっこ枠*/
.waku20 {
    position: relative; /*通常の表示位置が基準*/
    padding: 1em; /*内側の余白*/
    margin-bottom: 1em; /*枠の下側の余白*/
    top: 0; /*上の位置*/
    background: white; /*背景色*/
}
.waku20:before, .waku20:after{ 
    position: absolute; /*親要素の左上基準*/
    top: 0; /*上側の位置*/
    content:''; /*beforeとafterが入ったときのみ使用*/
    width: 30px; /*線の長さ*/
    height: 100%; /*線の長さ*/
    display: inline-block; /*横に並ぶ*/
    box-sizing: border-box;/*padding と border の幅を要素の幅と高さに含める*/
}
.waku20:before{
    border-left: solid 5px black; /*左の線の太さ*/
    border-top: solid 5px black; /*左の線の太さ*/
    border-bottom: solid 5px black; /*左の線の太さ*/
    left: 0; /*左の位置*/
}
.waku20:after{
    border-top: solid 5px black; /*右の線の太さ*/
    border-right: solid 5px black; /*右の線の太さ*/
    border-bottom: solid 5px black; /*右の線の太さ*/
    right: 0; /*右の位置*/
}

HTML

<div class="waku20">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

グラデーション枠

CSS

/*グラデーション枠*/
.waku21{
    padding: 1em; /*内側の余白*/
    margin-bottom: 1em; /*枠の下側の余白*/
    background: -moz-linear-gradient(#9554ff, #e2ff70); /*始まりと終わりの色*/
    background: -webkit-linear-gradient(#9554ff, #e2ff70); /*始まりと終わりの色*/
    background: linear-gradient(to right, #9554ff, #e2ff70); /*始まりと終わりの色*/
    color: white; /*文字色*/
}

HTML

<div class="waku21">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

ふせん枠

CSS

/*ふせん枠*/
.waku22{
    padding: 1em; /*内側の余白*/
    margin-bottom: 1em; /*枠の下側の余白*/
    background: white; /*背景色*/
    border-left: solid 10px green; /*左側の線*/
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.33); /*影*/
}

HTML

<div class="waku22">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

もやもや枠

CSS

/*もやもや枠*/
.waku23 {
    position: relative; /*通常の表示位置が基準*/
    margin: 2em 0 2em 2.5em; /*枠の周りの余白*/
    padding: 1em; /*内側の余白*/
    background: #b9beff; /*背景の色*/
    border-radius: 30px; /*角の丸み*/
}
.waku23:before{
    font-family: FontAwesome; /*フォント名*/
    content: "\f111"; /*アイコンの種類*/
    position: absolute; /*親要素の左上基準*/
    font-size: 15px; /*丸の大きさ*/
    left: -40px; /*丸の位置*/
    bottom: 0; /*丸の位置*/
    color: #b9beff; /*丸の色*/
}
.waku23:after{
    font-family: FontAwesome; /*フォント名*/
    content: "\f111"; /*アイコンの種類*/
    position: absolute; /*親要素の左上基準*/
    font-size: 23px; /*丸の大きさ*/
    left: -23px; /*丸の位置*/
    bottom: 0; /*丸の位置*/
    color: #b9beff; /*丸の色*/
}

HTML

<div class="waku23">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

吹き出し枠

CSS

/*吹き出し枠*/
.waku24 {
    position: relative; /*通常の表示位置が基準*/
    padding: 1em; /*内側の余白*/
    margin-bottom: 2em; /*下側の余白*/
    background: #ffd6f7; /*背景色*/
    color: black; /*文字色*/
}
.waku24:after {
    position: absolute; /*親要素の左上基準*/
    content: ''; /*beforeとafterが入ったときのみ使用*/
    top: 100%; /*三角位置*/
    left: 20px; /*三角位置*/
    border: 20px solid transparent; /*三角幅*/
    border-top: 20px solid #ffd6f7; /*三角長さ*/
    width: 0; /*三角幅*/
    height: 0; /*三角高さ*/
}

HTML

<div class="waku24">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

めくれた布

CSS

/*めくれた布*/
.waku25{
    position: relative; /*通常の表示位置が基準*/
    background: #decfff; /*背景の色*/
    box-shadow: 0px 0px 0px 5px #decfff; /*点線の周りの色*/
    border: dashed 3px white; /*点線*/
    padding: 1em; /*内側の余白*/
    margin-top: 1em; /*上側の余白*/
    margin-bottom: 1em; /*下側の余白*/
    margin-left: 0.5em; /*左側の余白*/
    margin-right: 0.5em; /*右側の余白*/
    color: black; /*文字色*/
}
.waku25:after{
    position: absolute; /*親要素の左上基準*/
    content: ''; /*beforeとafterが入ったときのみ使用*/
    right: -7px; /*折り目の位置*/
    top: -7px; /*折り目の位置*/
    border-width: 0 30px 30px 0; /*折り目の大きさ*/
    border-style: solid; /*折り目のスタイル*/
    border-color: #decfff #fff #decfff; /*折り目の色*/
    box-shadow: -1px 5px 2px rgba(0, 0, 0, 0.15); /*折り目の影*/
}

HTML

<div class="waku25">
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

サンプル１
サンプル２
サンプル３

枠の途中にタイトル

CSS

/*枠の途中にタイトル*/
.waku26 {
    position: relative; /*通常の表示位置が基準*/
    margin-top: 2em; /*上側の余白*/
    margin-bottom: 2em; /*下側の余白*/
    padding-left: 1em; /*内側の左の余白*/
    padding-bottom: 1em; /*内側の下の余白*/
    border: solid 3px #95ccff; /*枠の線*/
    border-radius: 10px; /*角の丸み*/
}
.waku26 .box-title {
    position: absolute; /*親要素の左上基準*/
    display: inline-block; /*横並び*/
    top: -15px; /*タイトル位置*/
    left: 10px; /*タイトル位置*/
    padding: 0 9px; /*タイトル余白*/
    line-height: 1; /*タイトル位置*/
    font-size: 1.5em; /*タイトル文字サイズ*/
    background: white; /*タイトル背景色*/
    color: #95ccff; /*タイトル文字色*/
    font-weight: bold; /*タイトル文字太さ*/
}

HTML

<div class="waku26">
<span class="box-title">ポイント</span>
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

ポイント
サンプル１
サンプル２
サンプル３

ラベルを付けた枠

CSS

/*ラベルを付けた枠*/
.waku27 {
    position: relative; /*通常の表示位置が基準*/
    margin-top: 3em; /*上側余白*/
    margin-bottom: 1em; /*下側余白*/
    padding-left: 1em; /*内側の余白左側*/
    padding-bottom: 1em; /*内側の余白下側*/
    border: solid 3px #62c1ce; /*枠線*/
}
.waku27 .box-title {
    position: absolute; /*親要素の左上基準*/
    display: inline-block; /*横並び*/
    top: -40px; /*ラベル位置*/
    left: -2px; /*ラベル位置*/
    padding: 10px; /*ラベル余白*/
    height: 40px; /*ラベル高さ*/
    line-height: 25px; /*ラベル位置*/
    vertical-align: middle; /*文字位置*/
    font-size: 1.5em; /*ラベル文字サイズ*/
    background: #62c1ce; /*ラベル背景色*/
    color: #ffffff; /*ラベル文字色*/
    font-weight: bold; /*ラベル文字太さ*/
    border-radius: 5px 5px 0 0; /*ラベル角の丸み*/
}

HTML

<div class="waku27">
<span class="box-title">ポイント</span>
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

ポイント
サンプル１
サンプル２
サンプル３

枠内にラベル

CSS

/*枠内にラベル*/
.waku28 {
    position: relative; /*通常の表示位置が基準*/
    margin: 2em 0; /*枠の周りの余白*/
    padding: 10px; /*内側の余白*/
    border: solid 3px #FFC107; /*枠の線*/
}
.waku28 .box-title {
    position: absolute; /*親要素の左上基準*/
    display: inline-block; /*横並び*/
    top: -2px; /*ラベル位置*/
    left: -2px; /*ラベル位置*/
    padding: 5px; /*ラベル内側余白*/
    height: 30px; /*ラベル高さ*/
    line-height: 25px; /*ラベル位置*/
    vertical-align: middle; /*文字位置*/
    font-size: 1.2em; /*ラベル文字大きさ*/
    background: #FFC107; /*ラベル背景色*/
    color: white; /*ラベル文字色*/
    font-weight: bold; /*ラベル文字太さ*/
}

HTML

<div class="waku28">
<span class="box-title">ポイント</span>
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

ポイント
サンプル１
サンプル２
サンプル３

タイトル横幅いっぱい枠

CSS

/*タイトル横幅いっぱい枠*/
.waku29 {
    margin: 2em 0; /*枠外側の余白*/
    background: #dcefff; /*枠背景色*/
}
.waku29 .box-title {
    font-size: 1.2em; /*タイトル文字サイズ*/
    background: #5fb3f5; /*タイトル背景色*/
    padding: 4px; /*タイトル余白*/
    text-align: center; /*タイトル位置*/
    color: white; /*タイトル文字色*/
    font-weight: bold; /*タイトル文字太さ*/
    letter-spacing: 0.05em; /*タイトル文字間隔*/
}
.waku29 p {
    padding: 15px 20px; /*文字余白*/
    margin: 0; /*文字余白*/
}

HTML

<div class="waku29">
<div class="box-title">ポイント</div>
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

ポイント

サンプル１
サンプル２
サンプル３

アイコン付き枠

CSS

/*アイコン付き枠*/
.waku30 {
    margin: 2em 0; /*枠の外側余白*/
    background: white; /*枠の色*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); /*影*/
}
.waku30 .box-title {
    font-size: 1.2em; /*タイトル文字サイズ*/
    background: #5fc2f5; /*タイトル背景色*/
    padding: 4px; /*タイトル文字余白*/
    text-align: center; /*タイトル文字位置*/
    color: white; /*タイトル文字色*/
    font-weight: bold; /*タイトル文字太さ*/
    letter-spacing: 0.05em; /*タイトル文字間隔*/
}
.waku30 p {
    padding: 15px 20px; /*枠の中の文字の余白*/
    margin: 0; /*枠の中の文字の余白*/
}
.fa{
    display: inline-block; /*横並び*/
    font: normal normal normal 14px/1 FontAwesome; /*アイコンの種類*/
    font-size: inherit; /*アイコンの大きさ*/
}

HTML

<div class="waku30">
<div class="box-title"><i class="fa fa-check"></i>ポイント</div>
サンプル１
サンプル２
サンプル３
</div>

記事をプレビュー表示したとき

ポイント

サンプル１
サンプル２
サンプル３