個人アプリ・ビュー作成

とりあえず必要なビューは作成することができたので、その時調べた事とかを書いていきます。

textarea タグを使ってテキスト入力欄作成

最終課題の時に使って、今回も実装したいと考えていたので使用しました。

textarea タグとは

複数行の入力が可能な入力欄を作成するためのタグです。

こんなやつです。

今は表示だけしたかったので、

HAML

%textarea.new-body__content-recipe{cols: "60", rows: "6", placeholder: "料理の作り方 (必須 1,000文字以内)"}

こんな感じにしています。

本題

このタグを実装するにあたり、一番書いておきたかったことを書いておきます。

それはエリアのサイズの固定です。

SCSS

.new-body__content-recipe {
   border: 1px solid #ccc;
   border-radius: 4px;
   outline: none;
   display: block;
   width: 100%;
   margin-top: 15px;
   padding: 13px 16px;
   resize: vertical;
        }

前にやったのにまったく覚えていなかったので、絶対書いとかねばと。。

resize: vertical;

これで横方向の拡大を禁止しています。

他にも縦とか拡大・縮小を禁止することもできるみたいです。

縦
resize: horizontal;
拡大・縮小
resize: none;