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

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

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

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

CSS

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

Q&A

解決済

2回答

515閲覧

cssが上手く反映されません

KongIho

総合スコア3

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/06/18 03:18

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
ドットインストールのコードを模写しています。

発生している問題・エラーメッセージ

cssが反映されなくて困っています。同じような質問をされている方の回答で制御文字があるとのヒントがあったのですが、
制御文字がどれに当たるのか分からないままです。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Guocaiのポートフォリオサイト</title> <link rel="icon" href="favicon.png"> <meta name="description" content="Guocaiのポートフォリオサイトです"> <link ref="stylesheet" href="css/styles.css"> <body> <header> <img src="img/image1.jpeg" width="120" height="120" alt="美しい名画のアイコンです"> <h1>プログラミングはじめました</h1> <p>在宅時間が増えたので、プログラミングはじめました</p> <ul> <li> <a href="https://www.ueno-panda.jp" target="_blank"> <img src="img/blog.png" width="20" height="20" alt="パンダの世界へようこそ"> </a> </li> <li> <a href="https://www.ajfarm.com/15836/" target="_blank"> <img src="img/photo.png" width="20" height="20" alt="りんごの世界へようこそ"> </a> </li> </ul> </header> <section> <h1>初めてのサイト</h1> <section> <img src="img/image2.jpeg" width="400" height="200" alt="旅行の写真1"> <h1>とても地道な作業</h1> <p>プログラミング必修科目</p> </section> <section> <img src="img/image4.jpeg" width="400" height="200" alt="旅行の写真2"> <h1>HTML CSSマスターしたい</h1> <p>素敵なHPを作りたい。</p> </section> <section> <img src="img/image5.jpeg" width="400" height="200" alt="旅行の写真3"> <h1>コードが早くかけると嬉しい</h1> <p>カッコいいHPを作りたい。</p> </section> </section> <footer> <p>(c).guocai.com</p> </footer> </body> </head> </html>

試したこと

<link ref="stylesheet" href="css/styles.css">に原因があると思い、href属性のcssの名前を変更したりしてみたり、ref属性の"stylesheet"という名前を変更してみたりしましたが反映されませんでした。

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/06/18 03:24 編集

ブラウザのキャッシュのせいで css ファイルの内容を変更したのにその結果が反映されないというようなプリミティブなことはないでしょうね? コードは ``` と ``` で囲ってください(``` はバッククォート 3 つ)。インデントされて見やすくなるので。インデントされてないコードは質問者さん自身も読む気がしないのでは? 赤の他人の閲覧者・回答者はなおさらです。
dit.

2020/06/18 03:31

HTMLと同じ階層にcssというフォルダがあり、そこにstyles.cssというCSSファイルがあるという記述ですがファイルの位置関係や名前は間違っていませんか?
Lhankor_Mhy

2020/06/18 03:35

画像は表示されていますか?
KongIho

2020/06/18 05:05

初歩的な質問にも関わらずご丁寧にご回答いただき、 感謝申し上げます。 ありがとうございました。
guest

回答2

0

ベストアンサー

ええと、link要素で"stylesheet"という値を設定するのは、ref属性ではなくrel属性です。

CSS

1<link rel="stylesheet" href="css/styles.css">

ほかにも</head></body>の直後にありますが、これは<body>直前に書いてください。
それから、なんでもかんでも<h1>を使わず、<h2><h3>(以下略)を適切に使いましょう。

投稿2020/06/18 03:52

編集2020/06/18 03:56
Daregada

総合スコア11990

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

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

0

作成されたスタイルシートのファイル名と<link ref="stylesheet" href="css/styles.css">のファイル名はあっていますか?

投稿2020/06/18 03:38

soraatori

総合スコア55

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問