はじめに
Railsで bootstrapなどのCSSフレームワークを使わない、素のコードが意外とみつかないので、そのメモ
前提
Receptionモデルがあり、カラムは名前と目的。
目標
このようなシンプルなフォームをHTMLとCSSのみをつかってシンプルに書く
HTML
- フィールドはtext_field,select_field,submitの3つ
html
<%= form_with model: @reception do |f| %>
<ul>
<li>
<%= f.label :name, "名前" %>
</li>
<li>
<%= f.text_field :name, placeholder: "名前を入力してください" %>
</li>
<li>
<%= f.label :purpose, "ご用件を選択してください" %>
</li>
<li>
<%= f.select :purpose,
(
[
["面接のため", '面接'],
["面談のため", '面談'],
["打ち合わせのため", '打ち合わせ'],
["その他", 'その他']
]
), {}, size: "4"
%>
</li>
<li>
<%= f.submit '送信する' %>
</li>
</ul>
<% end %>
CSS
- Rubyのform_witth メソッドによって、formタグが生成される
- ul,li のリスト表示にする
- selectタグをsize: "4"の第４引数に指定することで選択肢から4つ表示して状態に設定できる
css
form {
width: 60%;
margin: auto;
padding-top: 1%;
}
ul {
list-style: none;
padding-left: 0;
width: 100%;
text-align: center;
}
label {
font-size: 25px;
}
input[type=text], select {
text-align: center;
width: 55%;
font-size: 20px;
border: 1px solid #CCC;
border-radius: 1rem;
margin-bottom: 20px;
padding: 1%;
}
input[type=submit] {
text-align: center;
width: 55%;
font-size: 20px;
border: 1px solid #CCC;
border-radius: 1rem;
margin-bottom: 20px;
padding: 1%;
}
まとめ
もっときれいに書く方法があると思うので、参考程度におねがいします。
追記
誤字を修正
