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

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

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

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

CSS

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

Q&A

解決済

3回答

2351閲覧

ブラウザにCSSが一切反映されない

_arukuneko

総合スコア19

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/08/27 06:43

編集2020/08/27 07:58

【追記】
index.htmlを【html】フォルダから出したら反映されました。
【portfolio】フォルダ内に【html】フォルダと【css】フォルダがあり、
index.htmlは【html】フォルダに入ってたのですが、それでは反映されないのですか?


ブラウザにCSSがまったく表示されません。
検証ツールで見てみると、net::ERR_FILE_NOT_FOUNDと出ます。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>あああ</title> 8 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css"> 9 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap" rel="stylesheet"> 10 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 11 <link rel="stylesheet" href="./css/style.css"> 12</head>

cssの名前は、style.cssです。
ついでに画像も読み込みません。。。

ほかのHTML、CSSをコピーして、違うフォルダで、コピー元と同じファイル名で使用しています。

このやり方がおかしいのでしょうか。。。

元々あったフォルダ名を変えて、画像フォルダの名前も変更したら、
HTML内のimg名を変更後の名前にしても、エラーで反映されません。。。

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

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

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

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

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

guest

回答3

0

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
3つほど全角になっているので、実際のコードと同じであれば半角に修正してください。

このコードだと、現在のHTMLファイルと同じ階層にある「css」というディレクトリ内にある「style.css」というCSSファイルを参照することになっています。
ファイルの位置関係が正しいか、ファイル名が正しいか確認してください。

投稿2020/08/27 07:16

dit.

総合スコア3235

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

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

0

cssもhtmlの画像も相対パスが間違っているのではないでしょうか。

ファイルの構造を見直してみましょう。

投稿2020/08/27 07:00

shibachan

総合スコア5

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

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

0

自己解決

HTMLファイルをHTMLファイルの外に出したら適用されました!

投稿2020/08/28 02:42

_arukuneko

総合スコア19

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

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

dit.

2020/08/28 04:46 編集

「HTMLファイルの外に」は「HTMLフォルダの外に」の誤字だとして、もしファイルの位置関係(フォルダ構造)をそのままにしたいのでしたら`<link rel="stylesheet" href="../css/style.css">`とすれば適応されると思います。 `../`で一つ上の階層を見に行きます。 参考 https://webliker.info/78726/
_arukuneko

2020/08/28 05:19

理解しました。。ありがとうございました> <
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問