毎日お疲れさまです
管理人です
今回は
【ブログ設定備忘録】囲い『box』
です
最後までよろしくお願いします
【ブログ設定備忘録】囲い『box』
当ブログで使用しているコードです
web上でコピペさせていただいたものを加工しています
コピペできるようにしていますので、ルールを守ってお好きにお使いください
囲み一覧
1. はみ出し囲み
はみ出し囲み
きっちりとした囲みではなく少し崩したデザイン
中央揃えなので注目させたい時にオススメ
HTML表示
<div class="box17">
<p>
<span style="color: #ff0000;">
はみ出し囲み
</span>
</p>
</div>
CSS表示
/* はみ出し囲み */
.box17{
margin:2em 0;
position: relative;
padding: 0.5em 1.5em;
text-align: center;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
.box17:before, .box17:after{
content: '';
position: absolute;
top: -10px;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
margin: 0;
padding: 0;
}
2. タイトル付囲み(水色)
タイトルがついた囲みデザイン
自己紹介や公式などに使っています
HTML表示
<div class="box27"> <span class="box-title"> タイトル付囲み(水色) </span> </div>
CSS表示
/* タイトル付囲み(水色) */
.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box27 .box-title {
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;
}
.box27 p {
margin: 0;
padding: 0;
}
3. タイトル付囲み(黒)
タイトルがついた囲みデザイン
複数あるグループのまとめに使っています
HTML表示
<div class="box26"> <span class="box-title"> タイトル付囲み(黒) </span> </div>
CSS表示
/* タイトル付囲み(黒) */
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #000;
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #F00;
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}
4. 囲みボックス
HTML表示
<div class="box11"> ここに文字を入力 </div>
CSS表示
/* 囲みボックス */
.box11{
padding: 0.5em 1em;
margin: 2em 0;
color: #5d627b;
background: clear;
border-top: solid 5px #5d627b;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
▼参考にさせていただいたサイトです▼
最後まで読んでいただきありがとうございます