付属画像の緑の背景の文字(お申し込みフォーム)という文字を横一杯に背景を保ったまま文字を上げたいのですが上手くいきません。
spanタグを使うと文字は上げられるのですが、背景が横一杯になりません。
横一杯の背景を保った状態のまま背景の文字を上げたいです。px等で自由に高さを調節する方法が知りたいです。
コードは以下にあります。回答よろしくお願いいたします。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="senden.css">
<style type="text/css">
</style>
</head>
<body>
<div class="title4">
※注意事項をお読みいただきお申し込み下さい。
</div>
<div class="box_css">
<p>・下記にある申し込みフォームより情報を入力して、お申し込み下さい。</p>
<p>・申し込み後は、弊社より担当パイオニア、エンジニアより、ライン又はメール宛に連絡があります。</p>
</div>
<div class="title5">※お申し込みフォーム</div>
</body>
</html>
◎◎◎cssのコード(senden css)
/* 下のタイトル */
.title4 {
font-size: 37px;
background-color:#f87902;
color:rgb(248, 245, 245);
text-align: center;
font-weight: 700;
}
/* お申し込みフォームのタイトル */
.title5 {
font-size: 37px;
background-color:#63e02d;
color:rgb(248, 245, 245);
text-align: center;
font-weight: 700;
vertical-align: 90px;
}
/* 申し込みの注意事項ボックスのデザイン, */
.box_css{
width:395px;
margin: 5em auto;/* ブロックレベルの中央寄せのためautoを用いる,text-align: center効かない */
border: solid 3px #f87902;
background-color: rgb(255, 255, 255);
padding-left: 14px;/* ボックス内左の余白 */
padding-right: 15px;/*ボックス内 右の余白 */
}
No.2ベストアンサー
- 回答日時:
こんにちは
>px等で自由に高さを調節する方法が知りたいです。
ご自分で指定しているのになんで??
.box-cssの
>margin: 5em auto;
で上下の余白を指定しています。
上下均等に詰めたいのなら、
margin: 1em auto;
とでもしておけばよいですし、上下異なるようにしたければ四方のmaginを指定すればよい。
あるいは、.box-cssはそのままにしておいて、当該要素の.title5にリバースマージンを設定することでも、.title5だけ上に移動して表示することは可能です。
※ お見受けするところ、何度も同じようなご質問を繰り返していますけれど、ほとんどが自分で設定している内容を理解していないことによる質問に思えます。
きちんと基本を覚えた方が近道だと思いますよ。
※ (↓)は以前にもご紹介しましたけれど、ご参考までに。
(基本だけでなくほとんど全ての解説がありますので、ここで調べれば大抵のことは解決するはずです)
https://developer.mozilla.org/ja/docs/Learn/CSS/ …
No.1
- 回答日時:
「※お申し込みフォーム」だけを上げたいなら、
<div class="title5" style="margin-top:-40px;">※お申し込みフォーム</div>
ただ、問題はそこではなく、その上のコンテンツに、margin:5em;があるので、その下に5emのスペースを強制で空けているためです。
私なら、下記のように編集します。
(下記の4行目に 2em を付け足しただけです。2emの2が数値なので自由に変更可能。○pxでも良いです)
/* 申し込みの注意事項ボックスのデザイン, */
.box_css{
width:395px;
margin: 5em auto 2em; /* ブロックレベルの中央寄せのためautoを用いる,text-align: center効かない */
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
HTMLフォームのSELECTの幅を一...
-
アップロードするサーバーによ...
-
コードを書いて下さい( ; ; )...
-
aタグに直接style=""で:hoverを...
-
表の折り返しについて
-
htmlでテーブル内にテキストボ...
-
エクセルでサイズに合ったもの...
-
ホームページビルダーでセルの...
-
Excel で等間隔で縦線を引きた...
-
トートバッグの大きさで W300(2...
-
【ホームページビルダー】表の...
-
表の中に表
-
ワードで、横書きの数字を縦書...
-
table内で画像と文字をセンター...
-
ホームページビルダーの表の枠...
-
Excelの列や行の幅を表示...
-
illustratorの単位について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
FireFoxで見るとブラウザの幅に...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
INPUT TEXT内の文字位置を指定...
-
CSSで、height:100%の中央寄せ
-
CSSの設定
-
テキストボックスの様に文字の...
-
フッターだけが真ん中に行って...
-
スタイルシートでh1の属性行間...
おすすめ情報