【HTML・CSS】ボックスデザイン集

この記事では、HTML・CSSを利用したボックスデザインを紹介。

使い方

 HTML、CSSの設定方法がわからない人は、下記記事を参考にしてね。

デザインボックスコード一覧 

上乗せタイトル

上乗せタイトル

ここに説明文

HTML

<div class="box01">
    <span class="box-title">上乗せタイトル</span>
    <p>ここに説明文</p>
</div> 

 

CSS

.box01 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box01 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box01 p {
    margin: 0;
    padding: 0;
}

タブ付きタイトル

タブ付きタイトル

ここに説明文

HTML

<div class="box02">
    <span class="box-title">タブ付きタイトル</span>
    <p>ここに説明文</p>
</div> 

 

CSS

.box02 {
    position: relative;
    margin: 0;
    padding: 0;
    border: solid 3px #95ccff;
    background:#fff;
}
.box02 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #95ccff;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box02 p {
    margin: 0; 
    padding: 0;
}