HTMLとCSSを使って、文章をできるだけ簡単に枠線で囲む方法

素材の例文

　素材となる例文は「吾輩は猫である」の冒頭部分を使わせてもらう。<p>…</p>タグ（段落を示すタグ）で挟んだだけのものだ。段落で分けられた文章が表示されるだけのコードだ。

↓

　吾輩は猫である。名前はまだ無い。

　どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

---

---

HTMLだけで囲ってみる

　次に<div>…</div>タグで段落全体を囲って、<div>タグ内のstyleタグでstyle属性を指定してHTMLだけで文章を囲ってみる。

　<div>タグ内に書かれている「style=” … “」の「” … “」で括られた中で指定されているものが「style属性」と呼ばれるもので、本来はCSSで指定する要素（ここではフォントサイズや文章を囲う線の太さ等）をHTML内で指定している。

↓

　記事内で1回だけ囲むだけならこの方法で十分だが、何度も囲みを使ったりデザイン的にブログ内で統一したい場合は、HTMLとCSSに分けた方がメンテナンス性も上がって便利だ。CSSを書き換えるだけでブログ内の「囲み」の仕様を一括で管理できるようになる。

HTMLとCSSに分ける

　HTMLは<div>…</div>タグで段落全体を囲ったものを少し書き換えて使う。

　今度は<div>タグ内のstyleタグの代わりに「class=”…”」を書いて、「”…”」の中に分かりやすい名前をつける。ここでは仮に「kakomu」とする。

※classに付ける名前に使う文字には気をつけたほうがいい。使うのは半角英数文字と半角の記号「-」と「_」だけにしておくのが無難だ。あと文字の先頭に数字は使えない。

　CSS側では<div>で付けた名前「kakomu」に「.」を付けて｛…｝の中に要素を指定していく。

↓

CSSを書き換えて、いろいろな囲みかたをしてみる

　 「class=”…”」 内の名前を書き換えて指定すれば、それぞれの名前に対応したCSSを適用させることができる。（以下の例では、繰り返しになるのでHTMLは省略している）

　名前を「kakomu_a」として、囲み線を太くして色を赤に。文字の色は青に指定してみる。

↓

---

　名前を「kakomu_b」として、こんどは囲み線に影をつけて、背景の色をカラーコードで指定して変えてみる。

↓

　CSSで好みのスタイルに線の形や色を変えて、自分のイメージに合うようにデザインできると、ブログを書くのが一段と楽しくなる。

おまけ：囲んだボックスの下の空白が気になる

　文章を囲ってはみたけれど、なんか下の方に余分な空間があるような気がする……という方もいるかも知れない。

↓　例えばこういうのだ

　これは<p>…</p>タグの改行によるものだ。これを改行しないように「style=”…”」で「display:inline」と指定してやればよい。

　あとは<br>で改行する場所を指定して……

↓

　もしくは<p>はいじらずに<br>の場所だけ指定して、CSSで「.kakomu{…}」とは別に「.kakomu p{…}」と書いて、その中で「display:inline」と指定してやれば ……

↓

↓

　上下の空白が均等になって気持ちがいい。