HTML_CSS
Googleでログイン
問題11：テキストボックスの文字を変化させよう
テキストボックスが入力されたら文字の太さを太くしましょう。
初期のplaceholderの文字の太さは普通の状態で、入力されたら文字の太さを太くしましょう。
初期のplaceholderの文字の太さは普通の状態で、入力されたら文字の太さを太くしましょう。
あらかじめエディタに書くコード
<input name="sample" type="text" style="width: 200px; height:30px; font-size:16px;" placeholder="文字の太さ普通">
¥HTML¥
期待する画面
解答ソースコード
<input name="sample" type="text" style="width: 200px; height:30px; font-size:16px;" placeholder="文字の太さ普通">
¥HTML¥
input[name="sample"] {
font-weight: bold;
}
input[name="sample"]::placeholder {
font-weight: normal;
}
¥CSS¥
補足
font-weightプロパティは、文字の太さを指定することができるプロパティです。
値の指定方法は、100~900の9段階による数値で指定する方法と、bold,normalのようにキーワードによる指定方法があります。
キーワードの場合大体にはなりますが、400 = normal、700 = boldといった感じです。
しかし、これだけ細かく設定できる割にはあまり太さに変化がありません。
ですので基本的にはnormalかboldを使用しておけば良いかと思います。
また同じような効果を持つものに、HTMLのstrongタグというものがあります。
違いはfont-weightは「SEOに影響がない」、strongは「SEOに影響がある」ということだけです。念のため記憶しておきましょう。
値の指定方法は、100~900の9段階による数値で指定する方法と、bold,normalのようにキーワードによる指定方法があります。
キーワードの場合大体にはなりますが、400 = normal、700 = boldといった感じです。
しかし、これだけ細かく設定できる割にはあまり太さに変化がありません。
ですので基本的にはnormalかboldを使用しておけば良いかと思います。
また同じような効果を持つものに、HTMLのstrongタグというものがあります。
違いはfont-weightは「SEOに影響がない」、strongは「SEOに影響がある」ということだけです。念のため記憶しておきましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
テキストボックスのinput[name="sample"]の文字をfont-weight: bold;に、placeholderの文字をfont-weight: nomal;にすることで文字が入力された際に文字の太さが太くなったように見せることができます。