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

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

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

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

Ruby on Rails

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1515閲覧

画像の下に文字を入れたい

topposan2zi

総合スコア5

Haml

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

Ruby on Rails

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/12 05:56

画像の下に文字を表示したいのですが、
どうやっても画像の横に表示されてしまいます。

index.html.haml

1.wrapper 2 .main 3 - @posts.each do |post| 4 .contents 5 .contents__item 6 = image_tag post.image.url, class: "post-image", :size =>'300x200' 7 .content-title 8 = post.name

css

1.wrapper{ 2 background-image: image-url("DSC_1372.jpg"); 3 height: 100vh; 4 width: 100vw; 5 overflow: scroll; 6 .main{ 7 display: flex; 8 flex-wrap: wrap; 9 .contents{ 10 display: flex; 11 flex-wrap: wrap; 12 font-size: 20px; 13 color: white; 14 margin-top: 50px; 15 margin-bottom: 10px; 16 &__item{ 17 margin-left: 100px; 18 .post-image{ 19 border: 1px solid white; 20 } 21 .content-title{ 22 background-color: rgba(32, 30, 30, 0.418); 23 margin-bottom: 10px; 24 margin-top: -10px; 25 } 26 } 27 } 28 } 29}

画像とテキストを配列にせずにどこに当てるかレイアウトを決めた時はしっかりと表示されていました。

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

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

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

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

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

guest

回答1

0

ベストアンサー

= image_tag= post.name の前に半角 2 スペースを加えて HTML に出力された後に <div class="contents__item"><div class="content-title"> の子要素になるように書き換えてあげれば修正されるのではないでしょうか。

.wrapper .main - @posts.each do |post| .contents .contents__item = image_tag post.image.url, class: "post-image", :size =>'300x200' .content-title = post.name

修正前に吐き出されるHTML

<div class="wrapper"> <div class="main"> <% @posts.each do |post| %> <div class="contents"> <div class="contents__item"></div> <%= image_tag post.image.url, class: "post-image", :size =>'300x200' %> <div class="content-title"></div> <%= post.name %> </div> <% end %> </div> </div>

画像とテキストが入れ子になっておらず、画像もテキストもインライン要素扱いになるため、並んで表示されてしまう。

修正後に吐き出されるHTML

<div class="wrapper"> <div class="main"> <% @posts.each do |post| %> <div class="contents"> <div class="contents__item"> <%= image_tag post.image.url, class: "post-image", :size =>'300x200' %> </div> <div class="content-title"> <%= post.name %> </div> </div> <% end %> </div> </div>

画像とテキストが入れ子になっているので、画像の下にテキストが表示される。

投稿2020/07/15 03:14

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

topposan2zi

2020/07/15 04:36

無事に思った表示になりました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問