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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
POSTしたデータの文字コードがu...
-
css ,videotタグ。ホームページ...
-
body内にmetaタグを記述は問題...
-
カラーラインの中に文字
-
iframe内の表示を常に最新にしたい
-
HTMLファイルのインクルードで...
-
無料ホームページテンプレート...
-
metaのcontentを使ってフォーム...
-
フロントページ用のタグ?
-
ホームページ ブラウザ自動更新
-
HTML上に貼り付けたPDFが表示さ...
-
サムネイルのリンク先
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLからフォルダを開きたい
-
java_run.batがダウンロードで...
-
htmlの中にexcelが埋め込むには...
-
どのページもすべて同じURLなの...
-
googleドライブで、PDFファイル...
-
一つのリンクに複数のURLを指定
-
HTMLで別PCのフォルダを開く
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
body内にmetaタグを記述は問題...
-
POSTしたデータの文字コードがu...
-
css ,videotタグ。ホームページ...
-
HTMLファイルのインクルードで...
-
先日ウェブデザイン技能検定三...
-
iframe内の表示を常に最新にしたい
-
HTML上に貼り付けたPDFが表示さ...
-
html で 変数を定義できますか?
-
text-decorationを伸ばす方法
-
ページ全体を中央に配置したい...
-
根号の書き方について
-
自分で<head>内をかけない場合...
-
safariだけcssが反映されない
-
FFFTPでの文字化け
-
表示時に1回だけリロードさせ...
-
refreshタグ 自動的にジャンプ...
-
TEXTAREAのスクロールバーを消...
-
<body>のすぐ下=metaタグ?
-
objectタグを使って背景を透明...
-
WebのPythonでの値の受け渡し
おすすめ情報
shihocookingの要素を上に100ピクセルほど上げたいのです