CSSコード不要で、コピペですぐに使える囲い枠・ボックス装飾をご紹介します。前回のCSSを使ったボックス装飾が好評だったので、同じようなデザインで作ってみました。
CSSを使うボックスはこちら
yunico-fluffylife.com 更新情報
| '24/10/24 | 生成方法をカラーピッカー選択から、カラーコード入力に変更しました。 |
|---|---|
| '24/10/23 | デザイン生成ジェネレーターを導入しました。 |
必読┃はじめに
ご紹介しているコードは皆さまが個人のウェブページで使用することを目的として公開しています。
ジェネレーターで作ったコードを配布（色違いを複数生成し、コード紹介と称して掲載する行為など）することを禁じます。
カラーコードについて
コードを生成するためにカラーコードを入力する必要があります。カラーコードは以下のサイト様から探すのがおすすめです。
www.colordic.org
シンプル系
Box.1 実線
ここに文字が入ります。
枠線の色と太さ、文字色を変更できます。
枠線の色と太さ、文字色を変更できます。
<div style="border:3px solid #C1AA9F; padding:10px 15px; color:#000000;">ここに文字</div>
Box.2 丸み実線
ここに文字が入ります。
Box1の角に丸みを追加できます。
Box1の角に丸みを追加できます。
<div style="border:3px solid #C1AA9F; border-radius:20px; padding:10px 15px; color:#000000;">ここに文字</div>
Box.3 背景
ここに文字が入ります。
背景色と文字色を変更できます。
背景色と文字色を変更できます。
<div style="background:#E5DCD7; padding:10px 15px; color:#000000;">ここに文字</div>
Box.4 丸み背景
ここに文字が入ります。
box4に角の丸みを追加できます。
box4に角の丸みを追加できます。
<div style="border:none; background:#E5DCD7; border-radius:20px; padding:10px 15px; color:#000000;">ここに文字</div>
Box.5 交差する実線
ここに文字が入ります。
枠線の色や太さ、文字色を変更できます（選択欄が長いのでスマホの場合は横にスクロールしてくださいね）。
見本の枠線は全て同じ色にしていますが1本ずつ色を変えてみても可愛いかもしれません。
枠線の色や太さ、文字色を変更できます（選択欄が長いのでスマホの場合は横にスクロールしてくださいね）。
見本の枠線は全て同じ色にしていますが1本ずつ色を変えてみても可愛いかもしれません。
オシャレ＆可愛い系
Box.6 ステッチ調
ここに文字が入ります。
ステッチ調の枠線の色・太さ・丸み/背景色/文字色を変更できます（選択欄が長いのでスマホの場合は横にスクロールしてくださいね）。
ステッチ調の枠線の色・太さ・丸み/背景色/文字色を変更できます（選択欄が長いのでスマホの場合は横にスクロールしてくださいね）。
<div style="border:2px dashed #C1AA9F; background:#F4F0EF; border-radius:15px; box-shadow:0px 0px 0px 7px #F7F3F1; padding:10px 15px; color:#000000;">ここに文字</div>
背景を濃いめの色にして、枠線と文字色を白にするのも可愛いですよ⟡.·
Box.6 - 表示調整
このステッチ調ボックスは、使用するウェブページの既存のデザインによって両サイドが画面に隠れてしまう場合があります。
そうなってしまった場合は、コードの最後の方にあるcolor:#······;（文字を入力する直前）の後ろに
width: 85%; margin: 0 auto;
widthで横幅のサイズ/marginで表示位置の調整をして、両サイドが画面に隠れないようにします。
Box.7 テープで留めたメモ風
ここに文字が入ります。
メモとテープ部分の色・テープの長さ・文字色が変更できます。
メモとテープ部分の色・テープの長さ・文字色が変更できます。
<div style="background: #ccccbb; opacity: 0.15; transform: rotate(-2deg); width: 35%; height: 40px; margin: 0 auto -1em auto;"></div><div style="background: #f4f0ef; padding: 25px 20px 15px; color: #000000;">ここに文字</div>
Box.8 ドット背景
ここに文字が入ります。
背景と文字色が変更できます。
背景と文字色が変更できます。
<div style="border:none; background:#E5DCD7; background-image:radial-gradient(#ffffff 15%, transparent 20%), radial-gradient(#ffffff 15%, transparent 15%); padding:15px;"><div style="background-color:rgba(255, 255, 255, 0.8); padding:10px; color:#000000;">ここに文字</div></div>
Box.9 ストライプ背景
ここに文字が入ります。
背景と文字色が変更できます。
背景と文字色が変更できます。
<div style="border:none; background:repeating-linear-gradient(-45deg, #E5DCD7, #E5DCD7 10px, #FFFFFF 10px, #FFFFFF 20px); padding:15px;"><div style="background-color:rgba(255, 255, 255, 0.8); padding:10px; color:#000000;">ここに文字</div></div>
Box.10 チェック背景
ここに文字が入ります。
背景と文字色が変更できます。透過度の±で背景の見え方を調整してください☻
背景と文字色が変更できます。透過度の±で背景の見え方を調整してください☻
タイトル付き
Box.11 シンプルなタイトル
ラベルタイトルⅠ
枠線の色と太さ・タイトルの文字色・内容の文字色が変更できます。
Box.12 背景付きタイトル
ラベルタイトルⅡ
Box12のタイトルに背景が付きました。
選択欄が長いのでスマホの場合は横にスクロールしてくださいね。
選択欄が長いのでスマホの場合は横にスクロールしてくださいね。
Box.13 枠の中にタイトル
ラベルタイトルⅢ
タイトルが枠線の中に入りました。
選択欄が長いのでスマホの場合は横にスクロールしてくださいね。
選択欄が長いのでスマホの場合は横にスクロールしてくださいね。
Box.14 枠の中に丸みタイトル
ラベルタイトルⅣ
Box13のタイトルに丸みを付けました。
選択欄が長いのでスマホの場合は横にスクロールしてくださいね。
選択欄が長いのでスマホの場合は横にスクロールしてくださいね。
おわりに
コピペですぐに使える囲み枠・ボックス装飾をご紹介しました。
囲み枠・ボックスはウェブページを「より読みやすく」してくれるツールです。ご自身のページに合わせてデザインを調節して取り入れてみてくださいね。
関連記事はこちら
yunico-fluffylife.com