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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails 5

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

Q&A

解決済

1回答

1523閲覧

Rails: hamlでのdiv classの書き方

Komama

総合スコア28

Ruby on Rails 5

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

0グッド

0クリップ

投稿2020/02/16 06:44

■分からないこと
form_withでテキストの入力欄を作り、そこにclassの設定をしてcssで装飾したいと思っています。
しかしhamlでのdiv classの書き方が上手く出来ません。
ご教授いただけますと幸いです。

■参考にしたコード

HTML

1<div class="cp_iptxt"> 2 <input type="text" placeholder="お名前"> 3 <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i> 4</div> 5<div class="cp_iptxt"> 6 <input type="text" placeholder="E-Mail"> 7 <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i> 8</div>

■CSS

CSS

1.cp_iptxt { 2 position: relative; 3 width: 27.33%; 4 margin: 40px 3%; 5} 6.cp_iptxt input[type='text'] { 7 font: 15px/24px sans-serif; 8 box-sizing: border-box; 9 width: 100%; 10 padding: 0.3em; 11 padding-left: 40px; 12 letter-spacing: 1px; 13 border: 0; 14} 15.cp_iptxt input[type='text']:focus { 16 outline: none; 17} 18.cp_iptxt input[type='text']:focus::after { 19 outline: none; 20} 21.cp_iptxt i { 22 position: absolute; 23 top: 0; 24 left: 0; 25 padding: 9px 5px; 26 transition: 0.3s; 27 color: #aaaaaa; 28} 29.cp_iptxt::after { 30 display: block; 31 width: 100%; 32 height: 4px; 33 margin-top: -1px; 34 content: ''; 35 border-width: 0 1px 1px 1px; 36 border-style: solid; 37 border-color: #da3c41; 38}

■Rails

view

1= form_with model: @student, local: true do |f| 2 .cp_iptxt 3 = f.label :name, "名前" 4 %small.text-danger※必須 5 = f.text_field :name 6 %i.fa.fa-user.fa-lg.fa-fw{"aria-hidden" => "true"}

■生成されたHTML

HTML

1<div class="cp_iptxt"></div> 2<label for="name">名前</label> 3<small class="text-danger">※必須</small> 4<input type="text" name="name"> 5<i aria-hidden="true" class="fa fa-user fa-lg fa-fw"></i>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

インデントを修正したら無事出来ました。

投稿2020/02/16 08:44

Komama

総合スコア28

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問