実現したいこと
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で表示しています。
よろしくお願いいたします。
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/06/21 05:47
2024/06/21 07:25
2024/06/25 11:47