スタイルシート/cssでwebデザイン：1歩！スタイルシート http://www.1css.net/ css・スタイルシートを使ってホームページやブログをデザインをしよう！スタイルシート・cssはwebデザインの要です。 ja Copyright 2006 Tue, 22 Aug 2006 22:46:07 +0900 http://www.sixapart.com/movabletype/?v=3.2-ja-2 http://blogs.law.harvard.edu/tech/rss スタイルシートですべての方向に同じボーダーを引く。  一般的に境界線を引く場合、上下左右すべてにバラバラな設定をすることは稀です。 そんなことをするとかえって見にくくなってしまうからです。 スタイルシートで上下左右の四方向に同じボーダーを引くにはborderプロパティを使います。

]]> http://www.1css.net/2006/08/post_43.html http://www.1css.net/2006/08/post_43.html 040box Tue, 22 Aug 2006 22:46:07 +0900 スタイルシートでボーダーを個別に指定する  スタイルシートを使ってボーダーを指定する際に、ボーダーの方向と書式をピンポイントで指定することもできます。

]]> http://www.1css.net/2006/08/post_42.html http://www.1css.net/2006/08/post_42.html 040box Wed, 16 Aug 2006 12:50:34 +0900 ボーダーの種類・色・幅をスタイルシートで指定する。  『スタイルシートでボーダーをひく』では、 border-topなどのプロパティを使って、上下左右のボーダーに対してそれぞれ境界線の種類や色、幅を指定していました。ここでは、 線の種類/色/幅の別に各方向の設定をまとめる方法を紹介します。

]]> http://www.1css.net/2006/08/post_41.html http://www.1css.net/2006/08/post_41.html 040box Thu, 10 Aug 2006 13:45:29 +0900 スタイルシートでボーダーを引く  HTMLを使って枠線を引くには、tableタグを重ねて設定するなど非常に長くHTML文を書く必要があります。 スタイルシートを使って要素のパディングの外側に境界線を引けば、HTMLをスリム化することが出来ます。

]]> http://www.1css.net/2006/08/post_40.html http://www.1css.net/2006/08/post_40.html 040box Thu, 03 Aug 2006 23:31:41 +0900 パディングをまとめて設定する。 スタイルシートでパディングを設定するでは、 マージンを上下左右を指定する方法を述べました。しかし、4方向のマージンをいちいち設定せずに、まとめて指定してしまうことができます。

]]> http://www.1css.net/2006/07/post_39.html http://www.1css.net/2006/07/post_39.html 040box Wed, 19 Jul 2006 14:11:26 +0900 スタイルシートでパディングを設定する  ボックスモデルの三要素の一つパディングをスタイルシートを使って設定してみましょう。パディングって何？って人は、 ” ボックスモデルとは何だろう？”を確認してください。マージンが段落間のスペース幅を設定しているのに対し、 パディングはボーダーから内容までのスペース幅を設定します。

]]> http://www.1css.net/2006/07/post_38.html http://www.1css.net/2006/07/post_38.html 040box Sat, 15 Jul 2006 10:03:14 +0900 マージンをまとめて設定する。  スタイルシートを使ってマージンを設定するでは、 マージンを上下左右を指定する方法を述べました。しかし、4方向のマージンをいちいち設定せずに、まとめて指定してしまうことができます。

]]> http://www.1css.net/2006/07/post_37.html http://www.1css.net/2006/07/post_37.html 040box Sat, 08 Jul 2006 22:48:49 +0900 スタイルシートでマージンを設定する。  Webページのデザイン上、段落間の間を空ける際にbrタグなどを使うと、思うようなデザインが出来ないことがあります。 このようなときに、スタイルシートのマージンを使ってうまく設定しましょう。

]]> http://www.1css.net/2006/06/post_36.html http://www.1css.net/2006/06/post_36.html 040box Fri, 30 Jun 2006 14:36:08 +0900 ボックスモデルとは何だろう？  ブロックレベルやインライン要素は、Webページのなかで長方形の領域を作ります。

このような領域を「ボックス」と呼びます。

]]> http://www.1css.net/2006/06/post_35.html http://www.1css.net/2006/06/post_35.html 040box Fri, 23 Jun 2006 14:10:56 +0900 CSS/スタイルシートを使って、背景をまとめて設定する。  背景の設定をスタイルシートでコントロールできるようになると、Webページのデザインがぐっと締まってきます。 画像を入れるにしろ、背景色を変えるにしろ、Webページにオリジナリティをだすには必須ですね。

]]> http://www.1css.net/2006/06/css_4.html http://www.1css.net/2006/06/css_4.html 030back Sun, 18 Jun 2006 11:01:50 +0900 背景画像の固定 Webページがディスプレイにおさまらない長さの場合、訪問者はページを閲覧するためにスクロールします。このとき、 通常の設定ですと、背景画像は要素とともにスクロールします。

たとえば、背景に大きめの画像を繰り返しなしで使用し、背景の画像位置を固定して使いたい場合、 css/スタイルシートで背景画像のスクロールを禁止することが出来ます。

]]> http://www.1css.net/2006/06/post_34.html http://www.1css.net/2006/06/post_34.html 030back Mon, 12 Jun 2006 22:53:07 +0900 背景画像の繰り返し方法を決める 背景画像を、たとえば、写真などにする場合、background-imageプロパティで指定するだけだと縦方向・ 横方向に繰り返し表示してしまうので、どこかデザイン的にみっともなくなってしまいます。css/スタイルシートを使えば、 背景画像の繰り返し方を指定することが出来ます。

]]> http://www.1css.net/2006/06/post_33.html http://www.1css.net/2006/06/post_33.html 030back Thu, 08 Jun 2006 14:09:31 +0900 背景画像の位置をcssでコントロールする HTMLで背景画像を指定するよりも、background-imageプロパティを使った場合に良い点は、 背景画像の位置を細かく指定できる点です。指定を特にしていない場合、画像の左上が要素の左上に配置されます。

]]> http://www.1css.net/2006/06/css_3.html http://www.1css.net/2006/06/css_3.html 030back Mon, 05 Jun 2006 13:53:35 +0900 背景の画像をcssで指定する Webサイトはテキストと背景色だけでも作成することが出来ますが、やはり背景に画像を入れるとぐんと見栄えが良くなります。 css/スタイルシートでも、もちろん、背景に画像を指定することが出来ます。

]]> http://www.1css.net/2006/05/css_2.html http://www.1css.net/2006/05/css_2.html 030back Wed, 31 May 2006 20:15:09 +0900 背景の色をcssで設定する。 HTMLでも「bgcolor」プロパティで背景色を設定することが出来ます。 もちろんcss/スタイルシートでも背景色を自由に設定することが出来ます。

]]> http://www.1css.net/2006/05/css_1.html http://www.1css.net/2006/05/css_1.html 030back Mon, 29 May 2006 21:26:30 +0900