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

2020年11月24日

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

t f B! P L
気分が乗っていない時はめちゃくちゃ字が汚くなる、下駄です。 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書き込みやがれ!!!!

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ