CSSプロパティ

URL関数にURLのパスを設定する

url関数

CSS

background: url("sample.gif");
background-image: url('sample.gif'); /*個別指定の書式*/
background-image: url(sample.gif);

 (  )の中のURLのパスは「”」や「’」をつけてもよいし、省略してもよいです。

パス

 パスというのは、画像の名前と画像の置いてある場所を表します。住んでいる人の名前と住所に当たります。

相対パス

 上の例では、sample.gif が画像名です。ファイル名のみで呼び出しています。この書き方は、HTMLファイルやCSSファイルと同じ場所に画像ファイルがある場合の書き方です。

 

 フォルダ

 HTMLファイル
  CSSファイル  
sample.gif

 このような場合を相対パスと呼びます。つまり、呼び出すファイルの置いてある場所から見た場所を指定する書き方です。同じ場所(同一のフォルダ内)に置いてあれば、例に示すような書き方になります。

 

 呼び出すファイルの置いてある場所に別のフォルダ(image)があってその中に画像ファイルがある場合には、 image/sample.gif の様に記述します。

 

 フォルダ

HTMLファイル
CSSファイル 

sample.gif

 image 

 

 同じフォルダ内ではなく、一つ上の階層に画像ファイルがある場合には、../sample.gif の様に記述します。

 

 上位フォルダ

HTMLファイル
CSSファイル

 下位フォルダ 

sample.gif

絶体パス

 画像の置いてある位置を基点(ルート)から完全に指定するには、絶対パスを使います。

 画像ファイルの置いてある場所を、住所で例えるならば、国名から順に番地まで示すような書き方のパスになります。通常 http://~ という形になります。

女の子の絵