問題

11
HTML_CSS

テキストボックスの文字を変化させよう

テキストボックスとは、inputタグを設置した際に表示される文字を打ち込むことができるフォームのことです。この問題を解いてテキストボックス内の文字スタイルを自由に変更できるようになりましょう。

HTML_CSSの問題に挑戦しよう!

問題

テキストボックスの文字を変化させよう

テキストボックスが入力されたら文字の太さを太くしましょう。

初期のplaceholderの文字の太さは普通の状態で、入力されたら文字の太さを太くしましょう。

あらかじめエディタに書くコード

                    <input name="sample" type="text" style="width: 200px; height:30px; font-size:16px;" placeholder="文字の太さ普通">
¥HTML¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用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に影響がある」ということだけです。念のため記憶しておきましょう。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET