Lilac Bloom ボックス・枠線デザイン集（全10種）

「注意」「重要」「メモ」など、文章にメリハリをつけるためのボックスデザインです。CSSをカスタムCSSに貼り付けるだけで使用可能です。

[title]HTML: 左ライン[/title]
<div class="lb-box-simple">ここに補足説明や、ちょっとしたメモを記述します。</div>

[title]CSS: 左ライン[/title]
.lb-box-simple {
	padding: 15px;
	background: #f9f5ff;
	border-left: 5px solid #bd93f9;
	color: #333;
}

[title]HTML: 注意アラート[/title]
<div class="lb-box-alert"><strong>注意：</strong> ここは非常に重要な注意書きです。見逃さないでください。</div>

[title]CSS: 注意アラート[/title]
.lb-box-alert {
	padding: 15px;
	background: #fff5f5;
	border: 1px solid #ff7b7b;
	border-radius: 4px;
	color: #c53030;
}

[title]HTML: ポイント[/title]
<div class="lb-box-point">
	<span class="lb-box-title">POINT</span>
	<p>ここがこの記事の最も重要なポイントになります。</p>
</div>

[title]CSS: ポイント[/title]
.lb-box-point {
	position: relative;
	margin-top: 25px;
	padding: 20px 15px 10px;
	border: 2px solid #bd93f9;
	border-radius: 8px;
}

.lb-box-title {
	position: absolute;
	top: -15px;
	left: 15px;
	background: #bd93f9;
	color: #fff;
	padding: 2px 12px;
	font-weight: bold;
	border-radius: 4px;
}

[title]HTML: 点線ボックス[/title]
<div class="lb-box-dashed">忘れてはいけない内容を、ここに箇条書きなどでまとめます。</div>

[title]CSS: 点線ボックス[/title]
.lb-box-dashed {
	padding: 15px;
	border: 2px dashed #bd93f9;
	background: #fff;
	color: #6a5acd;
}

[title]HTML: 影付き[/title]
<div class="lb-box-shadow">ふわっと浮き上がったような、清潔感のあるデザインです。</div>

[title]CSS: 影付き[/title]
.lb-box-shadow {
	padding: 20px;
	background: #fff;
	box-shadow: 0 10px 25px rgba(189, 147, 249, 0.2);
	border-radius: 10px;
}

[title]HTML: ブラケット[/title]
<div class="lb-box-bracket">強調したい引用文や、短いメッセージに最適です。</div>

[title]CSS: ブラケット[/title]
.lb-box-bracket {
	position: relative;
	padding: 20px;
}
.lb-box-bracket::before, .lb-box-bracket::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 3px solid #bd93f9;
}
.lb-box-bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.lb-box-bracket::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

[title]HTML: ストライプ[/title]
<div class="lb-box-stripe">背景に薄いストライプを入れた、目を引くデザインです。</div>

[title]CSS: ストライプ[/title]
.lb-box-stripe {
	padding: 15px;
	background: repeating-linear-gradient(-45deg, #fdfbff, #fdfbff 5px, #f9f5ff 5px, #f9f5ff 10px);
	border: 1px solid #bd93f9;
}

[title]HTML: マーカー風[/title]
<div class="lb-box-marker">全体を淡い色で塗りつぶし、角を丸くした優しい印象のボックスです。</div>

[title]CSS: マーカー風[/title]
.lb-box-marker {
	padding: 15px;
	background: #f1e9ff;
	border-radius: 15px;
	color: #6a5acd;
}

[title]HTML: 二重線[/title]
<div class="lb-box-double">伝統的で落ち着いた印象を与える、二重線の枠組みです。</div>

[title]CSS: 二重線[/title]
.lb-box-double {
	padding: 15px;
	border: 4px double #bd93f9;
	background: #fff;
}

[title]HTML: Q&A風[/title]
<div class="lb-box-question">
	<span class="lb-q-icon">Q</span>
	<p>AIを使ってブログを構築するメリットは何ですか？</p>
</div>

[title]CSS: Q&A風[/title]
.lb-box-question {
	display: flex;
	align-items: center;
	padding: 15px;
	background: #fff;
	border: 2px solid #6a5acd;
	border-radius: 50px;
}

.lb-q-icon {
	background: #6a5acd;
	color: #fff;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-right: 15px;
	font-weight: bold;
}