url()

ユーアールエル（関数）

意味リソースのURLを指定

url()とは？

url()関数は、外部リソースの場所を指定するために使用します。これは画像、フォント、その他のメディアファイルへのパスを設定する際によく使われます。url()関数は、プロパティの値として使われ、引数にはリソースのURLを文字列として渡します。

url()の具体的な使い方

背景画像を設定する例

<style>
    .url-bg {
        background-image: url('https://picsum.photos/200');
        width: 200px;
        height: 200px;
        background-size: cover;
        padding: 20px;
        color: white;
        text-shadow: 1px 1px 2px black;
    }
</style>

<div class='url-bg'>
    背景画像: Lorem Picsum
</div>

background-imageプロパティを使って、Lorem Picsumの画像APIを利用して、ランダムな背景画像を設定しています。

カスタムフォントを指定する例

<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('fonts/custom-font.woff2') format('woff2');
  }
  
  .custom-font {
    font-family: 'CustomFont', sans-serif;
  }
</style>

<p class='custom-font'>This text uses a custom font.</p>

@font-faceルールを使用して、カスタムフォントをurl()関数で指定しています。

url()に関するよくある質問

Q. url()で指定するパスの種類は？

A. url()関数では、相対パス、絶対パス、データURL、外部URLなど、様々な形式のURLを指定できます。ただし、セキュリティ上の理由から、外部URLの使用には制限がある場合があります。

Q. url()の引数はクォートが必要？

A. url()の引数は通常、シングルクォート('')またはダブルクォート("")で囲みますが、特殊文字を含まない単純なURLの場合はクォートを省略することもできます。ただし、可読性と一貫性のために、常にクォートを使用することをお勧めします。

url()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのurl()やrepeating-linear-gradient()、min()、linear-gradient()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。