以前、CSSとHTMLで作る囲み枠（ボックス装飾）についての記事を書きました。
その記事はこちらyunico-fluffylife.com
／ありがとうございます·͜·＼
前回の記事に『記事の中でCSSコードを使う方法』を追記しましたが、今回は『CSSを一切使わずに、コピペで使える囲い枠』をご紹介します。
せっかくなので、前回ご紹介したデザインと同じものをHTMLのみで組み立ててみました！
囲み枠を使うメリット
- コンテンツをグループ化できる。
- 情報の優先順位を伝えやすくなる。
- ページの内容にメリハリができる。
- サイトの外観を整えることができる。
はてなブログもデザインCSSの編集はスマホからの操作が大変なので、HTMLのみで作る方が楽な場合もあると思います。そんな時に参考にしてもらえると嬉しいです。
HTMLコードの使い方
写真はクリック・タップで拡大できます。
補足（定型文に登録）
よく利用するデザインは定型文に登録しておくと繰り返し使うのに便利です。
はてなブログでは記事の作成画面から定型文を作ることができます（上記画像）。
シンプル系
Box1.実線
使いやすい、シンプルな枠線です。
枠の種類・色・太さはお好みで変えてみてね。
枠の種類・色・太さはお好みで変えてみてね。
<div style="border: 1px solid #BEAF98; padding: 10px;">ここに文字を記入します。</div>
Box2.丸み実線
Box1の角に丸みをつけました。
少し柔らかい印象になると思います。
少し柔らかい印象になると思います。
<div style="border: 1px solid #BEAF98; border-radius: 15px; padding: 10px 15px;">ここに文字を記入します。</div>
Box3.背景ボックス
シンプルな背景ボックスです。
濃い色を背景にする場合は、文字の色を白系にしてくださいね。
濃い色を背景にする場合は、文字の色を白系にしてくださいね。
<div style="border:none; background: #ECE8E1; padding: 10px;">ここに文字を記入します。</div>
Box4.丸み背景ボックス
Box3の角に丸みをつけました。
目立たせたい部分に使いやすいと思います。
目立たせたい部分に使いやすいと思います。
<div style="border:none; background: #ECE8E1; border-radius: 15px; padding: 10px 15px;">ここに文字を記入します。</div>
Box5.交差する線
4つある『linear-gradient(#BEAF98,#BEAF98)』を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(#BEAF98,#BEAF98), linear-gradient(#BEAF98,#BEAF98), linear-gradient(#BEAF98,#BEAF98), linear-gradient(#BEAF98,#BEAF98);">ここに文字を記入する。</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 … 点線
「色や形を変えてみたいけど、どこを書き換えたらいいのかわからない🤔」
そんな時はお気軽にコメントなどでお知らせください！
そんな時はお気軽にコメントなどでお知らせください！
CSSの有無の違い
前回ご紹介した『CSS+HTMLで作る囲み枠』と今回の 『HTMLのみで作る囲み枠』、この2つの違い・特徴を簡単にまとめました。
ちょっとした補足としてさら〜りと読んでみてください。
CSS＋HTML
- デザインはCSSで一括管理するため記事に書くのは短いHTMLのみで済み、「いつも変わらないデザイン」を複数の場所で使い回すことが可能です。
- デザインを変えたい時はCSSの“変更したい部分”を書き換えるだけで、サイト内で対応している全ての箇所を一括で変更できます。
- はてなブログはデザインCSSを編集する画面がPCモードでしか使えないため、パソコン環境がないと設定のしづらさがあります。スマホでも操作しやすくなるといいなー。
HTMLのみ
- デザイン構造も含めて、一つのタグ（英数字の文字列）に全てが書かれているのが特徴です。
- HTMLを書き込む（コピペ）だけなので比較的簡単に使用できますが、デザインの変更が必要になった場合は1つずつ手動で変える必要があります。
- HTMLのみでは作れないデザインがあります。
前回と同じデザインをHTMLだけで組み立てましたが、『メモ風ボックス』『ちょっとずれた枠のボックス』『テープ部分にタイトル』がないのにお気づきでしょうか( ⍨ )これらのデザインは複雑な構成なためCSSを組み合わせる必要があり、HTMLのみでは作ることができませんでした՞
コピペですぐに使えるHTML枠線・ボックス装飾をご紹介しました！
CSSを使う必要が無いので、より簡単にお使いいただけると思います。ぜひサイトの装飾に使ってみてくださいね。
