【HTMLのみ】ボックスデザイン集

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

「HTML編集」に直接貼り付けたら、そのまま使える。

 ※そのままコピペOK。

使い方

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

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

上乗せタイトル

上乗せタイトル

ここに説明文

HTML

<div style="position: relative;margin: 2em 0;padding: 0.5em 1em;border: solid 3px #95ccff;border-radius: 8px;">
    <span style="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;">上乗せタイトル</span>
    <p style="margin: 0; padding: 0;">ここに説明文</p>
</div> 

タブ付きタイトル

タブ付きタイトル

ここに説明文

HTML

<div style="position: relative;margin: 0;padding: 0;border: solid 3px #95ccff;background:#fff;">
    <span style="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;">タブ付きタイトル</span>
<p style="margin: 2; padding: 2;">ここに説明文</p>
</div>