URIの指定

プロパティによっては画像などを表すURIを指定する場合があります。このようなプロパティに対してはURIを表す文字列を記述するのではなく「url」関数を使用します。

記述方法は次の通りです。

url("URI")
url('URI')
url(URI)

URIはシングルクオーテーション(')で囲うかダブルクオーテーション(")で囲うか又はたんにURIを表す文字列を記述して下さい。例えば次のように記述します。

p{
  background-image: url("img/sample.png");
}

background-imageは背景に表示する画像を扱うプロパティです。今回は「img」ディレクトリ内にある「sample.png」を背景画像として指定しました。

サンプル

では簡単なサンプルで試してみます。

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

   head>
     meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     meta http-equiv="Content-Style-Type" content="text/css" />
     title>値の単位と記述方法 /title>
     style type="text/css">
    p {
      width: 300px;
      color: #ffffff;
      background-image: url("img/map4.png");
    }
     /style>
   /head>

   body>

     p>
    CSSでは数値＋単位でさまざまな大きさを表します。単位には大きく分けて
    絶対単位と相対単位の2種類があり場合に応じて使い分けます。
     /p>

   /body>
 /html> 

ブラウザで表示させて見ます。