その他

スタイルシート(CSS) ボタンの色を変えてみよう

更新日:

ボタンの色の変更方法です。
CSSをタグの内部に記載した方法で紹介しています。

説明サンプルソース
デフォルトのボタン<INPUT type="button" value="ボタン">
赤系<INPUT type="button" value="ボタン" style="background-color:#ff6868;border-color:#ff6868">
線の色を赤くし場合<INPUT type="button" value="ボタン" style="background-color:#ffffff;border-color:#ff6868;border-width:2px">
青系<INPUT type="button" value="ボタン" style="background-color:#2864f0;border-color:#2864f0">
線の色を青く場合<INPUT type="button" value="ボタン" style="background-color:#ffffff;border-color:#2864f0">

基本的な構文
<INPUT type="button" name="ボタン名(省略化)"
value="表示する文字" style="background-color:ボタンの色;border-color:ボタンの線色">
ボタンの線の色は4変指定することも可能です。
<INPUT type="button" value="送信" style="background-color:ボタンの色;border-color:線色(上)
線色(右) 線色(下) 線色(左);">

線の太さを指定border-width:サイズpx;
ボタンの色background-color:色;
ボタンの線の色border-color:色;

  • この記事を書いた人

sasuke

インフラエンジニアからwebエンジニアに転職し両方の強みを生かしていければと思います。

-その他

Copyright© さすけのプログラミング入門 , 2019 All Rights Reserved.