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

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

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

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

Q&A

解決済

1回答

485閲覧

CSSが反映されません。

ryota_nzk

総合スコア5

CSS

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

0グッド

0クリップ

投稿2020/03/03 04:23

編集2020/03/03 05:00
コード ```### 前提・実現したいこと CSSが反映されません。 ホームページに作成したモックアップ(?)に色が付きません。 間違いがあれば教えてください。 ### 発生している問題・エラーメッセージ 教科書通りにプログラミング学習を進めているのですが、毎回CSSの内容が反映されません。 調べてみたものの解決策が見つかりません。 ### 該当のソースコード ```html コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>あなたのいいところ診断</title> </head> <body> <h1>あなたのいいところは?</h1> <p>診断したい名前を入れてください</p> <input type="text" id="user-name" size="40" maxlength="20"> <button id="assessment">診断する</button> <script src="assessment.js"></script> </body> </html>

CSS

1コード 2body{ 3 background-color: #04A6EB; 4 color: #FDFFFF; 5 width: 500px; 6 margin-right: auto; 7 margin-left: auto; 8} 9button{ 10 padding: 5px 20px; 11 background-color: #337AB7; 12 border-color: #2E6DA4; 13 border-style: none; 14} 15input{ 16 height: 20px; 17} 18

JavaScript

1コード 2(function () { 3 'use strict'; 4 5 })(); 6

試したこと

打ち間違いがないか何回も見直してみたものの見つかりません。
書いてる内容は教科書通りです。

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

パソコンはWindows10を使っており、VSCODEを使っています。VSCODEは英語バージョンのものを使っています。
よろしくお願いします。

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

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

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

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

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

m.ts10806

2020/03/03 04:37

マークダウンについては慣れないうちは手で打つのではなく投稿エリア上部のボタン使われた方が良いです。 コードについてはコードを選択状態にし<code>ボタンを押すのが最も間違いないです。 質問は編集できます。
kei344

2020/03/03 04:40

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。(「,,,」はバッククオートではないのでコードブロックになりません)
ryota_nzk

2020/03/03 04:52

失礼しました。書き直したのでもう一度確認していただければ幸いです。お手数おかけします。
kei344

2020/03/03 04:53

コードが全てコードブロック外にあります。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
ryota_nzk

2020/03/03 05:01

大変失礼いたしました。。これでできてるかと思います。
kei344

2020/03/03 05:02

編集ありがとうございます。
ryota_nzk

2020/03/03 05:06

お手数をおかけします。もし間違いが見つかりましたら教えてください。
kei344

2020/03/03 05:15

回答が付いているので、まずそちらを確認してください。
ryota_nzk

2020/03/03 05:25 編集

わかりました。ありがとうございます。
kei344

2020/03/03 05:26

(再掲)回答が付いているので、まずそちらを確認してください。 間違いについて指摘されています。
guest

回答1

0

ベストアンサー

CSSがHTMLとは別ファイルでしたら、そのHTMLからリンクさせる記述がHTMLに書かれていません。

「外部css 読み込み」とかで調べてください。

投稿2020/03/03 04:35

m.ts10806

総合スコア80765

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

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

ryota_nzk

2020/03/03 05:27

ありがとうございます。教えていただいた方法で読み込めたので、おそらくファイルが違うところにあるのかと思いました。もう一度試してみます。
m.ts10806

2020/03/03 05:31

んんん?読み込めたのにまた何を試すんでしょう?
ryota_nzk

2020/03/03 05:41

教科書に沿って学習しているので、できれば何もタグなどを付け加えずにcssを反映させて色を付けれるようにしようと思っています。
m.ts10806

2020/03/03 05:47

教科書遵守よりも各言語のルールや通常の実装方法の基本を学びましょう。 今の状態でHTMLに何も加えずに対応するのはほぼ無理です。 唯一外部ファイルリンクになっているassessment.jsに書けばHTML触らずの実現は不可能ではないですが、cssファイル要らなくなりますし、現時点の質問者さんの段階でやるものでもないです。
ryota_nzk

2020/03/03 05:51

わかりやすく説明していただきありがとうございます。納得しました。お時間とお手数をおかけして申し訳ありませんでした。ありがとうございました!
m.ts10806

2020/03/03 05:55

はい。 それにどんな書籍だろうとHTMLにリンク書かずにCSS反映させてるようなものって、ないと思いますけどね… CSSファイル作らせるならリンクさせるものです。 読み飛ばしたりしてるはずですよ。
ryota_nzk

2020/03/03 07:33

ありがとうございます。頭に入れておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問