CSS

CSS url() is a way to tell the browser where your images, fonts, or other files are so they can appear on the page.

url()

CSS の url() は、背景画像やフォントなどの外部ファイルを「この場所にあるよ」と指定して、ページに読み込ませるための仕組みです。

url() とは？

url() は、CSS の中で「外にあるファイルを使いますよ」と教えるための書き方です。

画像・フォント・音声・動画など、ブラウザの外にあるデータへの“行き先”を指定するときに使われます。

たとえば「背景に画像を表示したい」「独自フォントを読み込みたい」といった場面で、そのファイルがどこにあるのかを CSS に伝える役割を持っています。

もう少し正確にいうと

url() は、CSS プロパティに“リソースの場所（パス）”を渡すための関数です。

ファイルの場所は以下のように指定できます。

よくある使い方

背景画像を表示する

CSS

.box {
    background-image: url("images/bg.jpg");
}

.box の背景に bg.jpg を表示します。

フォントを読み込む

CSS

@font-face {
    font-family: "MyFont";
    src: url("fonts/myfont.woff2");
}

外部フォントファイルをブラウザに読み込ませます。

アイコン画像として使う

CSS

.icon {
    background: url("icons/star.png") no-repeat center;
}

背景としてアイコン画像を配置します。

書くときのコツと注意点