以前、CSSとHTMLで作る囲み枠（ボックス装飾）についての記事を書きました。
今回はCSSを使わずに、コピペで使える囲い枠をご紹介します。せっかくなので、前回ご紹介したものと同じようなデザインで組み立ててみました☻
シンプル系
Box1.実線
使いやすい、シンプルな枠線です。
枠の種類・色・太さはお好みで変えてみてね。
枠の種類・色・太さはお好みで変えてみてね。
<div style="border:1px solid #898AA6; padding:10px 15px;">ここに文字</div>
Box2.丸み実線
Box1の角に丸みをつけました。
少し柔らかい印象になると思います。
少し柔らかい印象になると思います。
<div style="border:1px solid #C6A6B1; border-radius:15px; padding:10px 15px;">ここに文字</div>
Box3.背景ボックス
シンプルな背景ボックスです。
背景色を濃くする場合は文字色を白系にすると良いと思います。
背景色を濃くする場合は文字色を白系にすると良いと思います。
<div style="border:none; background:#FFFBEB; padding:10px 15px;">ここに文字</div>
Box4.丸み背景ボックス
Box3の角に丸みをつけました。
<div style="border:none; background:#FFF2F2; border-radius:15px; padding:10px 15px;">ここに文字</div>
Box5.交差する線
4つある『linear-gradient(#A3C7D6,#A3C7D6)』を1つずつ別の色にすると、遊び心のあるカラフルな枠線を作ることができます。
<div style="padding: 20px 25px; background-size: 1px 1px; background-position: 10px 0,0 10px, right 10px top 0, left 0 bottom 10px; background-repeat: repeat-y, repeat-x, repeat-y, repeat-x; background-image: linear-gradient(#A3C7D6,#A3C7D6), linear-gradient(#A3C7D6,#A3C7D6), linear-gradient(#A3C7D6,#A3C7D6), linear-gradient(#A3C7D6,#A3C7D6);">ここに文字</div>
オシャレ＆可愛い系
Box6.ステッチ調
枠を縫ったような可愛らしいデザインです。
同系色で、背景は薄め・枠線は濃いめで作るのがおすすめ。
同系色で、背景は薄め・枠線は濃いめで作るのがおすすめ。
<div style="border: 2px dashed #B79C8F; background: #F4F0EF; border-radius: 10px; box-shadow:0px 0px 0px 7px #F7F3F1; padding: 10px;">ここに文字</div>
Box7.白枠ステッチ
Box6のステッチを白色にしました。
コードの最後にある『color: #FFFFFF』が文字色です。背景色に合わせて読みやすい文字色に変更してください。
コードの最後にある『color: #FFFFFF』が文字色です。背景色に合わせて読みやすい文字色に変更してください。
<div style="border: 2px dashed #FFFFFF; background: #C1AA9F; border-radius: 10px; box-shadow:0px 0px 0px 7px #C1AA9F; padding: 10px; color: #FFFFFF;">ここに文字</div>
Box8.テープで留めたボックス
メモ紙をテープで留めたようなボックスです。
『width: 35%;（横幅）』
『 height: 40px;（縦幅）』
でテープのサイズを変更できます。
『width: 35%;（横幅）』
『 height: 40px;（縦幅）』
でテープのサイズを変更できます。
<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: 20px 20px 15px;">ここに文字</div>
Box9.ドット背景ボックス
透過した白背景に文字を書くので読みにさがなく、使いやすいと思います。
<div style="border: none; background: #e0e7fa; background-image: radial-gradient(#ffffff 15%, transparent 20%), radial-gradient(#ffffff 15%, transparent 15%); background-position: 0 0, 13px 13px; background-size: 25px 25px; padding: 15px;"><div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div></div>
Box10.ストライプ背景ボックス
『-45deg』はストライプの角度です。
マイナスを消すと左ストライプにできます。
お好みで角度を変えてみてください。
マイナスを消すと左ストライプにできます。
お好みで角度を変えてみてください。
<div style="border: none; background: repeating-linear-gradient(-45deg, #ECE8E1, #ECE8E1 10px, #FFFFFF 10px, #FFFFFF 20px); padding: 15px;"><div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div></div>
Box11.チェック背景ボックス
『rgba(---, ---, ---, ---)』が色の指定です。
カラーコードを透過変換しています（詳しくはカスタマイズ補足の項目を参照）。
カラーコードを透過変換しています（詳しくはカスタマイズ補足の項目を参照）。
<div style="border: none; background-color: #ffffff; background-image: linear-gradient(-45deg,rgba(236, 232, 225, 0.5) 25%, transparent 25%, transparent 50%, rgba(236, 232, 225, 0.5) 50%, rgba(236, 232, 225, 0.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(236, 232, 225, 0.5) 25%, transparent 25%, transparent 50%, rgba(236, 232, 225, 0.5) 50%, rgba(236, 232, 225, 0.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(0deg); padding: 15px;"><div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div></div>
タイトル付き
Box12.ラベルタイトル
ここにタイトル
「書いてあること」「POINT」などのタイトルで使いやすいデザインです。<div style="position: relative; border: 2px solid #C1AA9F; padding: 20px 15px 15px 15px;"><div style="position: absolute; top: -15px; left: 15px; background: #ffffff; color: #C1AA9F; padding: 0 8px;"><b>ここにタイトル</b></div>ここに内容</div>
Box13.背景付きラベルタイトル
ここにタイトル
Box12のタイトル部分に背景をつけました。「関連記事」の項目で使われているのをよく見ますね。
<div style="position: relative; border: 2px solid #C1AA9F; padding: 20px 15px 15px 15px;"><div style="position: absolute; top: -15px; left: 15px; background: #C1AA9F; color: #FFFFFF; padding: 0 8px;"><b>ここにタイトル</b></div>ここに内容</div>
Box14.枠の中にタイトル
ここにタイトル
タイトルを枠の中に入れてスッキリした印象で使えます。
結構目立つので「注意点」などのタイトルで使いやすいと思います。
結構目立つので「注意点」などのタイトルで使いやすいと思います。
<div style="border: 2px solid #C1AA9F;"><div style="display: inline-block; background: #C1AA9F; color: #ffffff; padding: 0 10px"><b>ここにタイトル</b></div><div style="padding: 10px;">ここに内容</div></div>
Box15.枠の中のタイトルに丸み
ここにタイトル
Box14の角1箇所に丸みをつけました。
<div style="border: 2px solid #C1AA9F;"><div style="display: inline-block; background: #C1AA9F; border-radius: 0 0 10px 0; color: #ffffff; padding: 0 10px"><b>ここにタイトル</b></div><div style="padding: 10px;">ここに内容</div></div>
カスタマイズの補足
色やサイズなどを変える際の参考にどうぞ。
- #カラーコード
#で始まる6文字の英数字が色コードです。
その部分を変えると色を変更できます。
WEB色見本 原色大辞典 - HTMLカラーコード - 透過カラーのrgba
rgba(数字, 数字, 数字, 数字)の部分です。
カラーコードをrgbaに変換して入力します。
カラーコードからrgbaへ変換するツール【css】 | WEBクリエイターの部屋 - padding
枠の内側にある余白です。
数字を増やすと余白が広がります。 - border-radius
枠線の丸みを調整します。
数字を増やすと丸みが強くなります。 - background
背景を指しています。このあとに続くカラーコードを変更すると背景の色が変わります。 - 線の種類
☆ solid … 実線
☆ double … 二重線
☆ dashed … 破線
☆ dotted … 点線
「色や形を変えてみたいけど、どこを書き換えたらいいのかわからない」なんて時はお気軽にコメントでお知らせください☻
以上、コピペですぐに使えるHTML枠線・ボックス装飾をご紹介しました！
CSSを使う必要が無いので、より簡単にお使いいただけると思います。ぜひ装飾に使ってみてくださいね。
Related article!
