【ブログ設定備忘録】囲い『box』

f:id:historynt-02bs:20220214224346j:plain

毎日お疲れさまです

管理人です

今回は

【ブログ設定備忘録】囲い『box』

です

最後までよろしくお願いします

【ブログ設定備忘録】囲い『box』
- 囲み一覧

当ブログで使用しているコードです

web上でコピペさせていただいたものを加工しています

コピペできるようにしていますので、ルールを守ってお好きにお使いください

www.hobbylife1981.com

囲み一覧

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);
}