Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
また、一つ前の質問からどう進んだのでしょうか。「2日ほど苦戦しています」とか書かなくていいような。
質問は編集できます。
HTMLとCSSの練習を行っています。2日ほど苦戦しています。一向にロゴの大きさが変わりません。
1 2class名をつけて、CSSにも」対応するようにしていますが、なぜか反応しません。 3どうやら、CSSに対応しないようなコードを書いていたようです。 4ツールを使って、原因を追究した結果以下の4つが表記されました。 5 6それぞれの原因について、教えていただけることは可能でしょうか？ 7それぞれ調べた結果、「スペルミスなどのようですが、私は見つけることができませんでした。 8 91 semi-colon expected(4,1) 102 [CSSTree] At-rule `@charset` has no known descriptors(5,6) 113[CSSTree] Invalid value for `@charset` prelude(4,1) 124[CSSTree] Invalid value for `font-family` property(8,54) 13 14どうか、解決策を教えていただきたいです。何卒よろしくお願いいたします。 15 16下記にコードを書きます。 17 18```【HTML】 19コード
<! doctype html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>WCB Cafe</title> <meta name= "description" content= "ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <!---CSS----> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="https://fonts.googleeapis.com/css?family=Philosopher" <link rel="stylesheet" href="./Wcbcafe.css" type="text/css"> </head> <body> <header class="page-header"> <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="manu.html">Manu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> </body> </html>コード
@charset"UTF-8"
/共通事項CSS----------------/
html{
font-size: 100%;
}
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium" Yu Gothic,"游ゴシック体"
ヒラキノ角ゴ pro3s Wps sans-serif; line-height:1.7;
color: #432;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}
/* Header*/
.logo{
width: 210px;
margin-top: 14px;
}
.main-nav{
display: flex;
font-size: 1.25em;
text-transform: uppercase;
}
すでに何度か指摘されているようですが、teratailには質問や回答を見やすく・わかりやすくするための機能が備わっています。
今回はコードを以下のような形で書き対応をお願いします。
```html
ここにHTMLのコード
```
（※1行以上開ける）
```css
ここにCSSのコード
```
コードブロックになっていないとインデントが自動で削除されて表示されたりします。
全角スペースが入っていてもこの状態ではわからないので対応をお願いします。
もう一つ。
そもそもCSSは問題なく読み込めていますか？
body{backgrund-color:#000;}とか明らかに見た目が変わるようなものを入れて確認してみてください。
まずは一度、CSSを body{backgrund-color:#000;} だけにしてみてください。
背景色は黒になりますか？
これがだめならそもそもCSSが読み込めていません。
ファイル名は間違っていませんか？CSSとHTMLは同じフォルダにありますか？
今の書き方は「表示させようとしているHTMLと同じフォルダ（階層）にWcbcafe.cssという名前のCSSがある」状態です。大文字小文字も区別される場合がありますので統一してください。
解決できました。階層のb￥問題でした。
dit.さんにもうひとつ質問です。
HTML＆CSS入門の本には
同じ階層AにCSSフォルダーとHTMLのファイルを創り、フォルダー内にCSSファイルを入れていました。
しかし、実際は反応しませんでした。疑問です。なぜでしょうか？
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
[階層A]
├index.html
└[style]フォルダ
└Wcbcafe.css
上記のような場合、
<link rel="stylesheet" href="./Wcbcafe.css" type="text/css">
ではなく
<link rel="stylesheet" href="./style/Wcbcafe.css" type="text/css">
という書き方になると思います。
dit.さんありがとうございます！！！！
回答1件
0
ベストアンサー
タグの閉じ忘れが原因です。
<link rel="stylesheet" href="https://fonts.googleeapis.com/css?family=Philosopher"
この手のtypoで2日も時間を潰すのはもったいないので、コードエディタなどを使った方がいいと思います。
質問の変更に合わせて追記
それぞれの原因について、教えていただけることは可能でしょうか？
1 semi-colon expected(4,1)
2 [CSSTree] At-rule@charsethas no known descriptors(5,6)
3[CSSTree] Invalid value for@charsetprelude(4,1)
semi-colon expected とは、日本語で書くと、「セミコロンがあるはず」ぐらいの意味です。
原因は、スペース忘れとセミコロン忘れです。
@charset"UTF-8"→@charset "UTF-8";
4[CSSTree] Invalid value for
font-familyproperty(8,54)
カンマ忘れです。
CSS
1font-family: "Yu Gothic Medium", "游ゴシック Medium" Yu Gothic,"游ゴシック体"/*,*/ 2ヒラキノ角ゴ pro3s Wps sans-serif; line-height:1.7;
このような打ち間違いで3日も消費するのはもったいないので、コードエディタを使うことをおすすめします。
投稿2021/03/01 02:16
編集2021/03/02 09:05
総合スコア36087
＞このような打ち間違いで3日も消費するのはもったいないので、コードエディタを使うことをおすすめします。
同意の意を込めて+1。
回答いただき、本当にありがとうございます！！
とても嬉しいです！
ですが、HTMLにCSSが反映されていません。
ファイル名は同じです。
ファイルの場所もあっているはずです。
確認お願いいたします。
HTMLと同じ階層にCSSファイルとimagesファイルがあります。
それぞれのファイルの中に、テキストと画像があります。
度々、恐縮です！！お答えいただけると幸いです。
Lhankor_Mhyさんが先日言ってくださり、VSCODEインストールいたしました。
K＿３５７８さんもありがとうございます！！
「確認お願いいたします」とのことですが、回答する前に確認をしています。
また、「HTMLにCSSが反映されていません」とは、具体的には何が起きていますか？
・こうなると思って
・このコードを書いたが
・残念ながらこうだった
のように、期待とコードと結果をご提示ください。
かしこまりました。
分かりにくい質問で、申し訳ありません。
ロゴの大きさを変更させたいと思い
コード【CSS】
.logo {
width: 210px;
margin-top: 14px;
}
.main-nav{
display: flex;
font-size: 1.25em;
こちらを書きましたが、残念ながら
ロゴがサイズが変更されないまま大きいままです。
また、背景色も変えようと試みましたが反応されませんでした。
何卒よろしくお願いいたします。
当方では問題が再現しませんでした。
当方の現状のコードと、free_takeさんの現状のコードが異なるのだと思います。
追記前に書いた、タグの閉じ忘れは修正していますか？
遅くなりました。汗
修正してあります。実は、Lhankor_Mhyさんからエディターを作るアドバイスを頂き
Visual Studio codeを使っています。問題も表示されないのですが、なぜかロゴが拡大されません。
なぜなのでしょうか？
おそらく、コードのどこかが違うのでしょう。
font-familyの修正がもう少し必要そうです。
カンマと引用符がいくつか不足してます。
font-family: "Yu Gothic Medium", "游ゴシック Medium", Yu Gothic, "游ゴシック体", "ヒラキノ角ゴ pro3s Wps", sans-serif;
ただし、おそらく「游ゴシック Medium」のスペースが全角になっているのと、「ヒラキノ角ゴ pro3s Wps」というフォントは「ヒラギノ角ゴ Pro W3」のミスだと思われます。
そのため正しくは以下になるかと。
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
dit さんご回答いただきありがとうございます。
改めて改めて、添付いたします。
```html
ここにHTMLのコード
<! doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WCB Cafe</title>
<meta name= "description" content= "ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
<!---CSS---->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="https://fonts.googleeapis.com/css?family=Philosopher">
<link rel="stylesheet" href="Wcbcafe.css" type="text/css">
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<header class="page-header">
<h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="news.html">News</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
（※1行以上開ける）
```css
ここにCSSのコード
@charset "UTF-8";
/*共通事項CSS----------------*/
html{
font-size: 100%;
}
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", Yu Gothic, "游ゴシック体", "ヒラキノ角ゴpro3s Wps", sans-serif;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}
/* HEADER
------------------------------- */
.logo {
width: 210px;
margin-top: 14px;
}
.main-nav{
display: flex;
font-size: 1.25em;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main-nav li{
margin-left: 36px;
}
.main-nav a{
color:#432;
}
.main-nav a:hover{
color: #0bd;
}
Lhankor_Mhyさんの回答の補足のつもりだったので、私のコメントは回答ではありません。
「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」の内容ですよね。
他の方が成果物としてアップしているページも見て画像を拝借し、試してみましたが先ほどコメントに提示されたコードでロゴが横幅210pxで表示されているようです。
<! doctype html>のスペースが気になりましたが（<!doctype html>）そのままでも一応表示はされました。
あと、ありそうな原因は、CSSに全角スペースが紛れているとかでしょうか。
（一度もmdで投稿されていないので、検証しようがない）
マルチポストをしているようですが、そんなことをしている時間があるならば、dit.さんのご指摘にこたえてMarkdownでCSS部分を記載すべきです。
マルチポストすみません。いけないことを今感じたので以後気を付けます！！
＠dit.さん、検証してくださり、ありがとうございます！！
<!doctype～>を修正致しました。
そうなんです！！
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座の内容です（笑）
つまりは正しい表記ということなんでしょうか？
Lhankor_Mhyさん、失礼いたしました。また解決できたことをご報告いたします！m(__)m
ご解決されて何よりです。
あなたの回答
tips
プレビュー
