フルスクリーンページ作成の際、表示画像の大きさ変更を行った際のエラー

今回、フルクリーンページを作成しようとしています。
それで、ロゴのlogo.svgファイルをHTMLで作成したファイルに読み込んでCSSを用いて画像の大きさの変更を行いたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="utf-8">
6    <title>WCB Cafe</title>
7    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
8
9    <!--CSS-->
10    <link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css">
11    <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
12    <link herf="css/style.css" rel="stylesheet">
13
14  </head>
15
16  <body>
17    <header class="page-header">
18        <h1><a herf="index.html"><img class="logo" src="images/logo.svg" alt="WCB Cafeのロゴ"></a></h1>
19        <nav>
20         <ul class="main-nav">
21           <li><a herf="news.html">News</a></li>
22            <li><a href="menu.html">Menu</a></li>
23            <li><a href="contact.html">Contact</a></li>
24          </ul>
25        </nav>
26    　</header>
27  </body>
28</html>
29

そして、これがCSSを用いて作成したstylesheetです。

CSS
1@charset "UTF-8";
2
3/*共通部分*/
4html {
5  font-size: 100%;
6}
7body {
8  font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ　Pro W3",sans-sans-serif;
9  line-height: 1.7;
10  color: #432;
11}
12a {
13  text-decoration: none;
14}
15img {
16  max-width: 100%;
17}
18
19/*hedaer*/
20.logo {
21  width: 210px;
22  margin-top: 14px;
23}
24

ロゴ画像のみを表示するファイルを作成しました。
保存先は上のコードを保存していた場所とは違うデスクトップにて保存しています。

HTML
1<!doctype html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>画像</title>
7  <meta href="description" content="画像サイズ変更">
8
9  <link href="style.css" rel="stylesheet">
10</head>
11
12<body>
13  <h1><a href="index.html"><img class="logo" src="logo20200326.svg" alt="ロゴ画像"></a></h1>
14</body>
15
16</html>

CSS
1@charset "UTF-8"
2
3html {
4  font-size: 100%;
5}
6body {
7  font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ　Pro W3",sans-sans-serif;
8  line-height: 1.7;
9  color: #432;
10}
11a {
12  text-decoration: none;
13}
14img {
15  max-width: 100%;
16}
17.logo1 {
18  width: 210px;
19  display: block;
20}

new1ro

2020/03/24 21:36 編集

> ロゴのlogo.svgファイルをHTMLで作成したファイルに読み込んでCSSを用いて画像の大きさの変更を行いたいです。画像 (= logo.svg) を大きくしたいものの、できない、という"エラー"でしょうか? であれば解決策は .logo { width: 400px; } など、widthに好きな数字を入力すればOKです！

m.ts10806

2020/03/24 22:07

質問が２つあります。どちらかに絞った方が良いのでは（私は2つ目に対してのみ応えてますが）

deruta0104

2020/03/26 01:02

回答ありがとうございます。小さくしたいのですがそこの数値を変えても最初に表示されている大きさから変化がないです。もし対策案が分かりましたら教えていただきたいです

m.ts10806

2020/03/26 01:08

質問は編集できますので適宜調整してください

new1ro

2020/03/26 01:24

> 回答ありがとうございます。小さくしたいのですがそこの数値を変えても最初に表示されている大きさから変化がないです。もし対策案が分かりましたら教えていただきたいです > 小さくしたいのですがロゴを小さくしたい、と認識しました。 > そこの数値 .logoの「width」と認識しました。 .logo { width: 10px; display: block; } でいかがでしょうか? もし変わらなければ、キャッシュか、ファイルが保存できていないか、別のファイルを編集している可能性もあります。普段使っていないブラウザでアクセスしてみたり、「css/style.css」でしょうか? CSSファイルの名前を一時的に「style.css_20200326」変更してみるなども試してみたほうがいいかもしれません。

deruta0104

2020/03/26 01:40

回答ありがとうございます。キャッシュはコマンド＋rでスーパーリロードしました。ファイル保存も全ファイルを再保存しました。 cssのファイル名も変更してみました。ご指摘あった箇所は全て修正をかけてみましたが、画像サイズは変更されませんでした。もし、さらなる対策案等ありましたらご指摘いただきたいです

行動規範の内容に同意します

回答2件

Google Chromeであれば画面上で「右クリック > 検証」後、
上部タブの「Console」を選択すると、エラーメッセージは表示できます。

あとHTMLやCSSの構文チェックはWeb上にあります。
HTMLのエラーチェック
 CSSのエラーチェック

投稿2020/03/24 21:28

編集2020/03/24 21:40

new1ro

総合スコア4528

ベストアンサー

開発エディタはIDEを利用すれば構文チェックもしてくれます。
（大抵はHTML-Lintの仕組みが入っています）
HTMLやCSSはいわゆるプログラミング言語で言う「エラー」がないものなので、
何かしらで構文解析にかけるしかありません。
ブラウザで表示時には特にChromeは閉じ忘れを調整してくれたり
勝手に色々やってくれるところもあります。

ただ、メリットと言えばブラウザの開発ツールで構造や値を調整して
疑似的に（あくまで疑似的に）レイアウトを調整できる点です。
それもある意味「デバッグ」の一環と言えるのかなと個人的には思います。
デベロッパーツール（開発者ツール）でCSSを丸裸にする

投稿2020/03/24 21:56

編集2020/03/24 22:06

m.ts10806

総合スコア80875