ログイン
問題11

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

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

アイコン画像

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

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

初期の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!!
LINEの友達追加でお役立ち動画をGET!!

閉じる