自分のサイトやブログで使えるHTMLの囲み枠の効率的な作り方

今回は、サイトやブログで使えるオシャレで実用的な囲み枠と、その活用方法を紹介します。

HTML、CSSの使い方をよく知っている方であれば、自分で１から囲み枠を作るのは簡単かもしれません。

ただ、あまり詳しくないとか、久々でHTMLやCSSを忘れてしまったといった方は結構多いはずです。。

そんな時は、既にオシャレな囲み枠を紹介してくれている方のサイトを参考にしてみましょう。そして、優秀な先人達が紹介してくれた囲み枠の作り方を参考にして、そこからアレンジを加え、自分なりの囲み枠を作るのがオススメです。
※本サイトで過去に紹介した囲み枠の作り方に関する記事も紹介します。

囲み枠を使いこなせるまでの流れ

自分なりの囲み枠を作るまで流れは人それぞれだと思いますが、個人的には以下の様な流れで囲み枠を何度か使っていると、自分なりに囲み枠を使いこなせる様になると思います。

HTMLで囲み枠を作る際に参考にすべきサイト・ブログ

最初にHTMLで囲み枠を作る際に参考にすべきサイトやブログを順番に紹介していきます。

今回紹介するサイト・ブログでは、囲み枠のHTMLもそのまま紹介してくれていますので、非常に参考になります。

これらのサイト・ブログを参考にすると、

すごく簡単なんです！

大抵の場合、以下のサイト・ブログを参考にすると、主な囲み枠は作れると思います。

もかさんのブログ

「もかさん」のブログには、記事タイトルにもある通り「かわいい囲み枠」がたくさんあります。

可愛らしいデザイン・女性らしいデザインにしたい場合に参考になります。

また、基本的なHTMLの組み合わせでできているので、誰でも参考にしやすい内容です。

URL：https://www.moca-memo.com/2019/10/kakomiwaku.html

サルワカさんのサイト

「サルワカさん」のサイトでは、少し凝った囲み枠のパターンが色々と紹介されています。

HTMLも参考になりますが、デザインセンスが良く、使用されている配色なども勉強になります。
※Photoshopの使い方等も紹介されており、デザインスキルに長けた方ですね。

センスが良くて一風変わった囲み枠を使いたい！という場合に非常に参考になります。

URL：https://saruwakakun.com/html-css/reference/box

※ほとんどの囲み枠のサンプルがHTMLとCSSのコードに分かれています。HTMLだけで記述する場合は少し工夫が必要です。

アメブロメーカーさんのブログ

「アメブロメーカーさん」のブログではアメブロ向けの囲み枠を紹介されていますが、一般的なサイトでも全然活用できます！

これまでに紹介させていただいた方と同じ様な囲み枠も結構多いですが、こちらのサイトではブラウザ上で色の変更も可能で、自分好みの色をブラウザ上で作成できてしまいます。しかも、とにかく大量のサンプルがあります。

たくさんのサンプルの中から、自分が使いたい囲み枠を探したいという方にオススメです。

URL：https://nk-media.org/box/

自分で囲み枠アレンジする

自分で以下をアレンジする事で、自分なりの囲み枠を作成する事ができます。

それぞれ少し詳しく解説します。

HTML・CSSをアレンジする

HTML・CSSを変更する事で、囲み枠の微妙な形状を変更する事ができます。

既に紹介させていただいているサイト・ブログで、色々な囲み枠のサンプルが紹介されていますが、細かい部分は自分で調整をしたい！という場合はHTML・CSSを変更してアレンジしてみて下さい。

HTMLやCSSをいじった事が無いと難しく感じるかもしれませんが、各設定値を変更する程度でも囲み枠の形状を変えられるので、色々といじってみる事をオススメします。各数値を変更するだけで囲み枠の形が変える事ができますので試してみて下さい。

ちなみに、下記のサイトの記事（後半部分）では、囲み枠のサンプルの他にHTMLの具体的な変更方法なども紹介されていますので、参考にしてみて下さい。

URL：枠を付ける-HTMLのお勉強

また、この後でも紹介しますが、本サイトの以下の記事では、ワードプレス上での簡単な囲み枠の設定方法（HTMLやCSSの設定方法）について紹介しています。

URL：AddQuicktagを使ってワードプレスのビジュアルエディタで囲み枠を作る方法！

RGB色をアレンジする

囲み枠のRGB色（線・背景色）を変更すると、囲み枠のイメージがガラッと変わります。

自分なりの配色を見つけて適用させてみる事で、オリジナルの囲み枠も作れる様になります。

RGB色をアレンジする際には、様々なRGB色の情報が載ったサイトを参考にすると良いです。以下のサイトにはWEB上で使用できる様々なRGB色の情報が載っていますので、自分が使いたい色を探してみて下さい。

URL（原色大辞典）：https://www.colordic.org/

URL（カラーコード一覧表）：http://www.netyasun.com/home/color.html

効率的に囲み枠を作るための工夫

気に入った囲み枠があった場合はそれを何度も使いたいと考えると思います。

自分なりに良く使う囲み枠のHTML・CSS・RGB色の情報を整理してまとめておくと便利です。

また、ワードプレスを使用している場合にはプラグイン（AddQuicktag）で、簡単に囲み枠をワンクリックで導入する事ができます。

AddQuicktagを使用した囲み枠の導入方法については以下の記事で詳しく紹介しています。
※非常に簡単にですが、HTMLの変更方法等も紹介していますので、参考にして下さい。

まとめ

今回は、自分のサイトやブログで使える囲み枠と、その活用方法について紹介をしました。

冒頭でもお伝えした通り、素晴らしい囲み枠のサンプル情報が既に公開されています。

先人達の知恵を参考にして、自分なりの囲み枠も作っていきましょう。

変更・追加するタグの内容は一度覚えれば簡単なものも多いので、色々な囲み枠を使いこなす内に、自分なりにアレンジができる様になると思います。