[css] textareaタグをノート風にする方法

2020年11月24日

CSS テクノロジー プログラミング

eyecatch 気分が乗っていない時はめちゃくちゃ字が汚くなる、下駄です。 HTMLのtextareaタグって、とっても簡素な入力フォームですよね。 inputタグで改行ができるという事なんですが、サイズを同じにすると、まるでどっちがどっちなのか判別できなくなります。 そんなtextareaタグにちょこっとデザイン装飾をするだけで、まあまあイケてる要素になる(かもね)というテクニックをお伝えしたいと思います。

inputとtextarea

<input style="width:100px;height:20px;border:1px solid #ccc;margin:10px;padding:0;"> <textarea style="width:100px;height:40px;border:1px solid #ccc;margin:10px;padding:0;"></textarea> ほら、サイズが違うという点は、全く区別がつかないですね。 textareaは、右下にリサイズできるマークが付いているのでそれでも判別できるかもしれませんが、通常はresize:none;として、表示しないようにしてしまいます。

textareaをノート風にしてみると・・・

textarea.note{ line-height: 20px; background: linear-gradient(to bottom, #eee 1px, white 1px); background-size: 100% 20px; background-origin: content-box; background-attachment: local; } 上記スタイルをpセットして、class名に「note」をつけると、 こんな感じになります。 これ、めちゃくちゃ良くないですか? textareaのデフォルトか、cssプロパティに入れてほしいですよね。

ちょこっと解説

背景色のグラデーションで横1本線を表示するようにしてタイリング表示しているんですが、line-heightとそのグラデーションの幅を合わせることで、書き込む文字列と連動するようにしてます。 当たり前ですが、文字サイズは、その幅よりも小さくしてくださいね。文字を大きくしたい場合は、その幅も大きくする必要があります。 ノートの色は、グラデーションの箇所の色をちょいちょいといじれば変更できるし、textareaタグのpaddingに合わせてノート罫線も自動調整するようにしているので、かなりしっかりとノートになると思います。 ちなみに、firefoxでもoperaでも正常に表示ができましたが、Macでの確認だけなので、MS系のブラウザは見ていません。(あしからず) 使いたくなった人は、今すぐcss書き込みやがれ!!!!

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。