Q&A
コードブロックは複数行対応できるので調整いただけますか？毎行 かかっていてはコピペ機能が使えませんしこれはこれで読みづらいので…。冒頭の```には```css、```JavaScriptなど言語名を入れてください
ChromeのコンソールとCSSについてです。
先に悩んている点から
・Chromeコンソールを起動させると
Refused to apply style from 'http://localhost:4567/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
が出てきます。
※JavascriptのHello,worldもちゃんと出てきています。
・erbに<link rel="stylesheet" href="style.css">と記入してhttp://localhost:4567/を起こしても正しくCSSが反映されていない。
以上の二つです。
ソースは
index.erb
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="../css/style.css" 6 <title><%=@title%></title> 7</head> 8<body> 9 <script>console.log("Hello, World");</script> 10 <h1><%=@title%></h1> 11 <p><strong><%=@subtitle%></strong></p> 12 <main> 13 <div class="main-container"> 14 <div class="sidebar"> 15 <p><%=@title%></p> 16 </div> 17 <div class="maincol"> 18 <div class="maincol-container"> 19 <p><%=@aaa%></p> 20 <p> 21 <ul> 22 <li><%=@bbb%></li> 23 <li><%=@ccc%></li> 24 <li><%=@ddd%></li> 25 </ul> 26 </p> 27 </div> 28 </div> 29 </div> 30 </main> 31</body> 32</html>
style.css
1html *{ 2box-sizing: border-box; 3} 4body { 5margin: 0; 6} 7main{} 8.main-container { 9overflow: hidden; 10padding: 0 0 40px 0; 11background: #fff; 12} 13.sidebar { 14float: left; 15margin: 0 0 0 20px; 16padding: 30px 0 30px 0; 17width: 100%; 18} 19.maincol { 20float: left; 21margin: 0 20px 0 -360px; 22padding: 30px 0 30px 0; 23width: 100%; 24} 25.maincol-container { 26margin-left: 360px; 27} 28h1 { 29color: #ff00f0; 30}```
myapp.rb
1require "sinatra" 2require "sinatra/reloader" 3require "erb" 4get "/" do 5 "<html><body>" + 6 '<link href="style.css" type="text.css" rel="stylesheet" />' + 7 '<script src="main.js" type="text/javascript" ></script> ' 8 "</html></body>" 9 @title="Hello" 10 @subtitle="Welcome to the world of sinatra and ruby." 11 @aaa="Morning" 12 @bbb="会社概要" 13 @ccc="お知らせ" 14 @ddd="その他" 15 erb :index 16end
です。
ファイル構成は
C:Ruby→myapp.rbとviewsファイル↙
viewsファイル→index.erbとpublicファイル↙
publicファイル→style.css
です。
２つをどう改善すべきなのでしょうか？
よろしくお願いします。
style.cssをリクエストした際のレスポンスヘッダはどうなっていますか？
すいません。変更しました。
chromeブラウザでshift+ctrl+jでNetworkのレスポンスを確認したところ、localhostにhtmlの情報が入っていてstyle.cssには何も書いてありませんでした。
レスポンスヘッダがわからなくて色々調べてみたのですが結局どこかわからずこれと思ったものをお伝えしました。間違っていたらすいません！
Networkであっています。style.cssのところのスクリーンショットを載せることはできますか？
少々お待ちください。
回答1件
0
ベストアンサー
エラーを見る限りですと、MIMEタイプが指定されていないために
起きたものだと思われます。
css
1<link rel="stylesheet" href="style.css">
このように指定されているところを
css
1<link rel="stylesheet" href="style.css" type="text/css">
このようにするとうまくcssとして読み込むんじゃないかと思います。
MIMEタイプはかなり厳密なのでフォーマットが何であるか
しっかり示してあげる必要がありますね
投稿2018/11/29 01:20
総合スコア480
あなたの回答
tips
プレビュー
