jQueryを勉強していますが、logo.svgの高さががうまく表示できない

実現したいこと

logo.svgをinkscapeで作成したのですが、テキストはイメージ道理にできたのですが、
枠の高さがサイトより大分高くなって表示されます。テキストよりtop,bottom,leftを20px
ぐらいにしたいのですが、やり方が分かりません。

該当のソースコード

jQuery
1// index.html
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <title>ブラウザイベント</title>
7  <link rel="stylesheet" href="./css/style3.css">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
9  <script src="./js/main.js"></script>
10  <link rel="stylesheet" href="./css/style.css">
11</head>
12<body>
13
14  <!--画像が読み込まれたことを検知する:6-1-->
15
16  <div class="logo">
17    <img src="./img/logo.svg">
18  </div>
19  <ul id="log"></ul>
20  <div class="spacer"></div>
21
22// ./css/style.css
23
24* {
25  box-sizing: border-box;
26}
27
28body {
29  margin: 0;
30  padding: 0;
31}
32
33#log {
34  padding: 0;
35}
36
37#log li {
38  list-style-type: none;
39  padding: 5px 20px;
40  background: #FEF58B;
41}
42.button {
43  margin: 20px;
44  margin-bottom: 0;
45  padding: 10px 20px;
46  border: 1px solid #CCC349;
47  border-radius: 2px;
48  box-shadow: 0px 5px 0px #CCC349;
49  background: #FEF58B;
50  cursor: pointer;
51  outline: none;
52  appearance: none;
53}
54
55.button:active {
56  margin-top: 23px;
57  margin-bottom: -3px;
58  box-shadow: 0px 2px 0px #CCC349;
59}
60
61.textarea {
62  height: 50px;
63}
64
65.active {
66  background-color: #EF476F;
67  border: 1px solid #BF173F;
68  box-shadow: 0px 5px 0px #BF173F;
69}
70
71.button.active:active {
72  box-shadow: 0px 5px 0px #BF173F;
73}
74
75.target {
76  position: absolute;
77  top: 30px;
78  width: 30px;
79  height: 30px;
80  background-color: red;
81}
82
83.logo {
84  background-color: #8C618D;
85  padding: 20px;
86}
87
88.logo img {
89  width: 200px;
90}
91
92.spacer {
93  height: 1000px;
94}
95// ./js/main.js
96$(function () {
97
98  console.log('imgタグサイズ:' + $('#myimg').width() + 'x' + $('#myimg').height());
99
100  console.log('画像のサイズ:' + $('#myimg').prop('naturalWidth') + 'x' + $('#myimg').prop('naturalHeight'));
101
102
103});
104
105window.addEventListener('DOMContentLoaded', () => {
106
107  console.log('imgタグサイズ:' + myimg.width + 'x' + myimg.height);
108
109  console.log('画像のサイズ:' + myimg.naturalWidth + 'x' + myimg.naturalHeight);
110
111});
112

試したこと

はじめてinkscape使ってlogo.svgを作ったので修正方法が全く分かりません。

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

ウェブサイトCODEPREPで勉強しています。
(url)https://codeprep.jp/books/127/chapters/6/sections/1の箇所です。
windows10,VSCodeを使い、Google Chromeで表示しています。
よろしくお願いいたします。

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

回答2件

.logo は display: block なので、横幅は <body> の幅いっぱいに広がります。コンテンツに合わせた幅にするなら、display: inline-block や width: fit-content を指定してください。

縦の大きさはコンテンツで決まるので、logo.svg の縦サイズ + padding になっているはずです。現状の縦サイズが大きすぎるなら、logo.svg を編集して縦サイズを縮めるか、.logo に具体的な height を指定しましょう。

投稿2024/06/21 03:26

編集2024/06/21 03:27

int32_t

総合スコア21933

sanchunaka

2024/06/21 05:47

ご回答ありがとうございます。解答がなかなかつかないので何とか自力で解決できました。 inkscapeを勉強しろ！ということですかね。 inkscapeを使い、html,main.js,cssそこら中いじくりまわして出来ました。要するに良くわかっていないということですね。ご指摘いただいた, .logo myimgにheight=35pxをつけることで解決しました。ありがとうございます。ここで２，３日かかりました。

int32_t

2024/06/21 07:25

回答がなかなかつかないのは、問題と期待する動作がわかりにくかったからかもしれません。今回の場合は、・logo.svgの内容を開示・logo.svgの大きさや <div class="logo"> の実際の大きさをブラウザの開発者ツールを使って調べ、質問文に記述・logo.svgの期待する大きさや <div class="logo"> の期待する大きさを具体的に記述しておくと瞬時に回答が付いたかもしれません。

sanchunaka

2024/06/25 11:47

回答ありがとうございます。ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。

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

自己解決

SVG,inkscapeその他もろもろ調べてやっと解決しましたのでコードをあげます。
ウェブサイトCODEPREP様のサイトで勉強させてもらっています。
//index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ブラウザイベント</title> <link rel="stylesheet" href="./css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="./js/main.js"></script> </head> <body> <div class="logo"> <img src="./img/logo.svg" id="myimg" height="35px"> </div> </body> </html>

// ./js/main.js
(function ($) {
$(function () {

console.log('imgタグサイズ:' + $('#myimg').width() + 'x' + $('#myimg').height());

console.log('画像のサイズ:' + $('#myimg').prop('naturalWidth') + 'x' + $('#myimg').prop('naturalHeight'));

});

})(jQuery);

// ./css/style.css

{
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
}

#log {
padding: 0;
}

#log li {
list-style-type: none;
padding: 5px 20px;
background: #FEF58B;
}

.button {
margin: 20px;
margin-bottom: 0;
padding: 10px 20px;
border: 1px solid #CCC349;
border-radius: 2px;
box-shadow: 0px 5px 0px #CCC349;
background: #FEF58B;
cursor: pointer;
outline: none;
appearance: none;
}

.button:active {
margin-top: 23px;
margin-bottom: -3px;
box-shadow: 0px 2px 0px #CCC349;
}

.textarea {
height: 50px;
}

.active {
background-color: #EF476F;
border: 1px solid #BF173F;
box-shadow: 0px 5px 0px #BF173F;
}

.button.active:active {
box-shadow: 0px 5px 0px #BF173F;
}

.target {
position: absolute;
top: 30px;
width: 30px;
height: 30px;
background-color: red;
}

.logo {
background-color: #8C618D;
padding: 20px;
}

.logo img {
width: 300px;
}

.spacer {
height: 1000px;
}

#myimg {
width: 300px;
}

投稿2024/06/21 04:50

編集2024/06/21 05:46

sanchunaka

総合スコア30

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.30%

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

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

質問する