ログイン

問題5 プレースホルダーを設定しよう

HTML_CSSの問題

HTML_CSS

プレースホルダーを使うと、入力欄に初期表示する内容を指定することができます。問い合わせフォームやログイン画面では必須な機能なので覚えておきましょう!

プレースホルダーを設定しよう

問題

textareaやinputのtype=textに対してプレースホルダーをつけてみましょう。

コードを記述し、プレースホルダーの文字色を赤色(red)で表示させましょう。

自分の環境に書くコード

              <textarea cols="30" rows="10"></textarea><input type="text">
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <textarea placeholder="テキストテキスト" cols="30" rows="10"></textarea>
<input placeholder="テキストテキスト" type="text">
¥HTML¥
            
              textarea::placeholder,
input::placeholder {
    color: red;
}
¥CSS¥
            
答えのアイコン

解説

placeholderは、html側で設定する事ができます。

また、placeholderの色の変更や文字のサイズ変更は、セレクタ::placeholder {}で指定する事ができますので覚えておきましょう。
ログインして解答を見る
placeholderはHTMLで用意されている属性のひとつです。

主に問い合わせフォームなどの入力欄に「8文字以上20文字以内」「半角英数字記号を含む」といった制限をユーザーに認識させる際によく使われています。

解説で少し触れましたが、CSSでplaceholderのスタイルを変更する場合、疑似要素として扱うことになるので、直前にダブルコロン(::)をつけて使用します。
この理由を完全に理解しようとすると時間がかかってしまうので、がっつりは説明しませんが、簡単に言うとプレースホルダーはDOM要素ではないので疑似要素に分類されます。
疑似要素の場合、配置の指定や幅の指定などのスタイル指定は適用されないので注意が必要です。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!