入力した文字を拡大表示する超初級JSのdemoページ（あるいはplaceholder内のテキストをfocusで消すCSSテク）

Update:

JavaScriptの勉強を始めたとき、最初か2番目くらいにやってみる初級 of 初級のJavaScriptを使って、文字拡大させるデモページを作ってみました。
あまりにも初級なので、コードのサンプルは載せません。
単純に表示させる側のテキストにfont-size:2.5remを指定しただけ。

入力すると

大きなフォントサイズで表示されます。

なんのためにこんなデモページを作ったの？って言われそうですが、ディスクリプション等の文章チェックで、大きい文字で見た方が確認しやすいからという理由です！
初級過ぎて検索しても見つからなかったので（テキストエディタでやればいい気が今更ながらしてきましたが）。

デモページ

こっそり、textareaをfocusでplaceholder内の文字を消すCSSテクのメモも兼ねてます。

デフォルトのplaceholder内の文字が入力するまで文字が消えない仕様だと、人によって混乱するようなので（「ここの文字、どうやって消したらいいの？」と聞かれたことがある）、focusで消えてくれてた方がスッキリするのかなと思います。

textareaではなくテキストフォームに反映させたい場合は、textarea:placeholder-shownの部分を、input[type="text"]:placeholder-shownに置き換えてください。
ただのinputでもいいかも知れないんですが、検証してみてください。

/* placeholder */
textarea:placeholder-shown {
 color: #bbb;
}
textarea::-webkit-input-placeholder {
 color: #bbb;
}
textarea::-moz-placeholder {
 color: #bbb;
 opacity: 1;
}
textarea:-ms-input-placeholder {
 color: #bbb;
}

/* placeholder focus */
textarea:focus::-webkit-input-placeholder { 
 color:transparent;
}
textarea:focus::-moz-placeholder { 
 color:transparent; 
}

注意事項

: 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN
HTML の 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。

placeholder内のテキストは、翻訳アプリや読み上げソフトでは対応されないようです。見た目的にはスッキリするのですが盲点でした。
アクセシビリティを重視する場合は、従来の入力欄の前後に入力例を記載するスタイルが良さそうですね。

関連記事: