1. シンプルエレガント枠
これはシンプルな囲み枠の例です。控えめなデザインなので、どんなコンテンツにも合わせやすいです。
使用シーン:プロフィール情報、基本的なお知らせなど、シンプルに情報を伝えたい場合に最適です。
<div style="border: 1px solid #ccc; padding: 20px; margin-bottom: 15px;"> <p>ここにコンテンツを入れます</p> </div>
2. 角丸ソフト枠
角が丸くなっていて柔らかい印象を与える枠です。優しい雰囲気を演出します。
使用シーン:お客様の声、ユーザーレビュー、親しみやすい情報を伝えたい場合に適しています。
<div style="border: 1px solid #e0e0e0; border-radius: 10px; padding: 20px; margin-bottom: 15px; background-color: #f9f9f9;"> <p>ここにコンテンツを入れます</p> </div>
3. カラーアクセント枠
左側にカラーアクセントを付けた枠です。視線を引きつける効果があります。
使用シーン:重要なお知らせ、注目してほしい情報、ブログの引用文などに効果的です。
<div style="border-left: 5px solid #3498db; border-top: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 15px; margin-bottom: 15px;"> <p>ここにコンテンツを入れます</p> </div>
4. シャドウボックス枠
影がついた立体的な印象の枠です。コンテンツを浮き上がらせる効果があります。
使用シーン:特典情報、おすすめ商品、重要なコンテンツをより目立たせたい場合に使用します。
<div style="border: 1px solid #e0e0e0; padding: 20px; margin-bottom: 15px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);"> <p>ここにコンテンツを入れます</p> </div>
5. ドット枠
点線で囲んだカジュアルな雰囲気の枠です。親しみやすく、手書き感があります。
使用シーン:クーポン情報、イベント告知、カジュアルな雰囲気を出したい場合に適しています。
<div style="border: 2px dotted #888; padding: 20px; margin-bottom: 15px;"> <p>ここにコンテンツを入れます</p> </div>
6. カラーバックグラウンド枠
薄い色の背景を使った枠です。情報の区切りをわかりやすくします。
使用シーン:補足情報、ヒント、メモ書きなど、本文と区別したい情報に最適です。
<div style="background-color: #f0f8ff; border: 1px solid #add8e6; padding: 20px; margin-bottom: 15px; border-radius: 5px;"> <p>ここにコンテンツを入れます</p> </div>
7. ダブルライン枠
二重線で囲んだ格式高い印象の枠です。重厚感と高級感を演出します。
使用シーン:正式なお知らせ、証書、賞状風のデザイン、格式高い情報の掲載に使えます。
<div style="border: 4px double #999; padding: 20px; margin-bottom: 15px;"> <p>ここにコンテンツを入れます</p> </div>
8. ダッシュライン枠
破線の枠に淡い背景色を組み合わせた、メモ風のデザインです。
使用シーン:メモ、Tips、ちょっとした情報、日記風のコンテンツに適しています。
<div style="border: 2px dashed #888; padding: 20px; margin-bottom: 15px; background-color: #fffaf0;"> <p>ここにコンテンツを入れます</p> </div>
9. グラデーションヘッダー枠
タイトルが入ります
グラデーションのヘッダーがついた枠です。目を引く効果があります。
使用シーン:見出しが必要な情報ボックス、商品紹介、サービス紹介など、区分けされた情報表示に適しています。
<div style="border: 1px solid #ddd; margin-bottom: 15px;"> <div style="background: linear-gradient(to right, #3498db, #2c3e50); color: white; padding: 10px 20px;"> <h3 style="margin: 0;">タイトルが入ります</h3> </div> <div style="padding: 15px 20px;"> <p>ここにコンテンツを入れます</p> </div> </div>
10. モダンカラー枠
濃い色の背景に白い文字で表示する、現代的でスタイリッシュな枠です。
使用シーン:強調したい引用文、キャッチコピー、クールな印象を与えたいコンテンツに最適です。
<div style="border: none; border-radius: 5px; background-color: #34495e; color: white; padding: 20px; margin-bottom: 15px;"> <p>ここにコンテンツを入れます</p&