重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

詳しい人求む！

html cssのmargin

解決済

  • 質問者：うるき
  • 質問日時：
  • 回答数：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ピクセルほど上げたいのです

    「html cssのmargin」の補足画像1
      補足日時：2022/12/03 12:33
    通報する
通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： t_fumiaki
  • 回答日時：

>>画像の右横にならんでる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; を追記して下さい。
    • good
    • 1
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2022/12/03 16:38

No.4

  • 回答者： Ogre7077
  • 回答日時：

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


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

参考)
https://developer.mozilla.org/ja/docs/Web/CSS/ve …
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2022/12/03 16:37

No.3

  • 回答者： fujillin
  • 回答日時：

こんにちは



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

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

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

No.2

  • 回答者： t_fumiaki
  • 回答日時：

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



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

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

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

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

色々イメージがあると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとう御座います　やたい事は画像の右横にならんでるshihocokingを100ピクセルほど上にずらしたいのです

通報する
お礼日時：2022/12/03 12:20

No.1

  • 回答者： bx2
  • 回答日時：

上方向に上げたいなら、top をマイナス値にするとか。



http://www.htmq.com/style/top.shtml
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます

通報する
お礼日時：2022/12/03 12:15

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報