質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

1167閲覧

cssの疑似要素内ではパスの指定は1つ上にして書くのでしょうか。

yamagata_user

総合スコア40

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/12/23 06:44

編集2022/01/12 10:55

タイトルだけだと何を言っているのかわからないと思うのですが、例えばaとういフォルダ内にa.htmlとimageフォルダがあってimageフォルダ内にb.pngという画像ファイルがある場合なのですが、a.htmlで

.a:before{ content:url("./image/b.png"); }

ではなく、

.a:before{ content:url("../image/b.png"); }

と書く必要があるのでしょうか。

タイトルだけだと何を言っているのかわからないと思うのですが、例えばaとういフォルダ内にa.htmlとimageフォルダがあってimageフォルダ内にb.pngという画像ファイルがある場合なのですが、a.htmlで

.a:before{ content:url("./image/b.png"); }

ではなく、

.a:before{ content:url("../image/b.png"); }

と書く必要があるのでしょうか。

(HTML↓)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ABC</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"> <link rel="stylesheet" href="./css/style.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> </head> <body> <main id="main1"> <ul class="slider"> <li>a</li> <li>b</li> <li>c</li> </ul> <ul> <li class="button-list1"> <i class="material-icons">arrow_back</i> </li> <li class="button-list2"> <i class="material-icons">arrow_forward</i> </li> </ul> </main> <img src="./images/stand_cat2.jpg" alt="サンプルです"> <p data-foo="aaaa">bbbaa</p> <script> $(document).ready(function () { $('.slider').slick(); }); </script> </body> </html>

(style.css↓)

body{ background-color: teal; } .slick-prev:before, .slick-next:before{ content:url("./images/stand_cat2.jpg") ; } p:before{ content: attr(data-foo); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

html

1<link rel="stylesheet" href="./css/style.css">

これが原因ではないかと。
style.css をa.html と同じフォルダに置けば、../ は不要です。

※ちなみに、他の回答で誤解が生じているのは、おそらく、質問文に「a.htmla.htmlに書く」と書かれているのが原因だと思います。
その書き方では、style要素内でスタイルを書いているように読めますので、パスの考え方が変わります。

Re: yamagata_user さん

投稿2017/12/24 08:28

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

CSS

1.a:before{ 2content:url("../image/b.png"); 3}

と書く必要はありません

実際にコードを実行してみればわかると思いますが、いかがでしょうか?以下のコードではimageフォルダ内にimage.pngがあるとしています。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .a::before { 13 content: url("./image/image.png"); 14 } 15 16 .a { 17 width: 500px; 18 height: 500px; 19 background: #faf; 20 } 21 </style> 22</head> 23<body> 24<div class="a"></div> 25</body> 26</html>

投稿2017/12/23 07:28

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamagata_user

2017/12/24 02:10

ありがとうございます。 確かに上記のコードだと「./」でできました。 ただ、追記したコードではslickライブラリが何らかの影響を及ぼしているのか../としないとできませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問