今回は、画像を使って、ボーダーのようにみせたいと思います。
でも、前回のように「border」で設定するのではなく、「background」で設定します。
言い換えれば「#container」の背景に縦に繰り返す画像を敷くってことなんですけどね。
ですが、今までのようにただ背景の設定をしても上手く反映されないと思います。
というか、反映はされていますが、ちゃんとは見えないといった方が正しいでしょうか。
っで、今回使用する属性が「padding」なのです。
それでは解りやすいように画像を用いながら説明していきたいと思います。

padding & width

簡単に言うと「padding」とは、枠の内側の余白設定です。

これが今回ボーダーの代わりに使う画像ボーダーといったところです。
これをそのまま「background」で設定すると

となって、

こんなかんじになってしまうと思います。

これはなぜこうなるかというと、「#container」の設定のところに、

といったような設定がされているからです。
これは「コンテナの横幅を800pxに設定しますよ」ってことです。
ですが、今回使用する画像の横幅は840pxです。
なぜかというと、現ブログのかたちを崩さずに画像ボーダーを使用するには、ブログの幅より大きくした方が楽だからです。
かといって「width」を840pxにしてしまうと、これまた現ブログのかたちが崩れてしまいます。
そこで使う属性が「padding」というわけです。

「padding」は先ほども言ったように枠の内側の余白設定です。
そしてこのボーダーとなる星の画像は、片方20pxほどです。
ですから現ブログよりはみ出す幅は40pxとなり、画像も840pxとなるのです。
でも「#container」の横幅は800pxとなっています。

ではここに「padding」の設定をするとどうなるかというと、

となって

このように上手く表示されるのです。

なぜかというと、設定は800pxなのに、画像が840pxだと窮屈ですよね。
でも「padding」を設定してやると、800pxよりも20pxずつマージンを取ろうとしますから、外側に押し出されるようなかんじになるのです。
ですから現ブログのかたちも崩れずに画像ボーダーが見えるようになるというわけなのです。

設定

それでは設定です。

横幅800px、画像は縦に繰り返し、押し出される幅は左右合わせて40pxということですね。

まとめ

今回の説明では横幅800pxとしましたが、みなさんのブログでは異なるかもしれません。
それによって画像ボーダーの幅も変わってくるでしょうし、その他のセレクタ設定の関係で、上手く画像ボーダーの中に記事やサイドバーが表示されないかもしれません。
そういう場合は、今回の説明は基礎知識としてだけ覚えてください。
今後説明するであろう「margin （枠の外側の余白）」などと組み合わせて、思い通りにすべての余白設定ができるようになると思います。

ちなみに今回紹介した「padding」ですが、解りやすいように左右別々に設定しました。
上下の設定をする場合は「top」、「bottom」にします。

これは前回の「border」と一緒で、４辺一括の時は

となります。
また、一括であっても上下、左右の設定をしたい場合は

となり、この場合、上下が0pxで、左右が20pxとなります。
さらに一括であっても４辺それぞれ設定する場合は

となり、この場合、上0px、右20px、下0px、左20pxのようになります。
書き方は自由なので、自分が分かりやすい方法で書いてくださいね。

次回は、たぶんみなさんが一番注目されるであろう「#banner」の設定をしたいと思います。
それではお楽しみに、お疲れ様でした

今回は「#container」の部分です。
「#container」は「body」の１つ上の層にあたる部分で、ブログ全体のテーブルみたいなものと思ってください。
以前にも紹介しましたけど、頭文字に「#」が付いていますから、これはID名だということが分かりますね。
では今回はこのコンテナをボーダーで囲ってみたいと思います。
といっても、ボーダーの種類にはいくつかあるので、先に種類を紹介しようと思います。

border

っとまぁ、上の一覧を見てもらえば分かると思うのですが、コピーしても使えるように一応文字でも書いておきます。

　「solid」・・・１本線　　　
　「doublr」・・・２本線　　　
　「dotted」・・・点線　　　
　「dashed」・・・破線
　「groove」・・・へこんで見える
　「ridge」・・・浮き出て見える　　　
　「inset」・・・枠の内側がへこんで見える
　「outset」・・・枠の内側が浮き出て見える