CSS

この記事では「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() は、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;
}

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

外部URLも指定できる

CSS

background-image: url("https://example.com/image.jpg");