2005年02月15日
記事を点線枠で囲む
良くBlogの記事で実線や点線で囲んであるものを見かけます。
HTMLのテーブルで指定しても出来るのですが、
実線でのボーダーになってしまいますよね。 CSS（スタイルシート）で指定してあげると
点線に出来たりします。その辺がすんなり指定できます。
CSSについては、私も殆ど知識がありませんが取り敢えず実践的な方法で
試してしまう方です。ですから私のようなタコレベルでも使える囲み枠について
私なりに使えちゃう方法を書いてみます。今更聞けないなぁ、なんて思っている
人は、難しく考えず分かりにくい用語は置いておいてとにかく実践しちゃいましょう。^^;
私は、こちらの方法で書いていました。その場で適当に枠の大きさやbackgrandの色
の変更ができます。
STYLE="border-style:dotted ;border-width:2px;border-color:#FF9900;background:
#EFEFEF;padding:10px;">
ここに本文を書きます
</div>
そうするとこのように点線で囲まれます。（※こちらはmargin指定はしてません）
margin指定をしたスタイル（margin: 12px 24pxと指定）正確には語弊がありますが、
見た目で言いますと12pxが上下24pxが横幅に影響します。特に24pxを大きくすると
囲み線の横幅が狭くなります。詳しくは、スタイルシートのmarginを説明しているサイト
が多くありますのでそちらを参考ください。
こちら（下記）の方法は、Blogを構成しているスタイルシートに書き加えます。
特に指定はありません。私はわかりやすいように一番下方のところ
に書き加えました。こちらの方法だとスタイルシートに書き込んだ
タグを変更しない限り同じ点線の枠が表示されます。
.waku {
padding: 8px;
border: 2px dotted #666666;
background: #EFEFEF;
margin: 12px 24px;
}
padding：枠と文章の隙間です8px
border：太さ2px、dotted：線種が点線、色がグレー#666666
background：背景色を薄いグレー#EFEFEF
margin： 枠の外側とのマージンを上下12px、左右24pxにしています。
記事を書くときは直接このように指定します。
こちらの書き方でも
<div class="waku">ここに本文を書く</div>
こちらの書き方でも構いません。
ここに本文を書く
</div>
注意：スタイルシートに書き加えるコードですが、指定は、.wakuですwakuの前に見え難い
ですが、ドット.があるのを書き忘れないように注意してください。
エントリーの記事描く時の指定は、ドットはないｗａｋｕです。「waku」は他の名称でも
構いませんが書き出す物と同じ名前で指定してください。
当然ですが、スタイルシートに書き加えた場合は、再構築を忘れずに。
取り敢えずやってみると点線で囲まれた文章が書けますよ。
書いた感じでパディングのサイズやマージンのサイズ、色、線種などを適宜
変えてみたりしてためしてください。 私もCSSは殆どわかりませんが
やっているうちの骨格程度の事は分かってくるようです。
