CSSでURLを指定する方法を現役デザイナーが解説【初心者向け】
初心者向けにCSSでURLを指定する方法について解説しています。URLの指定はurl()関数で行います。url()関数の使い方、絶対パスと相対パスの違い、基本の書き方について例を見ながら学習しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ここでは、CSSで背景画像などを指定する際に使用するURLの指定方法について記載します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
URLを指定する方法について詳しく説明していくね！
お願いします！
url()関数の書き方
CSSでURLを指定する場合には、url()関数を使用して、以下のように書きます。
url('ファイルのパス');
url("ファイルのパス");
url(ファイルのパス);
()内にはファイルのパスを入れますが、シングルクォーテーション(‘)で囲ってもダブルクォーテーション(“)で囲っても、囲わなくても大丈夫です。
また、ファイルのパスは絶対パスと相対パスどちらでも指定できます。
絶対パスと相対パスとは
ファイルのパスとは、ファイルの位置を示すものですが、絶対パスと相対パスという2つの書き方があります。
絶対パス
ファイルの住所のようなものです。
https://techacademy.jp/magazine/wp-content/uploads/2016/06/Blog-Image.jpg
のような表記になります。わたしたちが使う住所と同様で、「東京都渋谷区渋谷1-17-4」いえば、みんなに位置を知らせることができるのと一緒です。
相対パス
ファイルとファイルの位置関係を表すものです。
./image.jpg や ./images/image.jpg
のような表記になります。CSSで相対パスを使用する場合は、CSSファイルからのパスになることに注意してください。(外部CSSファイルの場合)
例えば、道を尋ねられたときに、「この道をまっすぐ行って、左側です」のような表現をするのと同じで、「現在位置(CSSファイル)にあるimagesフォルダの中にあるimage.jpgファイル」という現在位置を基準にした指定の方法になります。
同じフォルダ内であれば、./ + ファイル名(./は省略可)
フォルダから出る場合は、 ../ + ファイル名
フォルダに入る場合は、 フォルダ名/ + ファイル名
のようになります。
実際に書いてみよう
先ほどの図と同じ構造のサイトで考えてみます。
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/グラフィックデザイナー |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
