Q&A
コードはマークダウンのcode機能を利用してください（コードを選択して<code>ボタン押下）
また、HTMLとCSSのファイルの階層や位置関係が分かるように図示していただけますか？
※ちなみに!importではなく!importantです
あと分かりやすいようにbodyにbackground-color:#000;をつけるとか極端な設定(文字サイズすごく大きくとか）にすると反映されているかどうか一目瞭然となりますので試してみてください。
ージを作ろうとしていますが、ｃｓｓがブラウザに一切反映されません。
!import や キャッシュの消去も試みましたが、一切反映されません
テキストエディタはatomです。
コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Dotinstall Paneを使ってみよう</title> <link rel="icon" href="favicon.ico"> <link re="stylesheet" href="css/styles.css"> </head> <body> <header> <h1>Dotinstall Pane</h1> <p> ドットインストールを見ながら<br> コーディングができるAtomパッケージ </p> <a href="#" target="_blank">詳細を見る</a> </header> </body> </html> body { font-size: 16px; font-family: verdana, sans-serif; color:#333; } header{ color: #fff; background: url(../img/bg.png); background-size: cover; }
気になった点は、cssフォルダから、style.cssファイルを作るときに、css\からのファイル名設定だったことです。動画では、css/ からになっていたので書き換えました。
もちろん、<link での設定もファイル名もcss/、css\どちらにも統一してみましたが、全く効果なしです.....
文字が反映されていませんが\というのは左に傾いたスラッシュです。
回答3件
0
ｃｓｓがブラウザに一切反映されません。
何もかも全てブラウザに反映されないのであれば、HTMLにCSSファイルが正しく読み込まれていないということです。
ちなみにChromeでHTMLを開いて、「ソースを表示」してから、ソース上の読み込んでいるcssファイルをクリックしてみてください。ちゃんとCSSファイルが読み込まれているなら、ブラウザ上でCSSファイルの中身にリンクできるはずです。「ファイルが見つかりませんでした」と言われたら、CSSがちゃんと読み込まれていないということです。
以下、CSSがちゃんと読み込まれていないという前提の元に話をします。
チェックする項目としては、
・linkタグのスペルミス
・HTMLからCSSへのパス指定ミス
・CSSファイル名のミス
まずはこのあたりです。
HTML
1<link re="stylesheet" href="css/styles.css">
まずこれだとrel属性がre=になってますのでまずここを直します。
style.cssファイルを作るときに
次に、HTML上の指定は styles.css ですが、本文の記載では style.cssとなっています。
ファイル名が違うのでここの指定が間違っていれば当然反映はされません。
\というのは左に傾いたスラッシュ
パス指定に左に傾いたスラッシュは使いませんので、通常の/指定で問題ありません。
ただし、今のHTMLの状態では、
├ index.html
└ /css/
└ styles.css
というディレクトリ構造となっていることが前提ですが、お手元のデータでは正しく上記のような階層構造になっていますか？ CSSのパス指定と実際のファイルの格納場所が違えば、当然CSSは反映されません。
まずは上記項目をしっかり確認して間違いがないかもう一度調べてみてください。
投稿2018/12/27 05:46
総合スコア3763
0
スタイルシート「styles.css」配置フォルダ、背景用画像ファイル配置フォルダが原因のように思われますがいかがでしょうか？
原因が解らないようであれば、ブラウザに付属しているデベロッパーツールを使用してDOM Elementsのデバッグを行ってスタイルシートの摘要みてはいかがでしょうか？
Chromeであれば「デベロッパーツール」、ie11であれば「開発者ツール」
以下はchromeのデベロッパーツールですが、要素に適用されているスタイルがデバッグできます。
投稿2018/12/27 05:34
総合スコア62
0
自己解決
<link rel= のｌが抜けていただけでした
投稿2018/12/27 05:34
総合スコア13
あなたの回答
tips
プレビュー
