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ランキング
-
指定した演算を実施の結果を表...
-
先日ウェブデザイン技能検定三...
-
根号の書き方について
-
Tomcat-ApacheでHTMLを表示させ...
-
HTMLのタイトルについて
-
iframe内の表示を常に最新にしたい
-
html safariでの文字化け
-
ファビコンが表示されない
-
FFFTPでの文字化け
-
CSSファイルを指定したら元のHT...
-
文字化けを故意に表示したい
-
HTMLソースにない文字がブラウ...
-
css ,videotタグ。ホームページ...
-
POSTしたデータの文字コードがu...
-
ページを開いたときにファイル...
-
Duolingo のソースコードの名前...
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLからフォルダを開きたい
-
form action="#"
-
iPadの標準ブラウザでローカルH...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
css ,videotタグ。ホームページ...
-
POSTしたデータの文字コードがu...
-
Duolingo のソースコードの名前...
-
body内にmetaタグを記述は問題...
-
iframe内の表示を常に最新にしたい
-
ページ全体を中央に配置したい...
-
HTML上に貼り付けたPDFが表示さ...
-
HTMLソースにない文字がブラウ...
-
HTMLファイルのインクルードで...
-
Google検索でサイト説明文が文...
-
文字化けを故意に表示したい
-
自分で<head>内をかけない場合...
-
根号の書き方について
-
FFFTPでの文字化け
-
表示時に1回だけリロードさせ...
-
COLDFUSIONの文字化け
-
リンクボタンにgifアニメを使え...
-
HTMLでwebサイトを作ってるので...
-
Content-Typeの大文字
-
メタタグに順番はありますか?
おすすめ情報
shihocookingの要素を上に100ピクセルほど上げたいのです