質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • HTML

    11430questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby

    9394questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    8815questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • HTML5

    5098questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 5

    3152questions

rails フォームのテキストエリアの幅を統一出来ない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 133
退会済みユーザー

退会済みユーザー

 実現したいこと

ユーザー登録、編集フォームを作成しています。
deviseをログイン機能までなんとか実装する事が出来たので、CSSを弄ってみました。
その際に概ねはイメージした形になったのですがテキストエリアをどうしても同じ大きさに出来なくて困っています。
私になりに色々と工夫はしてみたものの解決する事が出来ませんでした.。
誰かお分かりの方で教えて頂けると嬉しいです

<!-- <h2>Edit <%= resource_name.to_s.humanize %></h2> -->

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= devise_error_messages! %>

<html>
  <body>
    <div id="form">
      <p class="form-title">編集</p>
      <form action="post">
      <div class="field">
        <p><%= f.label :image %><br /></p>
        <%= f.file_field :image %>
      </div>

      <div class="username">
        <p><%= f.label :name %><br /></p>
        <%= f.text_field :name, autofocus: true %>
      </div>

      <div class="mail">
        <p><%= f.label :email %><br /></p>
        <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
      </div>

      <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
      <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
      <% end %>

      <div class="field">
        <p><%= f.label :password %><br> <small><i>(パスワードを変更しない場合は何も記入しないでください。)</i><br /></small></p>
        <%= f.password_field :password, autocomplete: "new-password" %>
        <% if @minimum_password_length %>
      <p><small><em><%= @minimum_password_length %>文字以上のパスワードにしてください。</em></small></p>
      <% end %>
    </div>

    <div class="field">
      <p><%= f.label :password_confirmation %><br /></p>
      <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
    </div>

    <div class="field">
      <p><%= f.label :current_password %><br><small> <i>(確認のため現在のパスワードを再度入力してください。)</i></small><br /></p>
      <%= f.password_field :current_password, autocomplete: "current-password" %>
    </div>

    <div class="square_btn">
      <%= f.submit "編集完了" %>
    </div>
    <% end %>
    <div class="square_btn2">
      <%= button_to "アカウント削除", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %>
    </div>
    <div class="square_btn3">
    <%= link_to "Back", :back %>
    </div>
    </form>
   </div>
  <body>
</html>
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
  outline: 0;
  box-shadow: none;
  border: 2px solid #FF9800;
  background-color: #ffffff;
}

input:focus::placeholder {
  color: #c5c5c5;
}

/* layout */
body,p,form,input{margin: 0}
#form{
  width: 400px;
  margin: 30px auto;
  padding: 20px;
  border: 1px solid #555;
  }

form p{
    font-size: 14px;
    }

.form-title{
  text-align: center;
  }

.field{
  margin-top: 7px;
}
.mail,.pass,.username{
  margin-bottom: 10px;
  }

input[type="email"],
input[type="password"],
input[type="username"] {
  width: 300px;
  padding: 4px;
  font-size: 14px;
  }

.submit{
  text-align: right;
  }

/* font */
#form p{
  color: #077685;
  font-weight: bold;
  }

#form .form-title{
  font-family: Arial;
  font-size: 30px;
  color: #4eb4c2;
  }

/* skin */
#form{
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 1px 10px #488a9e;
  -moz-box-shadow: 0px 1px 10px #488a9e;
  box-shadow: 0px 1px 10px #488a9e;
  border: solid #4eb4c2 1px;
  background: #fafafa;
  }

#form .form-title{
  padding-bottom: 6px;
  border-bottom: 2px solid #4eb4c2;
  margin-bottom: 20px;
  }

.submit input{
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  text-decoration: none;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 8px 6px #e3e3e3;
  -moz-box-shadow: 0px 8px 6px #e3e3e3;
  box-shadow: 0px 8px 6px #e3e3e3;
  border: solid #f5fdff 4px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#61c7e0), to(#418da8));
  background: -moz-linear-gradient(top, #61c7e0, #418da8);
  }
.submit input:hover{
  background: #37a4bf;
 }
 /* edit */
 .square_btn{
     position: relative;
     display: inline-block;
     font-weight: bold;
     padding: 0.20em 7.58em; /* テキストボックスの長さ7.58 */
     text-decoration: none;
     color: #00BCD4;
     background: #ECECEC;
     transition: .4s;
     margin-top: 7.0px;
   }

 .square_btn:hover {
     background: #00bcd4;
     color: white;
 }

 /* delete */
 .square_btn2{
     position: relative;
     display: inline-block;
     font-weight: bold;
     padding: 0.20em 6.58em; /* テキストボックスの長さ7.58 */
     text-decoration: none;
     color: #00BCD4;
     background: #ECECEC;
     transition: .4s;
     margin-top: 7.0px;
   }

 .square_btn2:hover {
     background: #00bcd4;
     color: white;
 }

 /* back3 */
 .square_btn3{
     position: relative;
     display: inline-block;
     font-weight: bold;
     padding: 0.20em 3.58em; /* テキストボックスの長さ7.58 */
     text-decoration: none;
     color: #00BCD4;
     background: #ECECEC;
     transition: .4s;
     margin-top: 7.0px;
   }

 .square_btn3:hover {
     background: #00bcd4;
     color: white;
 }

写真

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mariguranule

    2018/11/23 02:04

    実際にどのように表示されているのかキャプチャなどあれば答えやすいかと思います・・

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/11/23 08:14

    すいませんでした。追記しました。

    キャンセル

回答 1

checkベストアンサー

+1

input[type="email"],
input[type="password"],
input[type="username"] {
  width: 300px;
  padding: 4px;
  font-size: 14px;
  }


この部分ですが、input[type="username"]は存在しません。今回usernameはtext_fieldタグで作っているので、input typeはtextになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/23 09:41

    最近勉強し始めたものですごくバカな質問かもしれませんが、text_fieldは元からそういう風になっているものなのですか?
    てっきり、input[type=""]の中は自由に改変できるものだと思っていたのですが...

    キャンセル

  • 2018/11/23 09:46

    erbのtext_fieldタグはhtmlの<input type="text">タグを生成するタグです。inputのtypeとして定められるのはhtmlの方で定義されていて、textのほかにtextareaやfileなどがあったと思います。詳しくは「html input」で調べてみると色々でてくると思います。

    キャンセル

同じタグがついた質問を見る

  • HTML

    11430questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby

    9394questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    8815questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • HTML5

    5098questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 5

    3152questions