<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ボタン</title> </head> <body> <input type="button" value="押す"> </body> </html>
上記のようなボタンが表示されます。たとえば、このボタンに表示されている文字を大きくして、ボタン全体を大きく表示したい場合、
<input type="button" value="押す" style="font-size:20px;">
ボタンのタグの中にstyle=""を追加して、その中に装飾したい内容を記載します。記述方法は、font-size:20px;の様に左側に装飾したい内容、今回はfont-sizeということで、フォント（文字）のサイズ、:（コロン）で区切って、右側に20pxという文字のサイズを指定して、最後に;（セミコロン）で終了します。ボタンのスタイルシートを変更した後でコードを実行してみると、
ボタンが大きくなりました。次にボタンの文字の色を赤に変えたい場合はstyle=""の中に書いた要素の;(セミコロン)の後に新たな要素を追加します。
<input type="button" value="押す" style="font-size:20px;color:red;">
サイズの指定の後にcolor:red;と追加することで、ボタン内のボタンが赤色になります。このコードを実行してみると、
ボタンの中の文字が大きいサイズのまま、文字色も変更されました。このようにボタンタグの中にstyle属性を追加して、属性の中にデザインに関する指示を書くことでタグの装飾を行うことが可能です。style属性の中に記述している 要素:値;といった書き方をスタイルシート（CSS）と呼びます。
スタイルシートの他の例
・ボタンの色を変える場合 background-color:
<input type="button" value="押す" style="background-color:blue;">
・ボタンの角を丸くする border-radius:
<input type="button" value="押す" style="border-radius:10px;font-size:20px;">
スタイルシートでできること
CSS | Mozilla Developer Network
0 件のコメント:
コメントを投稿