HTMLだけでボックスデザイン(囲み枠)を作ってみよう！

今回は、HTMLだけでボックスデザイン(囲み枠)を作る方法をご紹介します。

サイトやブログ記事を書く時に、文章がズラーっと並んでいるだけではどこに注目していいのかわからない時がありますよね。そんな時に便利なのが、ボックスデザイン(囲み枠)です。

HTMLだけで簡単に使えるボックスデザイン(囲み枠)を紹介するよ♫

こんな感じで、伝えたいことを強調したい時に使えます！また、文章をまとめたい時にも便利です。

ボックスデザイン(囲み枠)とは？
ボックスデザイン(囲み枠)の作り方

アレンジの仕方

まとめ

ボックスデザイン(囲み枠)とは？

ボックスデザインは、ブログやWebサイトを作る際に便利です。

例えば・・・POINTをおきたい場所目立たせたい部分目次・まとめ　etc….に使うと締まりのあるページが作れます。

ボックスデザインを作るには、スタイル要素を使います。HTMLとCSSを組み合わせて作るのが一般的ですが、HTMLだけで作成することも可能です。

HTMLとかCSSとかよくわからないという方や、WordPressでブログを書いているけど、追加CSSがよくわからない、テーマエディターを触るのはちょっと心配という方に特にオススメなのがHTMLだけでボックスデザインを作る方法です。

ボックスデザイン(囲み枠)の作り方

コピペで使える、ボックスデザインの作り方をご紹介します。

WordPressでコピペする場合は、テキストエディター(HTMLとして編集)に切り替えてください。

☆シンプルバージョン☆ ◆ 一本枠〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="border: #ff69b4 solid 1px; font-size: 100%; padding: 15px;">〜本文はこちら〜</div> ◆ 波線枠〜本文はこちら〜

＊コピペにはこちら↓を使ってください

<div style="border: #ff69b4 dashed 2px; font-size: 100%; padding: 15px;">〜本文はこちら〜</div> ◆ 点線枠〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="border: #ff69b4 dotted 4px; font-size: 100%; padding: 15px;">〜本文はこちら〜</div> ◆ 二重枠（丸）〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="border: #ff69b4 double 6px; border-radius:15px; font-size: 100%; padding: 15px;">〜本文はこちら〜</div> ◆ 影付き〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="border: #ff69b4 solid 1px; font-size: 100%; padding: 15px; box-shadow: 0 5px 7px 0 #c0c0c0;">〜本文はこちら〜</div> ◆ ふせん風〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="border: #ff69b4 solid 1px; border-left: #ff69b4 solid 8px; padding: 20px; font-size: 100%;">〜本文はこちら〜</div> ☆背景色バージョン☆ ◆ 背景色だけ〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="background: #ffe4e1; border: #ffe4e1 solid 2px; font-size: 100%; padding: 20px;">〜本文はこちら〜</div> ◆ 背景色＋一本線〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="background: #ffe4e1; border: #ff69b4 solid 2px; font-size: 100%; padding: 20px;">〜本文はこちら〜</div> ☆タイトルバージョン☆ ◆ タイトル枠　INタイプ＊タイトル＊〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="background: #ff69b4; border: 1px solid #ff69b4; padding-left: 30px;"><span style="color: #fff;">＊タイトル＊</span></div> <div style="border: 1px solid #ff69b4; font-size: 100%; padding: 20px;">〜本文はこちら〜</div> ◆ タイトル枠　OUTタイプ ＊タイトル＊ 〜本文はこちら〜

＊コピペにはこちら↓を使ってください。

<div style="display: inline-block; background: #ff69b4; padding: 3px 10px; color: #ffffff;"><strong>＊タイトル＊</strong></div> <div style="padding: 10px; border: 2px solid #ff69b4;">〜本文はこちら〜</div>

アレンジの仕方

まず簡単にソースの説明です。シンプルな枠をサンプルにします。

本文はこちら！！

↓↓

HTMLで書くと・・・

<div style=”background: #fffacd; border: orange dotted 2px; font-size: 100%; padding: 20px;”>本文はこちら！！</div>

どんな指定をしているかというと・・・

<div></div> → ここからここまでを指定するよ！ style → 今からデザインをするよ。よろしくね！ background → 背景の色を指定するよ！ : (コロン) → ここからが指定範囲だよ。 #fffacd (カラーコード) → この色がいいな。（簡単な色であれば色での指定も可能です。red や green など） ; (セミコロン) → 指定範囲はここまでだよ。 border → 枠を指定するよ！ orange → 色はこれにして。（カラーコードでの指定でもOKです） dotted → 線の種類はこれで。 ex) solidは１本線、doubleは2本線、dashedは波線、dottedは点線 2px → この太さでよろしく。（数字が大きいほど太くなります） font-size → フォントの大きさを指定するよ！ 100% → この大きさにして。（数字が大きいほど文字が大きくなります） padding → 文字と枠のスペースを指定するよ！ 20px → この幅でよろしく。（数字が大きいほど広くなります）本文はこちら → この部分に本文を入れてね！

こんな風に一つ一つ指定をしています。

なので、指定されている箇所の数字や色を変更すれば、簡単にアレンジできます。上記にない部分で、サンプルに使用している部分をご紹介します。

border-radius: 15px → 丸みをおびた枠にしたいときに使います。 px数が大きいほど丸くなります。 box-shadow: 0 3px 4px 0 → 影をつけるときに使います。左から上・右・下・左の順でpx数を指定します。 padding-left: 30px → 左側の余白だけ欲しいとき。 left を right / top / bottom に変えてもOKです。 border-left: #808000 solid 8px → 左側の線だけの設定。 left を right / top / bottom に変えてもOKです。上と下など、２箇所に指定することもできます。 display: inline-block → ブロックを指定します。（幅と高さを指定できるようになります） <span></span> → 文字の装飾に便利なタグです。（※上記ではタイトルと本文の色分けのために使用） <strong></strong> → 強調したい文字に使います。

カラーコード検索には、原色大辞典が便利です。

WEB色見本原色大辞典 - HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本www.colordic.org

参考）原色大辞典（https://www.colordic.org/）

まとめ

デザインボックス(囲み枠)は、ブログやWebサイトを見やすくわかりやすくしてくれる便利ツールです。

ご自分のサイト内に同じボックスデザインをたくさん使うのであれば、何度も同じ記述をしなくてすむように CSS を利用すると便利ですが、HTMLだけでも、十分ボックスデザインを作ることができます。

HTMLの基本だけ抑えれば、簡単にアレンジをすることができるので、ご自分のサイトに合わせて、いろいろアレンジを楽しんでください♬

📎📎📎📎📎📎📎📎📎📎

BOT