スタイルシート/cssでwebデザイン：1歩！スタイルシート

スタイルシートで背景をデザインのカテゴリ

背景の色をcssで設定する。

HTMLでも「bgcolor」プロパティで背景色を設定することが出来ます。 もちろんcss/スタイルシートでも背景色を自由に設定することが出来ます。

背景の画像をcssで指定する

Webサイトはテキストと背景色だけでも作成することが出来ますが、やはり背景に画像を入れるとぐんと見栄えが良くなります。 css/スタイルシートでも、もちろん、背景に画像を指定することが出来ます。

背景画像の位置をcssでコントロールする

HTMLで背景画像を指定するよりも、background-imageプロパティを使った場合に良い点は、 背景画像の位置を細かく指定できる点です。指定を特にしていない場合、画像の左上が要素の左上に配置されます。

背景画像の繰り返し方法を決める

背景画像を、たとえば、写真などにする場合、background-imageプロパティで指定するだけだと縦方向・ 横方向に繰り返し表示してしまうので、どこかデザイン的にみっともなくなってしまいます。css/スタイルシートを使えば、 背景画像の繰り返し方を指定することが出来ます。

背景画像の固定

Webページがディスプレイにおさまらない長さの場合、訪問者はページを閲覧するためにスクロールします。このとき、 通常の設定ですと、背景画像は要素とともにスクロールします。

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

CSS/スタイルシートを使って、背景をまとめて設定する。

 背景の設定をスタイルシートでコントロールできるようになると、Webページのデザインがぐっと締まってきます。 画像を入れるにしろ、背景色を変えるにしろ、Webページにオリジナリティをだすには必須ですね。