50代からのHTML / CSS / Java Script 　チャレンジNo.22

お疲れ様です。今日はテキストフレームの調整の学習をします。
下の画像は昨日までのところです。
機能はmarginとpaddingについて学習し、余白について学びました。

下線の作成

CSSファイルを開き13行目のPタグのところに設定してあるスタイルを元に戻す。ようは削除するってことね。代わりにinputタグを記入する。メールアドレスとパスワードのところに、このタグを使うわけね。
今現在、メアドとパスワードのところにはボーダーが設定してあるけど、たとえば、CSSのinputタグのところにborde: none;の記入

保存＆リロードすると消える。

ここでは下線だけ使いたいので次のように書く。
border-bottom: 1px solid #d1d1d1;

そしたら保存＆リロードでブラウザーを確認。

下線が引かれてるのがわかる。注意しなければならないとは、一度border noneで、一度なくしてから再度上書きするイメージだよってこと。

フォントサイズの調整

つづいて、メアドとパスワードのフォントサイズを設定。CSSの方に次のように記入。
font-size: 16px;

ちなみに、これはもう決まり文句的に覚えた方がいいらしい。16px以下にすると見た時になんか崩れるんだって。「inputタグはフォントサイズを16px以上にする」が基本。

余白の調整

この状態で例えば、メアドを打ち込むと窮屈な印象を受けるので、

昨日学習したpaddingをつかって、余白を作る。CSSファイルに次のように記入。
padding: 8px;

これで、余白ができて見栄えもいいかな？？＾＾

それじゃ、今日はここまで＾＾お疲れ様でした。