HTML_CSS
Googleでログイン
問題5：プレースホルダーを設定しよう
textareaやinputのtype=textに対してプレースホルダーをつけてみましょう。
コードを記述し、プレースホルダーの文字色を赤色(red)で表示させましょう。
コードを記述し、プレースホルダーの文字色を赤色(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で用意されている属性のひとつです。
主に問い合わせフォームなどの入力欄に「8文字以上20文字以内」「半角英数字記号を含む」といった制限をユーザーに認識させる際によく使われています。
解説で少し触れましたが、CSSでplaceholderのスタイルを変更する場合、疑似要素として扱うことになるので、直前にダブルコロン(::)をつけて使用します。
この理由を完全に理解しようとすると時間がかかってしまうので、がっつりは説明しませんが、簡単に言うとプレースホルダーはDOM要素ではないので疑似要素に分類されます。
疑似要素の場合、配置の指定や幅の指定などのスタイル指定は適用されないので注意が必要です。
主に問い合わせフォームなどの入力欄に「8文字以上20文字以内」「半角英数字記号を含む」といった制限をユーザーに認識させる際によく使われています。
解説で少し触れましたが、CSSでplaceholderのスタイルを変更する場合、疑似要素として扱うことになるので、直前にダブルコロン(::)をつけて使用します。
この理由を完全に理解しようとすると時間がかかってしまうので、がっつりは説明しませんが、簡単に言うとプレースホルダーはDOM要素ではないので疑似要素に分類されます。
疑似要素の場合、配置の指定や幅の指定などのスタイル指定は適用されないので注意が必要です。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
また、placeholderの色の変更や文字のサイズ変更は、セレクタ::placeholder {}で指定する事ができますので覚えておきましょう。