メダカと自転車とetc.

元経理屋がメダカを分析したり、自転車で出かけたりするブログです

MENU

【ブログ設定備忘録】囲い『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);
}

 

 

▼参考にさせていただいたサイトです▼

 

最後まで読んでいただきありがとうございます

インスタグラムはこちら

f:id:historynt-02bs:20210804010034p:plain