Q&A
ずれるという説明がわからないですが、どこに表示したいのですか？
前提・実現したいこと
勉強歴1か月のため初歩的な質問です。（気を悪くされましたら申し訳ございません）
画像を縮小した後に画面右上に表示したいのですが、画像のサイズを変更するとポジションがずれてしまいます。
位置の指定方法が悪いのか、それとも画像の縮小方法が悪いのかがわからず詰まってしまっています。
該当のソースコード
HTML
1ソースコード 2<!DOCTYPE HTML> 3<html> 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 8</head> 9<body> 10 <ons-page> 11 <div class="content"> 12 <p>kids</p> 13 <a class="btn back" href="./step.html"> 14 <img src="https://blossmers.wpcomstaging.com/wp-content/uploads/2021/04/content-animal.png" alt="back" width="30%" height="30%"></a> 15 <div class="content-select"> 16 <a href="fruit.html"> 17 <img src="https://blossmers.wpcomstaging.com/wp-content/uploads/2021/04/content-animal.png" alt=""> 18 </a> 19 <a href="animal.html"> 20 <img src="https://blossmers.wpcomstaging.com/wp-content/uploads/2021/04/content-car.png" alt=""> 21 </a> 22 <a href="car.html"> 23 <img src="https://blossmers.wpcomstaging.com/wp-content/uploads/2021/04/content-fruit.png" alt=""> 24 </a> 25 </div> 26 </div> 27 </ons-page> 28</body>
CSS
1ソースコード 2<style> 3 .content{ 4background-color:#68C6E1; 5width: 100%; 6height: 100%; 7position: relative; 8 } 9 /* 10 ..index.html 11 .content p{ 12background-color:white; 13width:100px; 14border-radius:30px; 15text-align:center; 16padding:20px 10px; 17 } 18 */ 19.content-select{ 20display:flex; 21} 22.content-select img{ 23margin:10px; 24} 25/*-------ここから記載開始（）---------*/ 26.back { 27 position: absolute; 28 top: 0%; 29 right: 0%; 30} 31</style> 32
試したこと
①img width="30%" height="30%" に指定
②imgタグのpositionをabsoluteにし、top: 0%; right: 0%;
としました。
補足情報（FW/ツールのバージョンなど）
monaca,vscode
>勉強歴1か月のため初歩的な質問です。（気を悪くされましたら申し訳ございません）
書かなくて良いと思います。初心者アイコンも自分で書かずとも投稿画面のタイトル横のアイコンクリックだけでつきます。
「画像サイズを縮小する」とは具体的にはどのような操作ですか？
https://blossmers.wpcomstaging.com/wp-content/uploads/2021/04/content-animal.png のカンバスサイズをPhotoshopで小さくする、のような意味ですか？
>itagaki様
＞Lhankor_Mhy様
画面右上に表示したいのですが、画像をwidth,heightを指定して縮小すると画面右上に表示されていた画像が少し左側にずれてしまいます。
>m.ts10806
ご指摘ありがとうございます。
質問は編集できます。
回答1件
0
以下を追加するとどうですか？
css
1 .back { 2 text-align: right; 3 }
なお、HTML4ではwidth属性にパーセンテージを指定することができましたが、HTML5では正の整数値のみが許可されています。つまり、文法違反です。
The attributes, if specified, must have values that are valid non-negative integers.
投稿2021/09/11 05:00
総合スコア36960
あなたの回答
tips
プレビュー
