サイト作成やブログ記事を書いているときに文章を枠で囲うと見栄えが良くなり、メリハリのついた一つのコンテンツと言った感じが出ます。
基本的に共通のHTMLタグで文章を囲うものというと真っ先に思い付くのが＜fieldset＞タグです。
このタグはfieldsetの子要素であるlegendタグと共に以下のように使います。
<fieldset> <legend>タイトル</legend> 枠線で囲まれる文章です。 </fieldset>
しかしこの＜fieldset＞タグは使用しているテンプレートなどによっては上手く表示できないことがあります。
実際に当ブログで以前使用していた賢威では綺麗に表示できません。
そこで、どのようなテンプレートであっても形が崩れず綺麗な囲み（枠）を作る方法をまとめました。
ここで取り上げるのは厳密にいうと、style属性を使っていますのでCSSは使っていますが、別ファイルにCSSを書かずに、divタグ内に書き込む方法です。
※説明がよく分からない人は無視してください。とにかくコピペで使えると思えばOKです。
あまりHTMLとかCSSにあまり慣れていない人は、『とりあえずコピペだけで使えるものが欲しい！』という人が多かったのでその要望に応えてまとめました。
まずはココから押さえろ！枠の基本形
<div style="border: 3px solid;"> 枠線で囲まれる本文 </div>
<div style="border: 3px double;"> 枠線で囲まれる本文 </div>
<div style="border: 3px groove;"> 枠線で囲まれる本文 </div>
<div style="border: 3px ridge;"> 枠線で囲まれる本文 </div>
<div style="border: 3px dotted;"> 枠線で囲まれる本文 </div>
<div style="border: 3px dashed;"> 枠線で囲まれる本文 </div>
これが基本形です。
style=””のダブルクォーテーションの中にある『○○px』という部分と『solid等』という部分を変えることによって線の形を変えていきます。
○○pxの方は線の太さで、数字を大きくすればするほど線は太くなります。
一方、その後に続く要素は線のスタイルを決定します。
以下に線のスタイルを決定する要素をまとめておきます。
点線 ⇒ dotted
破線 ⇒ dashed
二重線 ⇒ double
立体的に窪んだ線⇒groove
立体的に隆起した線⇒ridge
線無し ⇒ none
さらに応用してみよう
上で取り上げたstyle=””のダブルクォーテーションの中に要素を追加していくことによって線のデザインを色々と変えていくことができます。
ようは、タグの形を覚えて、そのなかに『どのような要素を入れればどのような線になるのか？』ということを覚えれば何も見ないでも好きなデザインが作れるようになります。簡単ですね。
それではこれにプラスして押さえておきたい基本デザインを3つ見ていきましょう。
色を変える
<div style="border: 3px solid #ff9933;"> 枠線で囲まれる本文 </div>
色を表す要素を追加するだけです。
上の例では『#ff9933』という部分が色を表しています。
この色を表す記号を調べる場合には原色大辞典というサイトを参照してください。
角を丸くする
<div style="border: 3px solid #ff9933; border-radius:5px;"> 枠線で囲まれる本文 </div>
border-radiusは角の曲がり具合を表すものです。
その後に続くpxの数字を大きくすれば曲がり具合を大きくすることができます。
枠と文字の間隔を調整する
<div style="border: 3px solid #ff9933; border-radius:5px; padding:10px;"> 枠線で囲まれる本文 </div>
paddingが枠の内側の文字と枠線の距離を決める要素です。
border-radius同様に、pxの数字を大きくすればするほど距離が開きます。
それっぽい枠線を作る方法
上の知識だけで最低限の枠線は作れます。
色や線のスタイルを組み合わせるだけでそれなりに綺麗なページは作れるでしょう。
ただ、『俺はもっと本格的なやつやりたいんだっ！』って人もいるでしょう。
そういう場合は以下のような工夫をしてみるといいです。
<div style="height:12px;"> <span style="margin-left:8px; padding:6px 10px; background:#ff9933; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">タイトル</span> </div> <div style="border:2px solid #ff9933; padding:25px 12px 10px; font-size:0.85em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;"> 枠線で囲まれる本文 </div>
■タイトル■
<font style="padding:6px 10px; background:#0000ff; color:#ffffff; font-weight:bold;">■タイトル■</font> <div style="border:1px solid #0000ff; padding:10px; font-size:0.9em; margin-top:-20px;"> 枠線で囲まれる本文 </div>
<div style="height:12px;"> <span style="margin-left:8px; padding:6px 5px; background:white; font-weight:bold;border-radius:5px;">タイトル</span> </div> <div style="border:2px solid #000066; padding:25px 12px 10px; font-size:1em;border-radius:5px;"> 枠線で囲まれる本文 </div>
<div style="border: 4px solid #82636b; border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px; margin: 2em 0; padding: 2em;"> 枠線で囲まれる本文 </div>
⇒
