inputやtextareaなどの記入エリアのサイズが変わる「Stretchy.js」の使い方inputやtextareaなどの記入エリアのサイズが変わる「Stretchy.js」の使い方コラムStretchy.jsは、お問い合わせフォームや検索フォームでテキストを記入する記入エリアをオシャレにするjQueryプラグインです。Stretchy.jsを読み込ませるだけで、あとは何もせずにHTMLを記入するだけです。簡単なので、すぐに導入できます。「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。WEB全般に投稿したコラム記事inputやtextareaなどの記入エリアのサイズが変わる「Stretchy.js」の使い方WEB全般Stretchy.jsとはStretchy.jsは、inputタグ、textareaタグ、select/optionタグなどの文字の入力するエリアのサイズを変えることができるjQueryプラグインです。サイズを変えることができる・・・という表現では語弊があるかもしれません。これらの入力エリアは元々サイズが決まっていたり、CSSでサイズを調整することができます。それとは異なる方法で入力エリアのサイズを変えることができるということです。サイズは、入力した文字の幅だけ大きくなっていくという仕様です。入力を進めるごとに入力エリアが広がっていきます。こんなことを言うのもアレですが・・・ぶっちゃけ、実用性はほぼありません(笑)ただ、ちょっとしたアクセントになることは間違いありませんので、先に進めていきたいと思います。本家サイト本家サイトです。jsファイルのみのダウンロードです。Stretchy.js本家ダウンロードと組み込みサンプル組み込み済みファイルのダウンロードphptemp_strc_180222.zip組み込み済みサンプルサンプルです。トップページの文章部分だけに適応させています。組み込み済みサンプル元になるWEBサイトテンプレート(PHP)について当サイト内の「SEOの基礎知識」の中のコンテンツです。src="/js/stretchy.js"></script>本家からダウンロードしたファイルをアップして読み込ませてください。新たに読み込ませるファイルは以上です。最後に動作確認いきなり動作確認になりますが、間違いではありません(笑)お問い合わせフォームなどで、stretchy.jsを読み込ませるだけです。配布しているサンプルでは、入力エリアの装飾をしているので、追加でcssファイルを読み込ませていますが、基本的には必要ないと思います。文字数が多いと、CSSの装飾ではコントロールできないこともありますので、その点だけ注意してください。その他、補足WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。締めいかがでしたでしょうか?とてーも簡単ですので、遊びが許されるところで是非使ってみてください。こんなことを言うのもアレですが、「なんだこれ?」ということで、入力エリアでテキストを試しに入れてみましたし、何かしらをしてもらうきっかけにはなるかもしれません。あと、宴会芸というところでしょうか(笑)冗談はさておき、楽しむためだけのモノですので、用途は間違えないようにしてくださいね。鈴木謙一氏のWEB担当者Forumの面白記事Facebookコメント他のカテゴリ記事は下記からお選び下さい。SEO対策SEO対策に関する記事を投稿するカテゴリです。SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)WEB全般インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!その他その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。info@oosaka-web.jp何から聞いていいか分からないという方はお問い合わせからお願い致します。SEO対策についてスポットで聞いてみたいことがあるという方は無料相談からお願い致します。ミッションビジョン採用情報エントリーフォームプライバシーポリシーサイトマップお問い合わせSEO対策無料相談TwitterFacebook。