ブログを書いていると、「ここ大事なところだから強調したい」や「ほかにもこんなのがおすすめです」など文字をボックスで囲いたくなることってありますよね！
今回は、自分のブログをもっと見やすくするために、ボックス(囲い枠)の作成方法を簡単に作成する方法をご紹介していきたいと思います！！
それでは行ってみましょう！
ボックスデザイン(囲い枠)の作り方
HTMLの記述内容
<div class="box27">
<span class="box-title27">ボックスのタイトル</span>
<ul>
<li>箇条書きにしたい内容①</li>
<li>箇条書きにしたい内容②</li>
<li>箇条書きにしたい内容③</li>
</ul>
</div>
リンク先を記述する場合
<div class="box27">
<span class="box-title27">一緒に読みたい</span>
<ul>
<li><a href="載せたい記事のURL">記事名</a></li>
<li><a href="載せたい記事のURL">記事名</a></li>
<li><a href="載せたい記事のURL">記事名</a></li>
</ul>
</div>
CSSの記述内容
/*囲い枠の設定*/
/* Responsive:yes */
.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
/*囲い枠の見出しに対する設定*/
.box27 .box-title27 {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
/*リストの先頭にある"・"を見えなくする*/
ul{
list-style:none;
}
/*リスト内のテキストの先頭にアイコンを設定する*/
.box27 ul li:before {/*疑似要素*/
font-family: "FontAwesome";
content: "\f138";/*アイコンの種類*/
position: absolute;
left : 1em;/*左端からのアイコンまでの距離*/
color: #ffbb00;/*アイコン色*/
}
プレビュー
- 箇条書きにしたい内容①
- 箇条書きにしたい内容②
- 箇条書きにしたい内容③
いかがでしょうか？無事反映されましたでしょうか？
CSSが反映されない場合の対処法
HTMLもCSSもきちんと記述しているのに、全く反映されないことがある場合は基本的に原因は以下の3つの可能性が高いです。
- ・HTMLの誤字
- ・”<></>”や"{}"・";"などの閉じ忘れ
- ・キャッシュが原因でうまく機能していない
上記の原因が高いと考えられます。
個人的に一番多いのではないかと思うのは"{}"の閉じ忘れは一番多いのではないかと思います。
注意するときのポイントは、現状の記述で問題が起きたときは過去に自分が記述した部分に問題がある可能性を考えることです。
私も”｛｝”閉じ忘れに気づかず、CSSが反映されないことにずっと悩んでいたところ誤りに気付きました。
まさに盲点であり、新しく記述したCSSコードに問題があるとばかり考えていたため、まったく気づくことができなかったです…
本当にお恥ずかしい（笑）
そのため、問題が起きたときは過去の自分の記述まで疑ってみることを心がけましょう。
最後に
ボックス(囲い枠)を使用したい人や、どうやって記述すればいいのか悩んでいる人は、ぜひ参考にしてみてください！！