Q&A
マルチポストは推奨されません。
https://teratail.com/questions/225484
元の質問を編集して、ソースコードを提示して下さい。
よって、こちらの新しい方か、元の方の質問を削除申請してください。
とにかく、新たに質問するのではなく、質問を編集・修正をお願いします。
そして、ソースコードは、キャプチャではなく、テキストで、質問本文に記載して下さい。
<code>ボタンで出てくる、コードブロック用文字列の中にソースコードを記載して下さい。
前提・実現したいこと
【CSSを読み込みたい】
発生している問題・エラーメッセージ
CSSのファイルが読み込めず、パスを確認したが原因がわからない。
該当のソースコード
(htmlのコード) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>takabee</title> <link rel=”stylesheet” href="style.css"> <link rel="stylesheet" href="reset.css"> </head> <body> <header class="header"> </header> <main class="wrapper clearfix"> <div class="main"> </div> <div class="sidemenu"> </div> </main> <footer class="footer"> </footer> </body> </html> （cssのコード） .header { width: 100%; } body { background-color: red; } .wrapper { width: 970px; margin: 30px auto 40px; } .main { display: block; float: left; width: 660px; } .sidemenu { float: right; wiidth: 275px; } .footer { width: 100%; }
試したこと
・パスの確認
補足情報（FW/ツールのバージョンなど）
すみません。初心者で何も知らず、教えていただき本当に感謝します。
質問の削除ができず、調べてみたところ質問の削除はできないと書いてあったのですが、どうやって削除すればいいでしょうか。
基本的にはできませんが、
teratail側に、削除を申請する、という形です。
どこかに、削除申請というボタンがありませんか？
ゴミ箱ボタンとか。
回答がついてしまうと、本当に削除不能になってしまうので、早めにされるとよいかと。
そして、新たに質問立てるのではなく、この質問を編集して下さい。
先程URLを貼った方の質問を削除申請しましょう。
削除リクエスト出来ました！ありがとうございます。
本題の質問についてのアドバイス等ありましたら是非教えていただければ嬉しいです。
よかったです。
まずは、
> そして、ソースコードは、キャプチャではなく、テキストで、質問本文に記載して下さい。
> <code>ボタンで出てくる、コードブロック用文字列の中にソースコードを記載して下さい。
これを実行しましょう。
キャプチャだと、わからないミスがあったりしますので、問題解決につながらない可能性が高いです。
また、ソースコードはそのまま貼り付けて下さい。
キャプチャの状態からそのままです。
（貼り付けた時修正加えると質問の意味がなくなります）
また、CSSのパスが合っているかはご確認下さい。
> また、ソースコードはそのまま貼り付けて下さい。
> キャプチャの状態からそのままです。
> （貼り付けた時修正加えると質問の意味がなくなります）
これ、やりましたよね？ 汗
CSSのコードがキャプチャと明らかに違います。
あ、コピーする場所間違えたみたいです。すみません汗
新しい状態だと、特にコードに問題は無さそうですが、それでも、ききませんか？？
あと、質問の間にコロコロ、ソースコード改変するのはやめて下さい。
問題となってる部分変わるので、回答が無駄になります。
これは私の回答云々ではなく、他者さんの時間を無駄にする行為なので、人としての問題です。
効きませんでした。泣
本当にすみません。teratailの規範に反する行為となるマルチポストを初めての質問でしてしまったせいか質問内容を仕上げることに気が行ってしまいました。今度から気を付けます。汗
わかりました。
どうか、私の回答のコメントの方、お答えお願いします。
回答2件
0
ベストアンサー
HTML
1<!-- ↓ ↓ 全角になっているので半角にしましょう --> 2 <link rel=”stylesheet” href="style.css"> 3 <link rel="stylesheet" href="reset.css">
あと、
0. reset.cssはstyle.cssより前に置きましょう。
0. wiidth⇒width
0. lang="en"
投稿2019/11/25 18:00
総合スコア69596
あとは、「保存をしていない」とか。
回答ありがとうございます。
1,2,3すべて試させていただきました。ですがうまくいきませんでした泣
試しに<style>タブを挿入して背景色指定したら今度はうまくいきました。
「タブ」は「タグ」のことでしょうか。それであれば、以下のような部分が原因です。
1. CSSの置き場所が違う
2. CSSのファイル名が違う
3. CSSが保存・更新されていない
HTMLが置かれている場所と、CSSの置かれている場所は同じですか？
スクリーンショットからはCSSは別の場所においてあるように見えます。
タグです。すみません。
やはりCSSのほうに問題があるのですね。
ぜひ試させていただきます。ありがとうございます。
保存した結果、うまくいきました！
本当にありがとうございます！
プレビューの使い方をもう少し勉強したいと思います汗
0
パスが合っているなら、
キャップチャの方のコードである、
4行目が原因かと思われます。
css
1body { 2 background-color: red; 3} 4}
} が一個多いので、CSS構文エラーが起きているはずなので、それが原因かと。
消してまだ効かなければ、パスが合っているかご確認下さい。
投稿2019/11/25 17:33
総合スコア9555
該当箇所を直したのですが、まだ表示されませんでした。パスにも異常はないように思われます。
CSSのどの部分が効いてないんですか？？
body {
background-color:red;
}
のところですね。
全体が赤くなるのがCSSがきいていることの判断基準だと思うのですが、、、。
.mainと、.sidemenuに対して、float効かせているのが怪しいです。
それによって、bodyの高さが0になり、結果効いてないように見えるだけかも。
ようは、clearfixが効いてないってことです。
reset.cssの中身も掲示お願いします。
reset.css と style.css の読み込み順、逆だと思います
回答ありがとうございます。
親要素の.wrapperにclearfixを追加しましたがうまくいきませんでした。泣
reset.cssのほうには何も書いてありません。
読み込み順を直しても赤くなりませんでした。
Kosuke_Shibuyaさん>ありがとうございます・・・！
質問者さん> この点プラスαで、kei344さんが回答してくださっています。
そちらでいかがでしょうか？？
コメントが前後してしまいましたが、
> 親要素の.wrapperにclearfixを追加しましたがうまくいきませんでした
これだけではうまくいきません。
.crearfixに対して、ある有名なfloat解除のCSSを適用させないと、
floatを効かせている親ないし、その親も高さが0になります。
なので、floatは、初心者の人が使いこなせるものではないので、
display: flexを使った方がいいかと思います。
（横並びにさせたい要素の親要素にきかせる）
試しに<style>タブを追加して背景色を赤に指定したところ、全体が赤くなりました。
なのでfloatの影響ではないと思います。やはり私の読み込み方に問題があると思いますが、miyabiさんは他の問題点を考えていたりしますか？
なるほど。
そうなると、kei344さんのコメントの通り、CSSの読み込み不備かと思います。
CSSへのパスが合っているか、など今一度ご確認下さい。
それと、それこそキャプチャで構いませんので、
ディレクトリ構造（HTMLファイルとCSSファイルの位置関係がわかるもの）を質問文に掲示してください。
保存をしたところうまくいきました！
こんなくだらないことでお時間とってしまい、本当に申し訳ございません。
また、teratailの質問を初めてさせていただいた私に、至らないところを多々教えていただき、それにもかかわらず根気強く付き合っていただいたことに本当に感謝します。
解決されて何よりです。
ベストアンサーを選出して、質問を閉じましょう。
あなたの回答
tips
プレビュー
