問題
11テキストボックスの文字を変化させよう
テキストボックスとは、inputタグを設置した際に表示される文字を打ち込むことができるフォームのことです。この問題を解いてテキストボックス内の文字スタイルを自由に変更できるようになりましょう。
HTML/CSSの問題に挑戦しよう！
問題
「テキストボックスの文字を変化させよう」
テキストボックスが入力されたら文字の太さを太くしましょう。
初期のplaceholderの文字の太さは普通の状態で、入力されたら文字の太さを太くしましょう。
あらかじめエディタに書くコード
<input name="sample" type="text" style="width: 200px; height:30px; font-size:16px;" placeholder="文字の太さ普通">
¥HTML¥
期待する画面
解答と解説（テキストボックスの文字を変化させよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
CSSでinput要素をセレクタで指定する際は、input[name="]のようにnameまで指定しましょう。
テキストボックスのinput[name="sample"]の文字をfont-weight: bold;に、placeholderの文字をfont-weight: nomal;にすることで文字が入力された際に文字の太さが太くなったように見せることができます。
補足
font-weightプロパティは、文字の太さを指定することができるプロパティです。
値の指定方法は、100~900の9段階による数値で指定する方法と、bold,normalのようにキーワードによる指定方法があります。
キーワードの場合大体にはなりますが、400 = normal、700 = boldといった感じです。
しかし、これだけ細かく設定できる割にはあまり太さに変化がありません。
ですので基本的にはnormalかboldを使用しておけば良いかと思います。
また同じような効果を持つものに、HTMLのstrongタグというものがあります。
違いはfont-weightは「SEOに影響がない」、strongは「SEOに影響がある」ということだけです。念のため記憶しておきましょう。
