CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM9:30~PM6:30

スタッフブログ | ソース(ホームページ)のレシピ by 委員長!
スタッフブログ
ソース(ホームページ)のレシピ by 委員長!

背景の指定を一括で指定する方法
さて、今回も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/index.php?e=370 |
| ソース(ホームページ)のレシピ by 委員長! | 09:35 AM | comments (x) | trackback (x) |

ボーダーの書き方について3
さて、前回の続きです。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e368.html

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

ボーダーのcss

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

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

ボーダーをまとめて指定する方法

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

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

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

では、また次回!


| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=369 |
| ソース(ホームページ)のレシピ by 委員長! | 06:47 PM | comments (x) | trackback (x) |

ボーダーの書き方について2
 今回は前回の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(太い)がありますが、
 実際に表示される太さはブラウザによって異なるので、
 キーワードより数値で指定するほうが良いでしょう。

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

 では、また次回!

| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=368 |
| ソース(ホームページ)のレシピ by 委員長! | 09:30 AM | comments (x) | trackback (x) |

ボーダーの書き方について1
以前とっても便利な、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を書いてみると、

cssで上下左右違う線種を書いてみましょう!


次にソースを書くと、

ソースの書き方例

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

ではまた次回!

| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=366 |
| ソース(ホームページ)のレシピ by 委員長! | 06:37 PM | comments (x) | trackback (x) |

cssでクラスを複数指定する方法
今回は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になる確率が高いと思われます。
そこで、この技!実はクラスは複数指定してやることが出来るんです。

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

複数指定するために、cssをコンパクトにまとめてみましょう

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

pタグに下線をつけた状態です。

こうなります。

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

pタグに下線をつけた状態に、さらに背景色をクラス複数指定でやってみました。

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

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

ではまた次回!


| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=363 |
| ソース(ホームページ)のレシピ by 委員長! | 07:48 PM | comments (x) | trackback (x) |

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。
お問合せフォームはこちらから

リュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM9:30-PM6:30

無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00~PM7:00

スタッフブログ | ソース(ホームページ)のレシピ by 委員長!
CSS