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

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

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

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

CSS

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

Q&A

解決済

1回答

737閲覧

HTML とCSSの連携が出来ない問題

Shido

総合スコア2

HTML

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

CSS

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

0グッド

1クリップ

投稿2022/09/16 08:05

編集2022/09/20 17:15

前提

プログラミング初心者です。Bracketsを使用して、本で学んだ通りにコードを書いてみましたが、連携していないようです...
過去の質問も参考に、問題解決に努めましたが、解決する事ができませんでした。どんな些細な事でも構いませんので、ご意見お聞かせ頂けますと幸いです。

実現したいこと

HTMLとCSSを連携させたい。

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

CSSの色や、フォントを変更しても変化がないため、連動していないものと思います。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<tiltle>サンプルページ</tiltle> 6<link href="css/style.css" rel="stylesheet"> 7</head> 8<body> 9 10 <!-- header始まり--> 11 <header> 12 <div class="logo"> 13 <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a> 14 </div> 15 <nav> 16 <ul class="global-nav"> 17 <li><a href="portfolio.html">Portfolio</a></li> 18 <li><a href="about.html">About</a></li> 19 <li><a href="contact.html">Contact</a></li> 20 </ul> 21 </nav> 22 </header> 23 <!-- header終わり--> 24 25 <!-- wrap始まり--> 26 <div id="wrap"> 27 <div class="content"></div> 28 </div> 29 <!-- wrap終わり--> 30 31 <!-- footer始まり--> 32 <footer> 33 <small>(c)2017 Hattori-studio.</small> 34 </footer> 35 <!-- footer終わり--> 36 37</body> 38 39 40</html>

該当のソースコード

CSS

1@charset "utf-8;" 2 3 body{ 4 margin:0; 5 padding:0; 6 background-color: #cccccc; 7 color:#333333; 8 font-size:15px; 9 line-height:2; 10} 11 12p,h1,h2,h3,h4,h5,h6 { 13 margin-top:0; 14} 15 16img{ 17 vertical-align:bottom; 18} 19 20ul{ 21 margin:0; 22 padding:0; 23} 24 25a{ 26 color:#3583aa; 27} 28 29a:visited{ 30 color:#788d98; 31} 32

試したこと

フォルダの階層に間違いがあるのかを確認しました。

ご指摘頂いた通り、cssのフォルダが、大文字でCSSとなっていたため、小文字に直し、再度試してみました。
イメージ説明
イメージ説明

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

本の見本と見比べてみましたが、違いが分かりませんでした。

以下が開発者ツールのスクリーンショットです。
イメージ説明
イメージ説明

見本のソースコード(私のコードはまだ途中ですので見本は、少し先の内容も含んだものです)

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>サンプルページ</title> 6<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet"> 7<link href="css/style.css" rel="stylesheet"> 8</head> 9<body> 10 11 <!-- header始まり --> 12 <header> 13 <div class="logo"> 14 <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a> 15 </div> 16 <nav> 17 <ul class="global-nav"> 18 <li><a href="portfolio.html">Portfolio</a></li> 19 <li><a href="about.html">About</a></li> 20 <li><a href="contact.html">Contact</a></li> 21 </ul> 22 </nav> 23 </header> 24 <!-- header終わり --> 25 26 <!-- wrap始まり --> 27 <div id="wrap"> 28 <div class="content"> 29 </div> 30 </div> 31 <!-- wrap終わり --> 32 33 <!-- footer始まり --> 34 <footer> 35 <small>(C)2017 Hattori-studio.</small> 36 </footer> 37 <!-- footer終わり --> 38 39</body> 40</html>

見本のソースコード(見本は、少し先の内容も含んだものです)

CSS

1@charset "utf-8"; 2 3body { 4 margin: 0; 5 padding: 0; 6 background-color: #cccccc; 7 color: #333333; 8 font-size: 15px; 9 line-height: 2; 10} 11 12p,h1,h2,h3,h4,h5,h6 { 13 margin-top: 0; 14} 15 16img { 17 vertical-align:bottom; 18} 19 20ul { 21 margin: 0; 22 padding: 0; 23} 24 25a { 26 color: #3583aa; 27 text-decoration: none; 28} 29 30a:visited { 31 color: #788d98; 32} 33 34a:hover { 35 text-decoration: underline; 36} 37 38header { 39 width: 960px; 40 height: 100px; 41 margin: 0 auto; 42} 43 44.logo { 45 float: left; 46 margin-top: 50px; 47} 48 49.global-nav { 50 float: right; 51 margin-top: 60px; 52} 53 54.global-nav li { 55 float: left; 56 margin: 0 20px; 57 font-size: 20px; 58 list-style: none; 59 font-family: 'Bitter', serif; 60} 61 62.global-nav li a { 63 color: #ffffff; 64} 65 66.global-nav li a:hover { 67 border-bottom: 2px solid #ffffff; 68 padding-bottom: 3px; 69 text-decoration: none; 70} 71 72#wrap { 73 clear: both; 74} 75 76.content { 77 width: 960px; 78 margin: 0 auto; 79} 80 81footer { 82 text-align: center; 83 color: #ffffff; 84 padding: 20px 0; 85} 86 87footer small { 88 font-size: 12px; 89}

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

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

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

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

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

m.ts10806

2022/09/16 08:41

コードは画像では手元で確認できませんのでテキストでマークダウンのcodeにてご提示ください
Shido

2022/09/16 10:27

質問の作法を心得ておらず、大変申し訳ございませんでした。 修正を加えました、ご確認頂けますと幸いです。
guest

回答1

0

ベストアンサー

大文字と小文字は別です

投稿2022/09/16 08:42

編集2022/09/18 21:48
m.ts10806

総合スコア80765

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

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

Shido

2022/09/16 10:32

申し訳ございません、どちらの箇所をご指摘いただいているのか教えて頂いてもよろしいでしょうか? 参考書とは、見比べたのですが分かりませんでした...
Shido

2022/09/16 10:36

今気づきました、フォルダ名が大文字になっておりました!! 修正されるか、試してみます。
Shido

2022/09/16 10:56

修正されませんでした..... 引き続き、探してみます。
m.ts10806

2022/09/16 11:30

「修正される」というのがちょっと表現として不適当だとは思うのですが、 ブラウザで動作確認したときに、開発ツールコンソールにエラー等出ていませんか? 「CSSがリンクできていない」なら404 Not Foundが出ています。 出てないならキャッシュかもしれません。 ひとまずbodyの背景色など「明らかに確認できるもの」などミニマムなコードで確認してみてください。
Shido

2022/09/16 13:33

表現が適切でなく、申し訳ございません。 開発ツールのスクリーンショットを新たに、「補足情報」に添付致しました。見慣れていないページのため、把握しきれていない可能性もございますが、エラーは表示されていないようです。 404 Not found が出ないので、リンクされてはいるという事だと思います... ネットで調べた方法で、google 左上の「再読み込み」のボタンを右クリックし、「キャッシュをなくし、ハードリロード」を選択しましたが、変化はありませんでした。 またBracket を使用しコードを書き込んでおりますので、編集後(背景色を変化させる等)、ライブプレビューボタンを押し、毎回Googleを起動しており確かめておりますが変化はありませんでした。 親身にご相談頂き大変ありがとうございます。解答が的を得ていない様でしたら大変申し訳ございません。
m.ts10806

2022/09/16 18:50 編集

CSSにとっての終端 ;  がないことで「@charsetが終わってない」と判定されているのだと思います。 ただ、私もBracketsは利用することがありますが、このCSSはBracketsのチェックでFatal error出てますね。 CSSLintに引っ掛かってます。
Shido

2022/09/18 11:24

コメントありがとうございます、プログラミン学習初期段階で躓きそうですので、とりあえずこの単元は見本を使い次に進んでみようと思います。親身に相談に乗って頂きありがとうございました。
m.ts10806

2022/09/18 21:50

>低評価された方 理由をコメントを。 >質問者さん 書いた通りに動くのがプログラミングなので、1つ1つ確認しながらやってみてください。 「あぁここかぁ!」みたいなのが多いです(「参考書の通り書いたつもり」でも、それは”つもり”で自身が知ってるそれっぽい記号にかえてるパターンとかよくあるので) ひとまず質問受付中のままですので、進まれるのでしたらいったん解決済みにしてもらえると。
Shido

2022/09/19 13:13

本当に、大変助かりました。ありがとうございました。 低評価をつける方の理由は分かりませんが、僕にとっては間違いなくベストアンサーでした!! 初めたばかりですが、ご指摘頂いたとおり一つずつ確認しながら書いていこうと思います。
m.ts10806

2022/09/20 08:15

解決されたようで何よりです。 追いかけまわして嫌がらせをするような人が一部いるので、 運営に対処を適宜依頼してるところです。 投稿編集してコメントで依頼することで催促はしてるので、 その催促に応じない=嫌がらせ と断定しています。 ※ちゃんと指摘してくれる人は一定いるし、真面目に回答してるので何が間違ってるのか聞かなきゃわからない。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問