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を上方向に上げたいのですがどうしたら良いかわからず悩んでます
教えてください
No.5ベストアンサー
- 回答日時:
>>画像の右横にならんでる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; を追記して下さい。
No.4
- 回答日時:
上にずらす、ではなく、要素の縦位置を揃えるべきかと思います。
vertical-align: middle;
など如何でしょうか?
参考)
https://developer.mozilla.org/ja/docs/Web/CSS/ve …
No.3
- 回答日時:
こんにちは
画僧のサイズがわかりませんが、画像との位置関係で上にあげたいということですよね?
多分、画像の高さの方が大きいのではないかと想像しますけれど、画像の表示位置を指定してあげてください。
例えば、ほぼ中央合わせにしたいのであれば、
a[href="index.html"]>img {
vertical-align: middle;
}
とか。
ご提示のHTMLでは画像の識別子がないので、上記では少々面倒なセレクタになっていますけれど、クラス等を設定しておけば簡単になります。
位置関係の指定の種類は他にもいろいろありますので、以下をご覧ください。
(下の方の「行ボックス内での垂直方向の配置」に各種設定とその結果が示されています)
https://developer.mozilla.org/ja/docs/Web/CSS/ve …
No.2
- 回答日時:
ShioCookingと言う文字を上に上げたいのですか?
shio.pngと言う画像が左に有って、それと横並びでShioCookingと言う文字があります。
htmlのルールとして、画像の右下と「ShioCooking」と言う文字の左下は同じ横線上に並びます。
で、どうやりたいのか手書きでも良いのでイメージを伝えて下さい。
・画像の上にかぶせる
・画像の右に回り込ませる
色々イメージがあると思います。
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
POSTしたデータの文字コードがu...
-
body内にmetaタグを記述は問題...
-
iframe内の表示を常に最新にしたい
-
なぜ height 100% がつくのか ...
-
html で 変数を定義できますか?
-
文字コードのメタタグ
-
検索避けのメタタグの数と効果
-
根号の書き方について
-
htmlのflv再生について
-
文字化けを故意に表示したい
-
プログラムについて。
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLからフォルダを開きたい
-
googleドライブで、PDFファイル...
-
htmlファイルの表示が真っ白
-
Webサイトから、txtファイルを...
-
URLDownloadToFile でダウンロ...
-
【HTML】1クリックで複数ファイ...
-
HTMLページが勝手にダウンロー...
-
一つのリンクに複数のURLを指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
css ,videotタグ。ホームページ...
-
POSTしたデータの文字コードがu...
-
body内にmetaタグを記述は問題...
-
根号の書き方について
-
文字化けを故意に表示したい
-
HTMLファイルのインクルードで...
-
先日ウェブデザイン技能検定三...
-
iframe内の表示を常に最新にしたい
-
borderでa:hover下線表示させる...
-
指定した演算を実施の結果を表...
-
ページ全体を中央に配置したい...
-
safariだけcssが反映されない
-
わざと文字化けさせるには
-
WEBページがIEだけ文字化けして...
-
html で 変数を定義できますか?
-
<!DOCTYPE html>あってますか?...
-
COLDFUSIONの文字化け
-
textareaの一行の文字数制御
-
Duolingo のソースコードの名前...
-
Aタグのmailtoでメッセージ作成...
おすすめ情報
shihocookingの要素を上に100ピクセルほど上げたいのです