こんにちは、Kome（@chankomeppy）です。
ブログ記事を書く際、 文章を強調したり、補足したり、まとめたりするのに便利なのが「囲み枠」による装飾です。
囲み枠とは、こういうやつです。
枠で囲うと目立ちます。
文章だけの記事は読みにくいです。適度に囲み枠を使用してアクセントをつけてあげると一気に読みやすさが増します。
使ってみたいけどCSS？HTML？なんてよくわからないし、私には難しそうだな･･･
全然難しくないよ！誰でもすぐに自分オリジナルの囲み枠を作れるようになるよ！！
シンプルなものであれば、HTMLやCSSについて必要最低限の知識があれば、すぐに自分で作れます。
誰かが作ったものをコピペして使うもお手軽でいいですが、ブログのテーマに合わせて自分オリジナルの囲み枠を作ってみたいですよね。
また、「今後さらにカスタマイズをしたい！」と思っている方は、コピペだけではいつか限界が訪れるので（経験者は語る）、この記事で説明するHTML・CSSの意味は最低限理解しておきたいところです。
この記事では、初心者の方でもオリジナルのシンプルな囲み枠を自力で作れるように、囲み枠作成に必要なHTMLとCSSについて詳しく解説します。
- divタグを使った基本的なカスタマイズ方法
- 基本的なCSSプロパティ
▼目次はこちら （クリックして表示）
基本の囲み枠（完成例）
この記事で紹介するポイントを押さえれば、自由自在にシンプルな囲み枠が作成できます。以下の5つの囲み枠はその例です。
See the Pen Simple Box by chankome (@chankome) on CodePen.
囲み枠のHTML
<div class="クラス名"> <p>ここに本文を入力します</p> </div>
HTMLとタグ
HTML（Hyper Text Markup Language）とは、Webページの文書構造を作るための言語で、タグというマーク（命令）を使ってHTML文書の構造（ここからここまでは見出し、ここからここまでは段落など）を指定します。
今回使用するタグは divタグと spanタグです。
division（区分）のタグ、つまり
<div>～</div>で囲った要素をひとつのかたまりとしてグループ化する際に使用します。単体では意味を持ちません。paragraph（段落）のタグ、つまり
<p>～</p>で囲った部分をひとつの文章のかたまりとし、段落分けする際に使用します。段落という意味を持ちます。HTMLタグについてもっと知りたい方は、こちらの記事をご確認ください。
囲み枠をはじめ、様々なカスタマイズに登場するのが「divタグ」です。
通常、HTMLタグは「見出し」だったり「段落」だったり、何かしらの意味を持っています。しかし、divタグは意味を持たずに囲った部分をグループ化するので様々な部分に挿入することができ、CSSを反映させることで様々なスタイルを表現することができます。
ブログカスタマイズをする上で、divタグはいつもお世話になる超重要タグです！
囲み枠の場合、divタグが囲み枠部分、pタグが囲み枠内の段落（テキスト部分）となります。
divタグの中にpタグがあるのですが、divタグが親要素、pタグが子要素とないります。
divタグにクラス名を付与し、CSSを反映させれば簡単に囲み枠をカスタマイズできます。
この記事では、divタグに「box-simple」というクラス名を付けて話を進めていきますが、実際には自分が分かりやすいクラス名を命名してください。
divの中にpがあるんだね！囲み枠の構造は理解したよ！
HTMLの編集方法
見たままモード
HTML編集画面に入力
Markdown
編集画面にそのまま入力
はてなブログの場合、見たままモードの場合はHTML編集画面に切り替えて入力、Markdownの場合は編集画面に直接入力します。
HTMLコードを多用するなら普段からMarkdownモードを使う方が便利です。
囲み枠のCSS
CSSとはCascading Style Sheetの略で、HTMLで形作られた文書構造のスタイルを決めるものです。線をつけたり、背景色をつけたり、デザインを施すことができます。
スタイルの種類（線や背景色）のことをプロパティといい、{ }で囲むようにして記述します。
.クラス名{プロパティ: 値;}
それでは早速、CSSで囲み枠のデザインを作ってみましょう！
divタグ部分
divタグのクラス「box-simple」にスタイルを指定していきます。
今回divタグに使用するプロパティは、以下の5つのみです！
- margin
- padding
- border
- border-radius
- background
上の5つのプロパティを使いこなせれば、自由自在にシンプルな囲み枠を作れます。
余白（margin, padding）
まずはじめに、囲み枠内外の余白を設定します。
外側の余白を表すプロパティは「margin」、内側の余白を表すプロパティは「padding」です。
▼余白のイメージ図
CSSで余白を指定すると以下のようになります。
.box-simple(クラス名) { margin: 1em; padding: 1em; }
余白の値は、px（ピクセル）やem（エム）で表します。
pxとは絶対値、emとは親要素（この場合はブログ本文）の文字サイズに基づいて自身を1とする相対値です。
親要素の文字サイズが18pxに指定されていたら1em=18px、16pxに指定されていたら1em=16pxということになります。また、親要素の文字サイズが特に指定されていない場合は1em=16pxが基準となります。
どの単位を使うかは個人のお好みもあるかと思いますので、使いやすい方を使用してみてください。
例では上下左右の余白をすべて1emに指定していますが、値の入力方法によって上下左右に異なる余白幅を指定できます。
- margin: 1em;
⇒ 上下左右の余白は1em - margin: 1em 10px;
⇒上下の余白は1em、左右の余白は10px - margin: 1em 0 2em;
⇒上の余白は1em、左右の余白は0（余白なし）、下の余白は2em - margin: 1em 0.5em 0.5 1em;
⇒ 上の余白は1em、右の余白は0.5em、下の余白は0.5em、左の余白は1em（上の余白から時計回りの順番）
paddingの場合も同様に指定できます。
marginで囲み枠の外側、paddingで囲み枠の内側の余白を設定するんだね！
線（border）
次に、囲み枠の枠線を設定します。
枠線を表すプロパティは「border」です。
▼枠線のイメージ図
borderプロパティでは、線の太さ、種類、色をまとめて指定できます。CSSで枠線を指定すると以下のようになります。
.box-simple(クラス名) { border: 1px solid #000000; }
線の種類は以下から選ぶことができます。
- solid
⇒ 一本線 - double
⇒ 二本線 - dashed
⇒ 破線 - dotted
⇒ 点線 - groove
⇒ 立体的にくぼんだ線 - ridge
⇒ 立体的に隆起した線 - inset
⇒ 上と左の線が暗く、下と右の線が明るく表示され、立体的にくぼんだ線 - outset
⇒ 上と左の線が明るく、下と右の線が暗く表示され、立体的に隆起した線
See the Pen BaoXrWL by chankome (@chankome) on CodePen.
最後の4つはあまり見かけませんが、参考までに。
囲み枠を目立たせい場合は線を太くしたり、二重線にしたりすればいいね！
角を丸くする（border-radius）
「border-radius」プロパティを使えば、枠線の角を丸くすることができます。何も設定しなければ、四角いままです。
CSSで角の丸さを表現すると以下のようになります。
.box-simple(クラス名) { border-radius: 10px; }
プロパティ値は円の半径値を示しているので、このように角が丸くなります。
また、値を2つ指定すれば、左上と右下、右上と左下の角を異なる半径値で丸くすることができます。
.box-simple(クラス名) { border-radius: 0 10px; } .box-simple(クラス名) { border-radius: 30px 15px; }
See the Pen kadomaru by chankome (@chankome) on CodePen.
角を丸くすることで、柔らかい印象になるね！5px, 10pxあたりがどんなデザインにも合いそう！
背景色（background）
「background」プロパティを使えば、背景色を設定することができます。何も設定しなければ透明です。
CSSで表すと以下のようになります。
.box-simple(クラス名) { background: #aaaaaa; ←色を指定 }
色は16進数（例：#aaaaaa）またはrgba（例：rgba(170,170,170)）の形式で示すのが一般的です。
16進数とrgbaの色コードは以下のサイトから確認できます。
色によっては、カラーネームで示すこともできます。
例：black, blue, green, red等
カラーネームこちらのサイトから確認することができます。
16進数・rgbaで示す場合は、透明度も同時に指定できるので、必要に応じて設定してみてください。
16進数：#aaaaaa80
rgba：rgba(170,170,170,0.8)
水色の部分が透明度を示しており、16進数の場合は100が不透明、0が透明を表し、rgbaの場合は1が不透明、0が透明を表します。
以下は透明度の例です。黒地の上に4つの透明度が異なる囲み枠（背景色：白）を表しました。参考にしてみてください。
See the Pen RwWXyKV by chankome (@chankome) on CodePen.
枠線なしで薄めの背景色だけの囲み枠なら、存在感が薄いから「補足情報」を伝えるときなどに使えそうだね！
pタグ部分
pタグにもスタイルを指定します。
pタグにクラスは付与していませんが、以下のように記述すれば「囲み枠（.box-simple）の中にあるpタグ」を指定することができます。
.box-simple p {~~~;}
親要素のセレクタ（.box-simple）の次に半角スペース＋子要素（p）＝指定した親要素の中にある全ての子要素にスタイルが適用となります。
囲み枠のpタグで必要となる設定は主に以下の2点です。
- 余白の設定
- 文字サイズや色の設定
余白（margin, padding）
まず余白についてですが、pタグは余白をゼロに設定する必要があります。
何も設定しないと、デフォルト値の余白が適用となります。使用しているテーマによって値は異なりますが、おそらく上下に無駄な空白ができてしまいます。
divタグですでに囲み枠内側の余白（padding）を設定しているので、pタグのmarginとpaddingは強制的にゼロにします。
.box-simple(クラス名) p{ margin: 0; padding: 0; }
見た目を整えるために、pタグの余白はゼロにすればいいんだね！
文字サイズ・色（font-size, color）
次に文字サイズと文字色ですが、以下のプロパティを使って指定することができます。
記事本文と同じで構わない場合は、設定する必要はありません。
- 文字サイズ：font-size
- 文字色：color
CSSでは以下のように記述します。
.box-simple(クラス名) p{ font-size: 90%; color: #999999; }
font-sizeの値は、px, em, %など示します。emと%は、親要素（ブログ記事本文）の文字サイズに対して相対的に何倍、何％で表示するかを示す単位です。親要素の文字サイズが16pxの場合は1em・100%＝16px、0.9em・90％=14.4pxとなります。
文字色の色コードに関しては、背景色（background）の項で説明している通りです。
変更したい場合のみ、設定するんだね！
pタグのスタイルが効かない時の対処法
囲み枠のpタグのスタイルが反映しない！ということがあるかと思います。
というか、はてなブログで何かしらのテーマをインストールして使用していたら効かない可能性が高いです。
なぜ効かないのかというと、利用しているテーマが指定しているデフォルトのスタイルの方が優先順位が高いからです。
はてなブログのテーマでは、記事本文のpタグのスタイルを指定するために、おそらく以下のセレクタが使われています。
- .entry-content p {~}
- .page-entry p {~}
.entry-contentは記事本文エリアのクラス名、
.page-entryは記事ページであることを示すbodyのクラス名です。
つまり、
.entry-content p {~}は記事本文エリアのpタグ、
.page-entry p {~}は記事ページのpタグを示しています。
.box-simple p {~}は囲み枠のpタグを示しますが、どのページのどのエリア、という指定がされておらず上の二つよりも優先順位が低いです。
細かく指定したセレクタの方が優先順位は高くなるので、以下のように記述すれば、テーマで定められたセレクタよりも優先順位が高くなると思います。
.entry-content .box-simple p{~}
記事本文エリアの囲み枠のpタグ
これが効かなかったら...
.page-entry .entry-content .box-simple p{~}
記事ページの記事本文エリアの囲み枠のpタグ
これも効かなかったら...
.box-simple p{ margin: 0 !important; padding: 0 !important; }
「!important」を使って強制的に「最優先」の状態にします。
まとめ
シンプルな囲み枠のHTML
<div class="クラス名"> <p> ここに本文を入力します </p> </div>
シンプルな囲み枠のCSS
.box-simple{ margin: 1em; /*囲み枠外側の余白*/ padding: 1em; /*囲み枠内側の余白*/ border: 1px solid #ffaacc; /*枠線の設定（任意）*/ border-radius: 15px; /*枠外の角丸の設定（任意）*/ background: #dddddd; /*背景色の設定（任意）*/ } .box-simple p { margin: 0; padding: 0; font-size:1em; /*文字サイズ（任意）*/ color:#777777; /*文字色（任意）*/
シンプルな囲み枠を作れたかな？
オリジナルの囲み枠が簡単にできたよ～！
この記事を参考にして、オリジナルの囲み枠を作ってみてください♪
▼基本の囲み枠が作れたら、「タイトル付きの囲み枠」にもチャレンジ！
www.chankome.com
-
リンクPoint
Chapter1でHTMLとCSSの基本について分かりやすく解説されています。「HTMLって何？」「CSSって何？」というビギナーの方にオススメ。Kindle Unlimited対象。
-
リンクPoint
辞書的な感じで使える入門書。はてなブログのカスタマイズでもよく使うCSSが分かりやすくまとまっているので、ブログをこれからどんどんカスタマイズしていきたい！という方にオススメ。
注意事項
この記事で紹介したCSS・HTMLはコピペしてご自由にお使いいただけますが、コードをコピペしてご自身のブログに掲載いただく際は、citeタグで引用元ページのURLをご指定ください。詳しくはプライバシーポリシーにてご確認ください。
