付属画像の緑の背景の文字（お申し込みフォーム）という文字を横一杯に背景を保ったまま文字を上げたいので

Question

付属画像の緑の背景の文字（お申し込みフォーム）という文字を横一杯に背景を保ったまま文字を上げたいのですが上手くいきません。 spanタグを使うと文字は上げられるのですが、背景が横一杯になりません。横一杯の背景を保った状態のまま背景の文字を上げたいです。ｐｘ等で自由に高さを調節する方法が知りたいです。コードは以下にあります。回答よろしくお願いいたします。

※注意事項をお読みいただきお申し込み下さい。

・下記にある申し込みフォームより情報を入力して、お申し込み下さい。

・申し込み後は、弊社より担当パイオニア、エンジニアより、ライン又はメール宛に連絡があります。

※お申し込みフォーム

◎◎◎ｃｓｓのコード（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;/*ボックス内右の余白 */ }

fujillin · Accepted Answer

こんにちは

＞ｐｘ等で自由に高さを調節する方法が知りたいです。
ご自分で指定しているのになんで？？

.box-cssの
＞margin: 5em auto;
で上下の余白を指定しています。
上下均等に詰めたいのなら、
　margin: 1em auto;
とでもしておけばよいですし、上下異なるようにしたければ四方のmaginを指定すればよい。

あるいは、.box-cssはそのままにしておいて、当該要素の.title5にリバースマージンを設定することでも、.title5だけ上に移動して表示することは可能です。

※ お見受けするところ、何度も同じようなご質問を繰り返していますけれど、ほとんどが自分で設定している内容を理解していないことによる質問に思えます。
きちんと基本を覚えた方が近道だと思いますよ。

※ （↓）は以前にもご紹介しましたけれど、ご参考までに。
（基本だけでなくほとんど全ての解説がありますので、ここで調べれば大抵のことは解決するはずです）
https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/Getting_started

naokita · Answer

「※お申し込みフォーム」だけを上げたいなら、

※お申し込みフォーム

ただ、問題はそこではなく、その上のコンテンツに、margin:5em;があるので、その下に5emのスペースを強制で空けているためです。私なら、下記のように編集します。 (下記の４行目に 2em を付け足しただけです。2emの2が数値なので自由に変更可能。○pxでも良いです) /* 申し込みの注意事項ボックスのデザイン， */ .box_css{ width:395px; margin: 5em auto 2em; /* ブロックレベルの中央寄せのためautoを用いる，text-align: center効かない */

付属画像の緑の背景の文字（お申し込みフォーム）という文字を横一杯に背景を保ったまま文字を上げたいので

こんにちは

「※お申し込みフォーム」だけを上げたいなら、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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