CSSでURLを指定する方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSでURLを指定する方法について解説しています。URLの指定はurl()関数で行います。url()関数の使い方、絶対パスと相対パスの違い、基本の書き方について例を見ながら学習しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

ここでは、CSSで背景画像などを指定する際に使用するURLの指定方法について記載します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

URLを指定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

url()関数の書き方

CSSでURLを指定する場合には、url()関数を使用して、以下のように書きます。

url('ファイルのパス');
url("ファイルのパス");
url(ファイルのパス);

()内にはファイルのパスを入れますが、シングルクォーテーション(‘)で囲ってもダブルクォーテーション(“)で囲っても、囲わなくても大丈夫です。

また、ファイルのパスは絶対パスと相対パスどちらでも指定できます。

 

絶対パスと相対パスとは

ファイルのパスとは、ファイルの位置を示すものですが、絶対パスと相対パスという2つの書き方があります。

絶対パス

ファイルの住所のようなものです。

https://techacademy-magazine-cdn.techacademy.jp/wp-content/uploads/2016/06/Blog-Image.jpg

のような表記になります。わたしたちが使う住所と同様で、「東京都渋谷区渋谷1-17-4」いえば、みんなに位置を知らせることができるのと一緒です。

相対パス

ファイルとファイルの位置関係を表すものです。

./image.jpg や ./images/image.jpg

のような表記になります。CSSで相対パスを使用する場合は、CSSファイルからのパスになることに注意してください。(外部CSSファイルの場合)

例えば、道を尋ねられたときに、「この道をまっすぐ行って、左側です」のような表現をするのと同じで、「現在位置(CSSファイル)にあるimagesフォルダの中にあるimage.jpgファイル」という現在位置を基準にした指定の方法になります。

 

同じフォルダ内であれば、./ + ファイル名(./は省略可)

フォルダから出る場合は、 ../ + ファイル名

フォルダに入る場合は、 フォルダ名/ + ファイル名

のようになります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

先ほどの図と同じ構造のサイトで考えてみます。

index.html:

<html>
  <head>
  <meta charset="utf-8">
  <title>CSSでURLを指定する方法</title>
  <link rel="stylesheet" href="./css/style.css">
  </head>

  <body>
  <div class="pink">ピンクの背景画像</div>
  <div class="blue">ブルーの背景画像</div>
  <div class="green">グリーンの背景画像</div>
  </body>

</html>

 

style.css:

@charset "UTF-8"; /*文字コードの指定*/
div{
  width:200px;
  height:200px;
  float:left;
  text-align:center;
  background-size:contain;
  line-height:200px;
}
img{
  width:200px;
  height:200px;
}
.pink{
  background-image:〇〇〇〇〇〇〇〇〇〇〇〇;
}
.blue{
  background-image:〇〇〇〇〇〇〇〇〇〇〇〇;
}
.green{
  background-image:〇〇〇〇〇〇〇〇〇〇〇〇;
}

.pink、.blue、.greeの各クラスに対して、背景画像を設定してみましょう。うまく設定できると、以下のような表示になります。

相対パスで指定する場合は、書いているファイルが基準になるので、HTMLファイルで<img>を指定する場合と相対パスが異なるので注意してください。(HTMLファイルとCSSファイルが同じフォルダ内であれば一緒です。)

同じ画像でも、CSSから指定するのか、HTMLから指定するのかによって相対パスは異なります。

例:

 

表示がうまくできない場合は、ディベロッパーツールで確認してみましょう。
(GoogleChromeなら右クリック→検証)

画像のパスを間違っている場合には、ディベロッパーツールにエラーが表示されます。

 

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー
会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。
ラジオとバナナが好き。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。