ログイン

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

HTML_CSSの問題

HTML_CSS

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

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

問題

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

初期の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¥
            
答えのアイコン

解説

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に影響がある」ということだけです。念のため記憶しておきましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!