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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

2回答

574閲覧

CSS、写真を読み込めるようにしたい。

hromu7

総合スコア4

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

1クリップ

投稿2020/02/09 10:40

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
初歩的な質問してすみません。
現在html/cssでwebページを作成しています・

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

cssが反映されない。画像が読み込まれない。

該当のソースコード

html/CSS

1!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf=8"> 5 <title></title> 6 <link rel="stylesheet" href="./style.css/test.css"> 7 </head> 8<body> 9<img src="./image/sakura.JPG"> 10</body>

試したこと

index.htmiとstyle.cssは同じ階層
style.cssフォルダ内にtest.css

補足情報(FW/ツールのバージョンなど)

写真に関しては下記のように表示されました。
An error occurred while restoring view:imagePreview.previewEditor
写真お取り込み方が間違っていたのでしょうか?

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

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

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

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

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

dit.

2020/02/10 00:46

index.html、test.css、sakura.JPGの位置関係(ディレクトリ構造)がわかるようなスクリーンショット等をご提示ください。 teratailの質問文には画像を載せる機能があります。 https://teratail.com/help/question-tips#questionTips3-7
guest

回答2

0

早速のご回答ありがとうございます。

ですが、変化なしです。

Finderでcssを見てみるとtest.cssファイルがbracketsのアイコンだったのですが
それは関係無いでしょうか?
現在vscodeを使用しているので、このアプリケーションを開く→brackets(デフォルト)となっていました。→その他でvscodeを選択し常にこのアプリケーション使用するにチェックしたのですがこちらも変化がございません。

投稿2020/02/09 11:31

hiro.a

総合スコア28

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

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

0

階層が本当に合ってるか疑問ですが、

<link rel="stylesheet" href="./style.css/test.css"> index.htmiとstyle.cssは同じ階層

style.cssを読み込まないといけないのでは?と思いました。
index.htmlと同じ階層にstyle.cssがあるとすれば以下のコードを
index.htmlに追加すれば読み込めます。

css

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

これを追加してみてください。

また、もしかしてですが
test.css は style.cssディレクトリ にあるのではなく
styleディレクトリ に入ってるのではないですか?

その場合は前述にさらに追加で

css

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

で読み込むことができます。

正直、style.cssというディレクトリは考えにくいので階層の間違えをしてるように見受けました。
もし、前述の読み込みで解決しない場合は詳しいディレクトリ構成を書いていただければと思います。

投稿2020/02/09 10:57

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問