![見出し画像](https://assets.st-note.com/production/uploads/images/161054190/rectangle_large_type_2_e84f8d79c80c82a41910381738c9c247.png?width=1200)
50代からのHTML / CSS / Java Script チャレンジ No.25 ラベルの設定2
こんにちは、昨日はちょっとラベルについて学習しました。今日はその続きからになります。ディスプレイプロパティについて、ブロックとインラインの違いについて最後やって頭が混乱して終わってます(笑)
で、昨日はメールアドレスとパスワードに振ったlabelタグはインラインだから、テキスト上までにしかバックグラウンドカラーが反映されなかったけど、これを blockに変更もできるらしい。
![](https://assets.st-note.com/img/1723101054440-cM5O3DCPqH.png?width=1200)
こんな感じで追加する。保存&リロードで見てみる。
![](https://assets.st-note.com/img/1723101095595-Fosp2jNqlI.png?width=1200)
なるほどねぇ^^わかってきた^^インラインだとマージンが上手く機能してくれないらしい。今回ブロックにしたので、マージンの調整もしてみる。
![](https://assets.st-note.com/img/1723101284067-r0YaRzudi0.png?width=1200)
emというのは1文字分ってことで、それの0.5分下に余白をつけるって意味ね。これでラベルの設定はできたので、バックグラウンドカラーは削除しておく。
次はinputの方も長さが中途半端なので、cssファイルで調整しておく。
width: 100%;の記述を追加する。
![](https://assets.st-note.com/img/1723101650000-6CfgTa4fvw.png?width=1200)
![](https://assets.st-note.com/img/1723101680409-LO7DLF1Ii9.png?width=1200)
これで、メアドとパスワードの幅が画面いっぱいに調整された。
とりあえず、今回はここまで^^お疲れ様でした。
いいなと思ったら応援しよう!
![mitchy](https://assets.st-note.com/production/uploads/images/20246307/profile_9807a040331f369c8d4fda9682616fce.jpeg?width=600&crop=1:1,smart)