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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

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

Q&A

0回答

169閲覧

%aや%imgをlink_to image_tagにできない

yosihiko

総合スコア0

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

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

0グッド

0クリップ

投稿2020/05/22 10:10

前提・実現したいこと

hamlで%aや&img タグをlink_to image_tagにしたいです。
ここに質問の内容を詳しく書いてください。

該当のソースコード

= link_to "/" do %img{src: "../../assets/images/logo/logo.png"}/ .search__icon %img{src: "../../assets/images/icon/icon-search 1.png"}/ %input{name: "authenticity_token", type: "hidden", value: "9s7mpob4L+ENFcSPkww7NwNnfuC8gyy/Ku/RUZ23cIY4vg88Js/QW35xXx/ZNTjjDGJxsv2lwAjWWqTIXxHElw=="}/ %ul.resultLists .nav %ul.listsLeft %li.listsLeft__item.listsLeft__item--first %a#catBtn{href: "#"} カテゴリー .tree.displayNone %ul.categoryTree %li.categoryTree--item %a#1{href: "#"} レディース %li.categoryTree--item %a#2{href: "#"} メンズ %li.categoryTree--item %a#3{href: "#"} ベビー・キッズ %li.categoryTree--item %a#4{href: "#"} インテリア・住まい・小物 %li.categoryTree--item %a#5{href: "#"} 本・音楽・ゲーム %li.categoryTree--item %a#6{href: "#"} おもちゃ・ホビー・グッズ %li.categoryTree--item %a#7{href: "#"} コスメ・香水・美容 %li.categoryTree--item %a#8{href: "#"} 家電・スマホ・カメラ %li.categoryTree--item %a#9{href: "#"} スポーツ・レジャー %li.categoryTree--item %a#10{href: "#"} ハンドメイド %li.categoryTree--item %a#11{href: "#"} チケット %li.categoryTree--item %a#12{href: "#"} 自動車・オートバイ %li.categoryTree--item %a#13{href: "#"} その他 %li.listsLeft__item %a#brandBtn{href: "#"} ブランド %ul.brandsPulldown.displayNone %ul.listsRight %li.listsRight__item.listsRight__item--login %a{href: "#"} ログイン %li.listsRight__item.listsRight__item--new %a{href: "#"} 新規会員登録

.main
%section.main__box
.main__content
%h2.main__content__subtitle
%br/
人生を変えるフリマアプリ
%p.main__content__text
FURIMAはだれでもかんたんに出品・購入できる
%br/
フリマアプリです
.main__content__btn
%a.appbtn{href: "#"}
%img{alt: "アプリをダウンロード", src: "assets/images/apple.png"}/
%a.appbtn{href: "#"}
%img{alt: "アプリをダウンロード", src: "assets/images/play.png"}/

%span.number 1 %img{src: "assets/images/pict/pict-reason-01.jpg"}/ %h3.lists__title %span 3分 ですぐに出品 %p.lists__text スマホで入力するだけで簡単に出品できる! %li.lists .lists__pict %span.number 2 %img{src: "assets/images/pict/pict-reason-02.jpg"}/ %h3.lists__title %span シンプル で使いやすい %p.list__text めんどくさい入力は必要なく、検索も購入もスムーズ! %li.lists .lists__pict %span.number 3 %img{src: "/assets/images/pict/pict-reason-03.jpg"}/ %h3.lists__title 手数料 %span 業界最安 %p.list__text 最大3%でお得に出品&購入! %section.appbox .appbox__text %h2.appbox__text__title 会員数日本一位 %p.appbox__text__sub FURIMAは、フリマアプリで最も人気。 %br/ 出品・購入回数も業界最多です! %br/ ほしかったあの商品に出会えるかもしれません。 .btn %a{href: "#"} %img.abtn{src: "assets/images/apple.png"}/ %a{href: "#"} %img.abtn{src: "assets/images/play.png"}/ %section.feature %h2.feature__head FURIMAの特徴 .items %section.item %figure.item__image %img{src: "/assets/images/icon/icon-01.png"}/ %h3.item__subtitle 簡単に売り買いできる %p.item__text スマホひとつで、いつでもどこでも簡単に出品・購入が可能! %section.item %figure.item__image %img{src: "/assets/images/icon/icon-03.png"}/ %h3.item__subtitle 売上金は即日振込みに対応 %p.item__text 午前9時までに振込を依頼いただければ、翌日に指定の口座に入金いたします! %section.item %figure.item__image %img{src: "/assets/images/icon/icon-04.png"}/ %h3.item__subtitle 様々な支払いに対応 %p.item__text お支払いは、クレジットカードだけでなく、ポイントや売上金など多彩な方法があります。 %section.category %h2.head ピックアップカテゴリー .category__box .category__box__head %a{href: "#"} %h3.title 新規投稿商品 .category__box__lists .category__box__lists__list %a{href: "/products/3"} %figure.category__box__lists__list__img %img{src: "https://s3-ap-northeast-1.amazonaws.com/mercarimaster/uploads/captured_image/content/13/a007.png"}/ .category__box__lists__list__text %h3.name product3 .pricebox %ul %li 30000円 %li %i.fa.fa-star.likeIcon 0 %p (税込) .category__box__lists__list %a{href: "/products/2"} %figure.category__box__lists__list__img %img{src: "https://s3-ap-northeast-1.amazonaws.com/mercarimaster/uploads/captured_image/content/10/a004.png"}/ .category__box__lists__list__text %h3.name product2 .pricebox %ul %li 20000円 %li %i.fa.fa-star.likeIcon 0 %p (税込) .category__box__lists__list %a{href: "/products/1"} %figure.category__box__lists__list__img %img{src: "https://s3-ap-northeast-1.amazonaws.com/mercarimaster/uploads/captured_image/content/7/a001.png"}/ .category__box__lists__list__text %h3.name product1 .pricebox %ul %li 10000円 %li %i.fa.fa-star.likeIcon 0 %p (税込) %section.category %h2.head ピックアップブランド .category__box .category__box__head %a{href: "#"} %h3.title アーカイバ .category__box__lists .category__box__lists__list %a{href: "/products/3"} %figure.category__box__lists__list__img %img{src: "https://s3-ap-northeast-1.amazonaws.com/mercarimaster/uploads/captured_image/content/13/a007.png"}/ .category__box__lists__list__text %h3.name product3 .pricebox %ul %li 30000円 %li %i.fa.fa-star.likeIcon 0 %p (税込) .category__box__lists__list %a{href: "/products/2"} %figure.category__box__lists__list__img %img{src: "https://s3-ap-northeast-1.amazonaws.com/mercarimaster/uploads/captured_image/content/10/a004.png"}/ .category__box__lists__list__text %h3.name product2 .pricebox %ul %li 20000円 %li %i.fa.fa-star.likeIcon 0 %p (税込) .category__box__lists__list %a{href: "/products/1"} %figure.category__box__lists__list__img %img{src: "https://s3-ap-northeast-1.amazonaws.com/mercarimaster/uploads/captured_image/content/7/a001.png"}/ .category__box__lists__list__text %h3.name product1 .pricebox %ul %li 10000円 %li %i.fa.fa-star.likeIcon 0 %p (税込)

%aside.appbanner
.inner
%h2.inner__title だれでもかんたん、人生を変えるフリマアプリ
%p.inner__text 今すぐ無料ダウンロード!
.inner__icon
%a{href: "#"}
%img.appbtn{src: "assets/images/apple.png"}/
%a{href: "#"}
%img.appbtn{src: "assets/images/play.png"}/
.footer
%ul.contents
%li.content
%h2.content__head FURIMAについて
%ul
%li
%a{href: "#"} 会社概要(運営会社)
%li
%a{href: "#"} プライバシーポリシー
%li
%a{href: "#"} FURIMA利用規約
%li
%a{href: "#"} ポイントに関する特約
%li.content
%h2.content__head FURIMAを見る
%ul
%li
%a{href: "#"} カテゴリー一覧
%li
%a{href: "#"} ブランド一覧
%li.content
%h2.content__head ヘルプ&ガイド
%ul
%li
%a{href: "#"} FURIMAガイド
%li
%a{href: "#"} FURIMAロゴ利用ガイドライン
%li
%a{href: "#"} お知らせ
.footer__logo
%a{href: "/"}
%img{src: "/assets/images//logo/logo-white.png"}/
%p © FURIMA
%a{href: "#"}
.displaybtn
%span.displaybtn__text 出品する
%img.displaybtn__icon{src: "/assets/images/icon/icon_camera.png"}/

ソースコード haml rails

試したこと

%a#catBtn{href: "#"} カテゴリー
を= link_to "#", class: "catBtn" do にしたら動きはしました
ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。
%aと%imgをlink_toとimagr_tagにしたいです

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

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

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

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

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

winterboum

2020/05/22 14:39

hamlはインデント命です。 インデントがわかるように回答を編集してください。 <code>をつかう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問