50代からのHTML / CSS / Java Script 　チャレンジNo.23 ボタンの調整

お疲れ様です。今日は入会申込フォームのボタンの調整を学習します。

下の画像が昨日までのところです。

それではcssに記述していきます。
button{
              width: 100%;
             }

まずはこれでどうなるか見てみます。ファイルを保存してブラウザーをリロードする。

htmlファイルの方を見ると、buttonプロパティは、div.contentの中にあるので、100％にしてもこの幅で収まる。左右の余白はpaddingで設定してある分があるので、100%だとこれくらいになるのね。

続けて、background-color:#2096f3とする。（まぁ色はレクチャー動画通りです）

そしたら、これも保存して、ブラウザーをリロードしてみる。

さらに、color: #fff;とする。さらにボタンのボーダーが邪魔なので、border: none;と記述する。

文字が少し窮屈なので、padding: 15px;とする。

続いて、見た目の部分なんだけど、角丸にする。border-radius: 3px;と記述する。

ちょっとよくわからんので、15pxにする＾＾；

これはこれで、可愛すぎるからやっぱり３pxか＾＾；さらに装飾を加えていく。ドロップシャドウを加えてみる。次の１文を記述。
box-shadow: 0 0 4 rgba(0 0 0 4);

そしたら保存して、ブラウザーをリロード。

なんとなく影がついてるね＾＾
で、このbox-shadow: の最初の３つは　box-shadow: x軸 y軸 ボケ具合らしい。なので、最初の２つを0 0にすると正面から光が当たってる感じになる。
後ろの、rgbaは、rgbについては大丈夫なんだけど、aは何かっていうとアルファのこと。要は不透明度のことらしい。ここを０にすると完全な透明になるので、影は見えなくなるんだって。１にすると完全に色が出た状態になる。つまり０〜１の間で決めるのね。
アルファを.4って書いたけど、0.4のこと。cssではこんな感じで0を省略できるんだって。（知らなかった・・・）

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