<input type="button" value="押す" style="border-radius:10px;font-size:20px;">
ボタンの装飾をするためにボタンタグの中にstyle属性を追加して、スタイルシート言語で装飾に関するコードを追加しました。この書き方ではコード数の少ない小さなアプリやWebサイトの場合は良いのですが、コード数が多くなると可読性が落ちることがあります。そんな時にタグに名前を付けて、別の箇所でスタイルシートを紐づけて、各装飾を一ヶ所にまとめる方法を紹介します。
タグに名前を付ける方法は、JavaScriptでHTMLと紐づける際に利用した
<input type="button" id="click_button" value="押す" style="border-radius:10px;font-size:20px;">
id="click_button"の様にタグにIDを付けます。ID付与後、ボタンタグに記載されているstyleの値を<style>タグで囲った箇所に移します。(<style>の位置は自由です)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hoge</title>
<style>
#click_button{
border-radius:10px;
font-size:20px;
}
</style>
</head>
<body>
<div id="result_area">
何かを表示する
</div>
<input type="button" id="click_button" value="押す">
</body>
</html>この様に書き換えてコードを実行しても、
書き換える前同様、ボタンにスタイルシートが反映されいてます。他のHTMLのタグにも反映させたい場合、
<style>
#click_button{
border-radius:10px;
font-size:20px;
}
#result_area{
//ここに要素を追加する
}
</style>各ID毎に対応したスタイルシートを上から順に書いていくだけで良いです。順は関係ありません。
0 件のコメント:
コメントを投稿