さて、今回もcssを短縮で書く技です。
背景に関する内容を一括で指定してみましょう。

backgrounに関するcssは

background-color
background-image
background-repeat
background-position
background-attachment

等があります。
これを一つ一つ指定すると、5行も書かなくてはいけませんね。
これもborder等と同じく、一括指定することが可能です。

background: #ffffff url(bg.png) repeat-y right top fixed;

と書いてやります。
これで完了です。
どうでしょうか？1行にまとめられましたね。
今回の例は、color・image・repeat・position・attachment
の順番で書いていますが、必要のない指定は省略することもできて、
並べる順番も特に決まりはありません。

これでソースがだいぶ簡単になります。


いかがでしたでしょうか？
今まで沢山のcssの技をご紹介してきました。
floatやlist、border等、基本的なことはほぼ出来たのではないかと思います。
あとはこれらの技を駆使して、様々なデザインに挑戦していってください。
何度も申し上げていますが、慣れることがとても大切なので
たくさん使って慣れて、自分のものにしていって下さいね。

では！

さて、前回の続きです。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e368.html

前回の例では、ボーダーの色も線種も太さも上下左右バラバラに指定することが出来ます。
では、上下左右同じ色、太さ、線種にしたい場合は･･･？



このように値を一つ指定した場合、上下左右が3px、というように一括指定できます。
値を二つ指定した場合は、記述した順に上下、左右、の太さになります。
では値を三つ指定した場合は？
記述した順に、上、左右、下、の太さになります。
これはborder-colorもborder-styleにも言えることなので
、同じように上記のような書き方が出来ます。

でも、もっと簡単な書き方があります！
それが、border！です。
borderはボーダーのスタイル・太さ・色を指定することが出来ます。
つまり、



としてやることで、3行が1行になりました！
上下左右同じ線を指定するときしか使えませんが、簡単にかけて覚えやすく便利！です。

もちろん、ボーダーを下にしか引きたくない場合は
border-bottom:1px solid #f00;
とすることも可能です。

これで沢山の可能性が広がりますね！
ボーダーは、変わった線種で画像を囲ったり、文章の一部を囲ってみたりすることで
簡単にデザインを変えることが出来る、便利なスタイルシートです。
是非慣れてみてくださいね！

では、また次回！

　今回は前回のborderの書き方の補足です。
　前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e366.html

　「ボーダーを表示させるには、太さや色だけでなく
　　種類を指定しなければなりません」
　と書きましたね。
　この種類や太さについて少しお話します。

　まず種類について。
　種類の指定はborder-styleになります。
　styleは様々な種類の線種を表示させることができます。
　一部だけあげると、
　solid→1本線　double→2本線　dashed→破線　dotted→点線　等･･･。
　といった具合ですね。一度試してみて下さい。
　ただし、ブラウザによっては思ったような表示にならなかったりするので
　乱用は禁物です！

　次に太さについても、もう少し。
　線の太さはborder-widthになりますが、数値で指定する方法と、
　キーワードで指定する方法とあります。
　数値はたとえば1pxや、1em、などです。例でも使用していますね。
　キーワードで指定するには、
　thin（細い）、midiun（普通）、thick（太い）がありますが、
　実際に表示される太さはブラウザによって異なるので、
　キーワードより数値で指定するほうが良いでしょう。

　と補足が済んだ所で、次は、前回よりもっと簡単に短縮して書く方法ですが・・・
　これを全部書くと長くなりますので、また次回にします！

　では、また次回！

以前とっても便利な、margin指定を短縮して書く方法という
お話をした事があります。
記事→http://www.ryuumu.co.jp/ryuumu/stuffblog/e334.html

そのときにちょっとだけ書いた、
『これはpaddingもborderでもまったく同じように書く事が出来ます。』
という一言。
当時、ボーダーについてはあまり詳しくお話していませんでしたので、今回はボーダーについてです！

ボーダー（線）には線の太さを指定する、border-widthと
線の種類を指定する、border-styleと
線の色を指定する、border-color、があります。

もっというと、線も上下左右に指定できるので、下に線を引きたいのであればborder-bottom、と指定してやるのですが、これをこのまま上下左右全部書くと、指定だけですごいソース量になってしまいます。
そこで　border-width:2px 5px 1px 10px;
と書いてやることで、ボーダーの線の太さを上下左右で変えることができます。
これが、前お話したように、上、右、下、左という時計回りに指定しています。

同様に、border-styleもborder-colorも、時計回りに指定することで、上下左右違う線種を指定したり出来ます。
例でソースを書いて見ましょう。

cssを書いてみると、




次にソースを書くと、



気をつけなければならないのが、ボーダーは太さや色だけを指定しても表示されません。
これは、border-styleの初期値がnoneなので、ボーダーは表示されず、太さが0になります。
よって、ボーダーを表示させるには、太さや色だけでなく、種類を指定しなければなりません。
　
そこで種類や太さについて少し補足をしたいのですが、ちょっと長くなりそうなので、次回にお話しします。

ではまた次回！

今回はcssのクラスを複数指定する方法です。

タグにクラスを指定しているとき、前出てきたクラスの指定内容と似ているけど、ちょっとだけ変えたい、という時、ありませんか？
たとえば、『.test』というクラスにborder-bottomを指定していたけど、今度使うタグに指定するクラスにはborder-bottomだけでなく、background-colorも指定したい。
そんな時どうしますか？
線（下）だけでなく背景色をつけたクラスをたとえば『.test2』というクラス指定にしたとします。
次、また新たにborder-bottom・background-colorだけでなく、さらにborder-topも指定したい･･･となったとき。
線（bottom）も背景色も線（top）も指定したcssを『.test3』にします・・・

といった具合にするとどんどんcssが増えて複雑になっていきます。
今の時点でのcssを全て書くと



内容を見ると被っている部分が見られます。
次々に新しいcssを足していくと、膨大なソースが書かれたcssになりかねません。
後で見直してもきっと修正しにくいcssになる確率が高いと思われます。
そこで、この技！実はクラスは複数指定してやることが出来るんです。

上記のクラスを参考にソースを書いて見ます。
まずcss。



ではhtmlソースを。
まず一つづつ指定するのは書かなくてもお分かりですね？



こうなります。

この状態に、さらに背景を灰色にしたい、つまりtest2というcssを追加で指定してあげましょう。



いかがでしょうか？
文字の背景が灰色になりました。
このように複数のクラスを指定したいときは、クラス名を空白で区切ると複数指定することが出来ます。
もちろん空白は半角の空白にして下さい。

こうすると.test1と.test3を組み合わせたり、.test1.test2.test3全部組み合わせたりすることも可能です。
慣れるまでは難しいかもしれません。
また、他ページ等で多用する予定があるcssなら、複数指定せず、専用のcssを書いたほうが良い場合もあります。
自分なりのルールを決めて自分のものにしていってくださいね。

ではまた次回！