実践コーディングスキル - 第7章 Lesson4

第12回:送信ボタンにCSSをかけてみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

フォームの送信ボタンに対してのCSSを記述する方法を解説しています。
ここでは、デザインと同じになるように、送信ボタンの色や大きさの設定をおこないます。



この動画で学べること

・押したくなる送信するボタンを作成する方法



CSSをかけて押したくなる送信するボタンにしよう

前回作った送信するボタンにスタイルをかけていきましょう。
まず、今はボタンが左側にあるので、右に揃えたいと思います。


p#submit {
text-align: right;
}



ボタンのスタイルを変更していきましょう。
背景色、文字のサイズや色を指定し、ブラウザの初期状態で適応される境界線を消していきましょう。
また、ボタンの横幅と縦幅の指定もしていきたいと思います。



p#submit input {
background-color: #325a37;
border: none;
font-size: 18px;
color: #fff;
font-weight: bold;
width: 136px;
height: 40px;
}



保存してブラウザで見て見ましょう。
背景や文字スタイルが適応され、ボタンのデザインができ上がりました。
しかし、今のままではマウスをボタンの上に持ってきても何も変化がなく、ボタンを押せるのかがわからないので、マウスをボタンの上にもってきたときにポインターにかわるようにCSSを書いていきたいと思います。
擬似クラス:hoverを使ってやってみましょう。



p#submit input:hover {
cursor: pointer;
opacity: 0.8;
}



では保存してブラウザで見てみましょう。
ボタンの上にマウスが乗ると、ポインターに変わりました。
また、opacity: 0.8;の設定によって少し色が薄くなるようになったので、押したくなるボタンのデザインにすることができました。
あとは、いらないバナーをコメントアウトの状態にして、ご予約お問い合せページの完成です!
お疲れ様でした。