カスケーディングスタイルシートリファレンス・ ブラウザの種類による対応状況などもプロパティごとに掲載!

CSS −スタイルシートリファレンス− ブラウザの種類による対応状況などもプロパティごとに掲載!

【できるブログ】  高度なテクニックも簡単に判り易く解説。既存の初心向けブログ本とは一線を画す内容。
プチ・ホームページサービス HTMLやCSSなどの知識がなくても選ぶだけでサイトが完成。掲示板やカート他、機能も豊富です。

スタイルシートの基礎 CSS
バナーはダウンロード
してお使い下さい。

リンク集

Webの本屋さん
宿泊施設検索
世界のホテル
マーケット
ファッション雑貨

制作関連


最新フリーフォント
セレクション

フリーで使用できるフォントを収録(CD−ROM)。 約1000書体より、 ポップ、エレガント、クール他、イメージでフォントを探す事ができます。 ウェブ制作に便利な一冊です。

■  背景

background-color   »» 背景色を指定する
background-image   »» 背景画像を指定する
background-repeat   »» 背景画像の繰り返し方法を指定する
background-attachment   »» 背景画像を固定する
background-position   »» 背景画像の位置を指定する
background-position-x
  background-position-y
  »» 背景画像の位置を垂直・水平方向別に指定する
background:   »» 背景を一括して指定する

■ background-position  背景画像の位置を指定する

background-position:
background-position:

サイズを表す数値+単位 ボックス領域の左上を基点として、水平方向の位置(左からの距離)と垂直方向の位置(上からの距離) を半角スペースで区切って指定します。

10px 30px は パディングの左から10ピクセル、上から30 ピクセルの位置に画像の左端を揃えます。 値を一つだけ指定した場合は、水平方向の位置を指定した事になり、 垂直方向は50%に設定されます。負の値も指定可能。

数値+% 画像の位置をボックス領域の幅、あるいは高さに対する割合で指定します。左上を基点として、 水平方向と垂直方向を半角スペースで区切って指定する点は同じです。

しかし、パーセントによる指定は値の解釈が異なり、ボックス領域の位置の割合と画像の位置の割合が揃います。

例えば、0% 0%とした場合、パディングの左上と画像の左上が揃い 10% 90%とした場合、パディングの左から10%上から90%の位置と 画像の左端から10%上端から90%の位置が重なって揃います。 値を一つだけ指定した場合は水平方向の位置を指定した事になります。 負の値も設定可能。

キーワード top  上端
center  中央
bottom  下端
left  左端
right  右端

  キーワードの指定について

垂直方向の位置を指定する場合はtop、center、bottom
水平方向の位置を指定する場合はleft、center、right
を半角スペースで区切って指定します。 値を一つだけ設定した場合は、もう一方はcenterに設定されます。

数値による指定とパーセントによる指定は組み合わせる事ができますが キーワードによる指定と数値やパーセントによる指定を組み合わせて使用することはできません。

背景画像を1点だけ指定した位置に表示させるには、 background-repeat属性でno-repeatを同時指定して下さい。

IE4 IE5 IE5.5 IE6 NN4 NN4.7 N6.2
サイズ × ×
パーセント × ×
キーワード × ×

LINK

 

HTMLの基礎
ホームページ作成の基礎知識について解説。HTMLタグの辞書としても使えます。

コマンドプロンプト
コマンドプロンプト・DOSの関係についての解説やコマンドの目的別辞書。Windowsをもっと便利に。

XML
初心者でもわかるXMLの基礎講座。XMLを使用した文書を作成しながらXMLの基礎を学ぶ。

配色の話
色は印象を決定付ける重要な要素。彩度や明度の関係・色彩の基礎知識について掲載。


◆ このページのTOPへ ◆







Copyright © 2004 − ykr414. All Rights Reserved.