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>

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

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

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

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

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

まとめ

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

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

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