"images/logo.png" のロゴマークがスマホ画面にすると 大きすぎるので小さく

2年前に1冊CSS書籍を全部やりました。
しかし細かなことはもう忘れてしまいました。

今ほじくり返して、せっかくだったのでレシポンシブル対応
に個人的に変更しています。
それで

HTML側ソースコードは以下ですが？
"images/logo.png"　のロゴマークがスマホ画面にすると
大きすぎるので、小さめにしたいのですが
----------------------------------------------
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
</div>
------------------------------------------
CSS側で
classで指定されているlogoで検索をかけると
二つのコードが出てきます。
--------------------------------
.logo {
float: left;
margin-top: 50px;
}
---------------------------------
.logo {
float: none;
margin-top: 28px;
text-align: center;
}
-----------------------------------

以上2個あるのですが！
なんで似たようコードが2個あるのでしょうか？
　見たところ、
images/logo.png　の画像サイズを司るソースコードは見当たらないのですが
　よくわかりません？
１）以上のプログラムはひとまとめにできないでしょうか？

２）できれば、ロゴサイズを小さくするにはどうすればいいのでしょうか？
　　
　2年もたつ忘れました。よろしくお願いいたします

No.2 ベストアンサー 回答者： naokita 回答日時： 2021/04/30 04:30

レスポンシブなんだから、PC用とスマホ用のCSSが、メディアクエリで振り分けてあるので、２カ所あるのが妥当と考える。

どちらのCSSなのか？わからないのならば、
PCとスマホの両方で見比べ、margin-topが50pxなのか、28pxなのかで、判断しましょう。
もしかして、メディアクエリではなく、単なるミスや重複なら、どちらか不要な方を削除したり、合体しても構わない。
（おそらく、下の方がスマホ用なので、上部に28pxのスペースがある）

というか、
どの大きさで表示したいかは、貴方の判断だし、自由です。
私なら、ロゴ程度なら（ロゴに依るけど）
横幅を100pxや200pxで、好きな幅で画像制作して保存すれば、
（指定が無いのだから）
その100pxや200pxのままの原寸で表示されるので、目的のサイズ調整のCSSは不要です！

仮に、それでも、PC用よりもスマホ用だけを、もっと小さくしたいのなら、
どちらかのCSSに、
width:90px;
などの幅指定や、
width:20%;など割合で追加してみると良いです。
比較すれば、どっちがどっちか、判断できるでしょう。

---------------------------------------
以前も、貴殿に回答した時に、お礼で結果報告を拝見した覚えがありますが、
おそらく、
HTMLやCSSを操作する前に、画像作成と画像が表示される仕組みを勉強した方が良いと思います。（画像は、初歩で学ぶべき事です）
この画像の基本を知らないと、いくらCSSが上達しても、いつまで経っても素人レベルなので苦労しますよ・・・

料理を勉強しているのに、米の水分量を知らず、いつも、まずい夕飯になってしまう人です・・・
まずは、米の研ぎ方から覚えろよ！となるでしょｗ

この回答へのお礼

ご回答くださいまして、ありがとうございました。
以下正解でした。
.logo {
float: none;
margin-top: 28px;
text-align: center;
}
ですが！
Aﾝｽ：PC用とスマホ用のCSSが、メディアクエリで
　　振り分けてあるので、２カ所あるのが妥当と考
　　える。

どうもすみません！
以上ですが、少し端折り過ぎていました。
　書籍の最後らへんに　「メディアクエリ」があり、ちゃんと
設定済みでした。
　
　それとロゴマークの大きさは、実際のスマホ画面では
ちょうどよい大きさなので、これでOKとします。

以後気を付けます。

お礼日時：2021/04/30 17:18

No.1 回答者： wanderer1 回答日時： 2021/04/30 00:36

＞なんで似たようコードが2個あるのでしょうか？

CSSを書いた人が、そのように入力したからですよね。
なにか書き方にこだわりがあったか、あるいはパートごとに設定したか、CSSの書き方がよくわかってなかったか、ぐらいの理由でしかないと思います。

＞images/logo.png　の画像サイズを司るソースコードは見当たらないのですが

見当たらないですね。
何も書かなければ、画像データを原寸として扱います。
なのでデータ通りということしかわかりません。

＞１）以上のプログラムはひとまとめにできないでしょうか？

できます。

＞２）できれば、ロゴサイズを小さくするにはどうすればいいのでしょうか？

width:??px; /* ??に任意の数値を入力 */
height:auto;

と書けば、横幅を前提とした縦横比の正しい表示サイズを設定できます。

レスポンシブ対応にするなら、メディアクエリで振り分けしてください。

この回答へのお礼

ご回答くださいまして、ありがとうございました。
了解です。
　端折り過ぎた質問でどもすみません！

お礼日時：2021/04/30 17:20