HP：画像サイズの変更ができない。

前提・実現したいこと

HTMLでプロフィールサイトを作成しています。
ヘッダーに「Profile」画像を挿入し、
CSSにてサイズ変更を試しましたが上手く適用されず小さくなりませんでした。

■作成中のホームページURL（プロフィールサイト）
http://jaqkxsuke.sakura.ne.jp/profile/index.html

■使用言語
・HTML
・CSS

■レンタルサーバー
・さくらインターネット（ライト）

■プログラミング経験
・経験年数：4か月
・学習方法：Progate歴3ヶ月（HTML,CSS）
・コードを見た時に何が書いてあるか理解できますが、
私自身で記述できるレベルには到達していません。

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

■エラーページ↓↓

■見本ページ↓↓

該当のソースコード

ソースコード：

■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Profile</title>
</head>

<body>

<header id="header" class="wrapper">
<h1 class="site-title"><a href="index.html"><img src="img/logo.svg" alt="Profile"></a></h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#bicycle">Bicycle</a></li>
</ul>
</nav>
</header>

<main>
<div id="mainvisual">
<img src="img/mainvisual.jpg" alt="テキストテキストテキスト">
</div>

<section id="about" class="wrapper">
 <h2 class="section-title">About</h2>
 <div class="content">
  <img src="img/about.jpg" alt="テキストテキストテキスト">
  <div class="text">　  
   <h3 class="content-title">FUJIMOTO YUSUKE</h3>
   <p>
    テキストテキストテキストテキストテキストテキストテキスト
　　テキストテキストテキストテキストテキストテキストテキスト
　　テキストテキストテキストテキストテキストテキストテキスト
    </p>
   </div>
  </div>
</section>
</main>
</body>
</html>

■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

@charset "UTF-8";

html {
 font-size: 100%;
}

img {
 max-width:100%;
}

.site-title {
 width: 120px;
 line-height: 1px;
 padding:10px 0px;
}

#mainvisual {
 margin-bottom: 80px;
}

#mainvisual img {
 width: 100%;
 max-width: 1920px;
 height: 600;
 object-fit: cover;
}

試したこと

「Profile」画像の下記CSSの記述を確認しましたが、
特に誤字はありませんでした。

.site-title {
 width: 120px;
 line-height: 1px;
 padding:10px 0px;
}

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

■使用ツール
・Terapad

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

回答2件

ベストアンサー

cssがHTMLからリンクされていません。

投稿2021/02/27 09:16

m.ts10806

総合スコア80875

m.ts10806

2021/02/27 09:29

そしてその件は１つ前の質問で言及しています。

JAQKxsuke

2021/02/27 09:34

m.ts10806様お世話になります。 HTMLからリンクすることで、CSSが反映されました。ありがとうございます。

m.ts10806

2021/02/27 09:34

１つ前の質問で言及しています。

JAQKxsuke

2021/02/27 09:40

＞そしてその件は１つ前の質問で言及しています。どういう意味でしょうか？

m.ts10806

2021/02/27 09:43

https://teratail.com/questions/324980 m.ts10806 2021/02/27 13:47 編集要件変わりますので、いったん解決済みにしてください。 > https://teratail.com/help#resolve-myself > 後から読む人のためにも、具体的な解決手順を記載してください。 > CSSが効いていないのでしょうか？提示のコードのことならそもそもCSSがリンクされていません。

m.ts10806

2021/02/27 09:43

の > 提示のコードのことならそもそもCSSがリンクされていません。

JAQKxsuke

2021/02/27 09:48

教えて頂いた内容を行い、リンクできました。

m.ts10806

2021/02/27 09:54 編集

いや、前の質問で言及していたことをきちんと把握できてればこの質問はしなくてよかった　という話です。まぁ、書いたことが読まれないのは良くある話ですけどね「だから言ったのに」とは思います。

JAQKxsuke

2021/02/27 10:13

教えていただきありがとうございます。確認したところ仰られる通り言及されておりました。今後は確認漏れがない気を付けますので、引き続きよろしくお願い致します。

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

下記の手順で解決できました。

①CSSをHTMLからリンクする。
②下記のタブを<head>タブ内に挿入する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<title>Profile</title>
</head>

投稿2021/02/27 09:37

JAQKxsuke

総合スコア11

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

HP：画像サイズの変更ができない。

前提・実現したいこと

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

■エラーページ↓↓

■見本ページ↓↓

該当のソースコード

試したこと

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

関連した質問