おしえて

top.pngを左に寄せて、すこし上げたいです。

解決済

質問者：Campus2
質問日時：2019/10/24 17:49
回答数：3件

<div class="logo">
<a href="index.html"><img src="images/top.png" alt="TOP" style="width:35%"></a>
</div>
以上ですが、スマホで縦画面で見ると、top.pin画像が真ん中に来てしまいます。
これを左に寄せて、すこし上げたいです。
よろしくお願いいたします。

有難うございます。
なんで真ん中になるのか！
書き忘れていました。
スマホを縦画面で見た場合、ロゴが上の真ん中にありますので、それを左寄せにできなでしょうか？

No.1の回答に寄せられた補足コメントです。補足日時：2019/10/25 00:16
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： gura_
回答日時：2019/10/24 20:48

Campus2さん

　････左に寄せて、すこし上げたい･･････････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.logo { position:relative; }
</style>
</head>
<body>
<div class="logo">
<a href="index.html"><img src="https://oshiete.xgoo.jp/images/v2/common/profile … alt="TOP" style="width:35%; position:absolute; top:-30px; left:-60px;"></a>
</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ご回答くださいまして、ありがとうございました。
ご回答を元に、以下としました。自分のスマホで実証試験しな
がらやりました。グーグルクロムですが、キーボードのF12～各
スマホメーカーの見栄がサンプル的に見ることができます。
　私のスマホはギャラクシーSC-03Kですが、だいぶ違いがあり、
画面がかなり小さく表示されました。ちなみに、top:-0x;にした
のは、現在の設定では上下は固定したままで、動きませんでした
ので、とりあえず値を０としました。
div class="logo">
<a href="index.html"><img src="images/top.png" alt="TOP" style="width:15%; position:absolute; top:-0x; left:-15px;"></a>
</div>

通報する

お礼日時：2019/10/25 17:33

No.3

回答者： debu120t
回答日時：2019/10/26 09:32

style="width:35%; position:absolute; top:-30px; left:-60px;"

↑CSSは直書きだと融通が利かないので、出来る限りはCSSファイルに書くといいでしょう。
クロームのF12使えるなら、そこに出てきたソースコードでどんなCSSが効いているのかすぐにわかります。どのCSSファイルの何行目かもわかるので、それをいじるようにしましょう。

例ですが、
.logo {
text-align:center;
}
とか書いてあったりすると、画像は真ん中に寄ります。
なので、左寄せに。
.logo {
text-align:left;
}
それでもダメなら画像にdisplay:block;が当たってるかな。
.logo img{
margin:0 auto;
}
スマフォのときに真ん中になるような記述をしているので、何カ所か.logoに関する記述があるとは思います。
クロームのF12で出てくる開発ツールでスマフォの時にCSSの何行目が効いているのか探してみましょう。
変にpositionは使わない方がいいね。堅くなります。

- 1
- 件

通報する

この回答へのお礼

ご回答くださいまして、ありがとうございました。

Aンス：CSSは直書きだと融通が利かないので、出来る限りはCSSファイルに書くといいでしょう。
了解です。
必要に応じて対応したいともいます。
何せ、著書（https://www.yodobashi.com/product/10000000900282 …）
もを元に、自分が目指すものを作成中です。簡単にはいきません。大変です。
少しづつ前進しています。

通報する

お礼日時：2019/10/26 17:20