詳しい人求む！

html cssのmargin

解決済

質問者：うるき
質問日時：2022/12/03 11:04
回答数：5件

marzinが取れなくて困ってます、ご教授お願いします
<!DOCTYPE html>
<html lang="jn">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>しほ料理</title>
<link rel="stylesheet" href="siho.css">

</head>
<body>
<header></header>

<a href="index.html"><img src="shio.png" ></a>
<span class="king">ShioCooking</span>
<h1>しほのオンライン料理教室へようこそ</h1>

</body>
</html>

cssのコードです
body{
background-color: bisque;
}
.taitor{
font-size: 85px;

}
.king{
font-size: 45px;
background-color: black;
color: white;
margin-bottom: 200px;
kingのclassを上方向に上げたいのですがどうしたら良いかわからず悩んでます
教えてください

shihocookingの要素を上に100ピクセルほど上げたいのです

補足日時：2022/12/03 12:33
通報する

通報する

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

質問の本文を隠す

回答 (5件)

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

No.5ベストアンサー

回答者： t_fumiaki
回答日時：2022/12/03 14:28

>>画像の右横にならんでるshihocokingを100ピクセルほど上にずらしたいのです

htmlは段組みが基本なので、結構難しいですが、以下に1例を

●html側
<a href="index.html"><img class="gazou" src="shio.png" ></a>
<span class="king">ShioCooking</span>
<h1>しほのオンライン料理教室へようこそ</h1>

↑
imgタグにクラスセレクタを付けてcssを引用。

●css側

.king{
font-size: 45px;
background-color: black;
color: white;
/*margin-bottom: 200px;*/　←　カット
float:left;　←　追加
margin-top: 150px;　←　追加◎◎
}

.gazou {float:left; margin-right:10px;}　←　追加

h1{clear:both;}　←　追加

追加◎◎の値を調整して下さい。
h1見出しの上下位置を調整したい場合は、h1{clear:both;}のclear:both;の後ろに、margin-top:～～px; を追記して下さい。

- 1
- 件

通報する

この回答へのお礼

ありがとうございます、参考にさせてもらいます

通報する

お礼日時：2022/12/03 16:38

No.4

回答者： Ogre7077
回答日時：2022/12/03 12:53

上にずらす、ではなく、要素の縦位置を揃えるべきかと思います。

vertical-align: middle;
など如何でしょうか?

参考)
https://developer.mozilla.org/ja/docs/Web/CSS/ve …

- 0
- 件

通報する

この回答へのお礼

ありがとうございます、参考にさせてもらいます

通報する

お礼日時：2022/12/03 16:37

No.3

回答者： fujillin
回答日時：2022/12/03 12:34

こんにちは

画僧のサイズがわかりませんが、画像との位置関係で上にあげたいということですよね？
多分、画像の高さの方が大きいのではないかと想像しますけれど、画像の表示位置を指定してあげてください。

例えば、ほぼ中央合わせにしたいのであれば、
a[href="index.html"]>img {
vertical-align: middle;
}
とか。
ご提示のHTMLでは画像の識別子がないので、上記では少々面倒なセレクタになっていますけれど、クラス等を設定しておけば簡単になります。

位置関係の指定の種類は他にもいろいろありますので、以下をご覧ください。
（下の方の「行ボックス内での垂直方向の配置」に各種設定とその結果が示されています）
https://developer.mozilla.org/ja/docs/Web/CSS/ve …

- 1
- 件

通報する

No.2

回答者： t_fumiaki
回答日時：2022/12/03 11:36

ShioCookingと言う文字を上に上げたいのですか？

shio.pngと言う画像が左に有って、それと横並びでShioCookingと言う文字があります。

htmlのルールとして、画像の右下と「ShioCooking」と言う文字の左下は同じ横線上に並びます。

で、どうやりたいのか手書きでも良いのでイメージを伝えて下さい。

・画像の上にかぶせる
・画像の右に回り込ませる

色々イメージがあると思います。