Q&A
念の為確認ですが、index.htmlと同じ場所にstyle.cssが存在しますよね？
head以降のHTMLとstyle.cssの中身もご提示ください。
前提・実現したいこと
今、htmlでビューを作成しています。
このように記載していますが、cssが読み込みされません。
使用しているファイル名はindex.htmlです。
プログラミング初心者のため、どう言う風に書いたらいいか分からないので不足している部分も多々あるかと思いますが、何かある度に返信させて頂きます。
些細なことでもいいので、回答の程よろしくお願いします。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>aaa</title> <link rel="stylesheets" type="text/css" href="style.css"> </head>
試したこと
一度type="text/css"を消しました。
何度もlinkは間違ってないか確認しました。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
とりあえず、erbの拡張子からhtmlに切り替えて、そこからビューの実装をしようと思っていました。
この時点でいろいろ脱線しまくっています。htmlとして作ると、Railsの動的要素を一切入れられないページとなってしまいますので、そうでないならビューとして組む必要があります。
あと、RailsはCSS管理も仕組みが組まれています。勝手にstyle.cssを置くのではなく、既存の枠組みに乗せるのが適切です。
なにはともあれ、チーム開発なのなら他の人と相談して進めてください。
投稿2019/12/05 01:52
総合スコア145977
0
stylesheetsではなくstylesheet(最後のsいらない)
index.html
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>aaa</title> 6<link rel="stylesheet" type="text/css" href="style.css" /> 7</head> 8<body> 9</body> 10</html>
style.css
css
1body { 2 background: green; 3}
※もうstyle.css読み込むの諦めて
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>aaa</title> 6 <style> 7/* ここにスタイルシートを記載していく */ 8body { 9 background-color: red; 10 font-size: 50px; 11} 12 <style> 13</head> 14<body> 15hoge 16</body> 17</html> 18```でもいいかと
投稿2019/12/04 14:49
編集2019/12/05 05:17
総合スコア5545
ありがとうございます。
それも試しましたが、ダメでした。
それ「も」試しましたが、って、すでに試したことが他にもあるなら最初から質問に明記してください。
私はこれで読み込めるの確認してるので、どう確認したか教えて下さい…
色々説明不足ですみません。
ファイル名はindex.htmlです。
cssはstyle.cssです。style.scssも一度試しました。
今、アプリケーション作成ファイルで編集しています。
複数人で開発していて、私は新規登録画面の作成をやることになりました。
使っているフレームワークはrailsです。
localhostをやれば、トップメイン画面の表示になります(チーム内の誰かが実装した画面)
私は新規登録画面の実装なのでlocalhostで開けなかったので、とりあえず、erbの拡張子からhtmlに切り替えて、そこからビューの実装をしようと思っていました。
なのでどうして読み込みすればいいか分からず、チームメンバーに聞けばいいと思いますが、基本的なことなので聞くに聞けず、こちらを利用させて頂きました…
よろしくお願いいたします。
railsでの開発のため適当にフォルダを作成して、そこにindex.htmlとstyle.cssを作成して、Chromeなどのブラウザでindex.htmlを開いたらstyle.cssが読み込めなかったっていうことでOKなのかな…
https://blog.ideamans.com/2018/01/google-chrome-network.html
Chrome使ってるならこれで確認するのが良いかと
そうです！適当にフォルダを作成しています。
chrome使ってますが、当てたはずのcssが検証ツールでは反映されてませんでした。
検証ツールで反映されてない原因がCSSが読み込めないって言うことでの質問ですよね。
まずは上記URLを参考にstyle.cssが読み込めてるのか確認してください
(問題分けをしたい)
＆私の回答で示したindex.htmlおよびstyle.cssで背景が緑になることを確認してもいいです
```
.body {
background-color: red;
font-size: 50px;
}
```
試しに適当にcssを当てました。
Networkパネルを見て下にこう言うのが表示されました。
0 / 1 requests
0 B / 726 B transferred
0 B / 726 B resources
Finish: 3 ms
DOMContentLoaded: 30 ms
Load: 29 ms
そのページを見てもcssとどう言う風に関係があるのか分かりません。
.body
ではなく
body
では…
あとは、他の方の回答にありますようにrailsの時点でフレームワークに則った開発をしたほうが良いのでチームの方に聞いたほうが良いです。
すみません。
bodyでした、間違えてました。
そうした方がいいと思いますが、今更的な感じなので聞くに聞けません…
正常なときと異常なときのスクショを載せておきました。確認してみてください
＆念の為再度聞きますが、私の示してるコードでも背景変わらないんですよね？
度々、すみません。
deviceをgemにインストールしています。
なので新規登録画面の大元のビューはあります。
それに違うファイルを作成して下書きみたいにしようと思ってたのですが、
新規登録画面の大元のビューで触っていたら反映されました。
しかし、deviceのビューでやると何か問題あったりしますでしょうか？
後々面倒になるとか…そのビューの記述自体は怖いのでコメントアウトとかしてそこから修正しようかと思っています。
え…それって編集してるHTMLファイルを直接ブラウザで見てる(Chromeに編集してるhtmlファイルをドラッグで開いてる)わけではなく、HTTPやらHTTPSでアクセスしてるってことになりますよね…前提が崩れてる…
先ほどまでドラッグでhtmlを開いてました。しかし、開発してるのはlocalhostを使ってます。
私は新規登録画面なのでlocalhostで開けません。(メインのビューの画面になります)sign_upと後ろにつけたら新規登録画面を開けます。
その画面はdeviseでインストールした記述が反映されています。
私は自分で作ったビューをどのlocalhostで見たらいいか分からなかったので、同じファイルで拡張子をerbからhtmlに変えて実装しようと思ってました。(まだrailsのことよく分かっていないので行けると思っていました…)
そもそも「localhostを使っている」とかもう用語の使い方も怪しいですよ…。
ツギハギの付け焼刃的な知識ばかり身に着けても意味ないですし、改めてイチから学習するとか、周りの先輩に聞くとか、本当にそこからしたほうが良いと思います。なにか事故ってからでは遅いですよ。
私は新規登録画面なのでlocalhostで開けません
ー＞http://localhost/ で新規登録画面にはアクセスできない
(メインのビューの画面になります)sign_upと後ろにつけたら新規登録画面を開けます
ー＞http://localhost/sign_up で新規画面にアクセスできる
なんだろうなぁ…
自分が作ったhtml(erb.html)を見ようとするならば
railsのControllerでviewの指定を設定すればいいですor Controllerの追加などすればいいです
(というより新規画面の担当なのですから触っていいと思いますけど)
※もう質問内容とぜんぜん違うことになってる＆railsの話なので、railsの仕組みを理解してください
あなたの回答
tips
プレビュー
