http://customshichao.shiga-saku.net テンプレートを自分好みにアレンジしてみよう！　今よりもっとブログが好きになるかもよ♪ ja Sat, 12 May 2007 21:56:06 +0900 Thu, 13 Dec 2007 00:17:54 +0900 http://blogs.law.harvard.edu/tech/rss CLOG 今回は、画像を使って、ボーダーのようにみせたいと思います。でも、前回のように「border」で設定するのではなく、「background」で設定します。言い換えれば「#container」の背景に縦に繰り返す画像を敷くってことなんですけどね。ですが、今までのようにただ背景の設定をしても上手く反映されないと思います。というか、反映はされていますが、ちゃんとは見えないといった方が正しいでしょうか。っで、今回使用する属性が「padding」なのです。それでは解りやすいように画像を用いながら説明していきたいと思います。padding & width簡単に言うと「padding」とは、枠の内側の余白設定です。これが今回ボーダーの代わりに使う画像ボーダーといったところです。これをそのまま「background」で設定するとbackground : url("http://shiga-saku.net/usr/customshichao/container.jpg") ;となって、こんなかんじになってしまうと思います。これはなぜこうなるかというと、「#container」の設定のところに、width : 800px ;といったような設定がされているからです。これは「コンテナの横幅を800pxに設定しますよ」ってことです。ですが、今回使用する画像の横幅は840pxです。なぜかというと、現ブログのかたちを崩さずに画像ボーダーを使用するには、ブログの幅より大きくした方が楽だからです。かといって「width」を840pxにしてしまうと、これまた現ブログのかたちが崩れてしまいます。そこで使う属性が「padding」というわけです。「padding」は先ほども言ったように枠の内側の余白設定です。そしてこのボーダーとなる星の画像は、片方20pxほどです。ですから現ブログよりはみ出す幅は40pxとなり、画像も840pxとなるのです。でも「#container」の横幅は800pxとなっています。ではここに「padding」の設定をするとどうなるかというと、padding-left : 20px ;padding-right : 20px ;となってこのように上手く表示されるのです。なぜかというと、設定は800pxなのに、画像が840pxだと窮屈ですよね。でも「padding」を設定してやると、800pxよりも20pxずつマージンを取ろうとしますから、外側に押し出されるようなかんじになるのです。ですから現ブログのかたちも崩れずに画像ボーダーが見えるようになるというわけなのです。設定それでは設定です。#container{width : 800px;background : url("http://shiga-saku.net/usr/customshichao/container.jpg") ;background-repeat : repeat-y ;padding-left : 20px ;padding-right : 20px ;}横幅800px、画像は縦に繰り返し、押し出される幅は左右合わせて40pxということですね。まとめ今回の説明では横幅800pxとしましたが、みなさんのブログでは異なるかもしれません。それによって画像ボーダーの幅も変わってくるでしょうし、その他のセレクタ設定の関係で、上手く画像ボーダーの中に記事やサイドバーが表示されないかもしれません。そういう場合は、今回の説明は基礎知識としてだけ覚えてください。今後説明するであろう「margin （枠の外側の余白）」などと組み合わせて、思い通りにすべての余白設定ができるようになると思います。ちなみに今回紹介した「padding」ですが、解りやすいように左右別々に設定しました。上下の設定をする場合は「top」、「bottom」にします。これは前回の「border」と一緒で、４辺一括の時はpadding : 20px ;となります。また、一括であっても上下、左右の設定をしたい場合はpadding : 0px 20px ;となり、この場合、上下が0pxで、左右が20pxとなります。さらに一括であっても４辺それぞれ設定する場合はpadding : 0px 20px 0px 20px ;となり、この場合、上0px、右20px、下0px、左20pxのようになります。書き方は自由なので、自分が分かりやすい方法で書いてくださいね。次回は、たぶんみなさんが一番注目されるであろう「#banner」の設定をしたいと思います。それではお楽しみに、お疲れ様でした http://customshichao.shiga-saku.net/e42446.html http://customshichao.shiga-saku.net/e42446.html コンテナ Wed, 18 Jul 2007 18:43:00 +0900 今回は「#container」の部分です。「#container」は「body」の１つ上の層にあたる部分で、ブログ全体のテーブルみたいなものと思ってください。以前にも紹介しましたけど、頭文字に「#」が付いていますから、これはID名だということが分かりますね。では今回はこのコンテナをボーダーで囲ってみたいと思います。といっても、ボーダーの種類にはいくつかあるので、先に種類を紹介しようと思います。borderっとまぁ、上の一覧を見てもらえば分かると思うのですが、コピーしても使えるように一応文字でも書いておきます。　「solid」・・・１本線　　　　「doublr」・・・２本線　　　　「dotted」・・・点線　　　　「dashed」・・・破線　「groove」・・・へこんで見える　「ridge」・・・浮き出て見える　　　　「inset」・・・枠の内側がへこんで見える　「outset」・・・枠の内側が浮き出て見える書き方１ボーダーの種類が分かったところで、設定をしてみたいと思います。ではまず属性と値の書き方からです。border : 5px solid #000000 ;今回はすべて一括で書いてみました。ホントなら「border-color （色）」、「border-width （太さ）」、「border-style （種類）」といったようにそれぞれ属性があるのですが・・・いちいちボーダーボーダーって面倒臭いですよね。ってことで一括にしました。もちろん１つずつでも構いませんよ。ちなみに、もしボーダーを表示したくない場合は、上の文章を消すか、種類のところを「none」に変更してください。書き方２上で紹介した書き方は４辺すべてにボーダーを適用する場合の書き方です。じゃなくって、４辺それぞれを１箇所ずつ設定したい場合は、次のようになります。border-top : 5px solid #000000 ;border-left : 5px solid #000000 ;border-right : 5px solid #000000 ;border-bottom : 5px solid #000000 ;これは「background-position」のときにも紹介しましたが、それぞれ上、左、右、下という意味です。例えば上下が要らないなら「left」と「right」だけ書き、「top」と「bottom」は書かなければいいのです。また、この書き方だと、それぞれの辺の色や太さ種類を違うものにも設定できるのです。設定では最後にこれらを踏まえて「#container」をボーダーで囲ってみたいと思います。今回は、コンテナの左右を10pxの太さで２本線に設定してみたいと思います。つまりはこのブログのようにですね。#container{border-left : 10px double #0000cd ;border-right : 10px double #0000cd ;}まとめ今回は「#container」の設定のようであり、じつは「border」の説明でもありました。以前紹介した「background」や今回の「border」はいろんなセレクタで使用できるのです。これからも紹介していく属性はまだまだありますので、今回のようにセレクタ+属性というように紹介していきたいと思います。紹介した属性は、いろんなセレクタで試してみてくださいね。そうすれば覚えるのも早いと思いますよ次回は「#container」に自作画像を使って、ボーダーのように見せる方法を紹介したいと思います。それではお疲れ様でした http://customshichao.shiga-saku.net/e42337.html http://customshichao.shiga-saku.net/e42337.html コンテナ Wed, 18 Jul 2007 00:10:00 +0900