Q&A
Railsでしょうか。
レイアウトだけの話ならほぼ関係ないのでブラウザに表示されたHTMLだけを提示されたほうが良いかと思います。
「span要素の内容を、p要素の上に重ねる」という装飾
p要素の中にはimg要素（画像）があり、span要素の中には文字がありますから、「画像の上に文字が重なる」ことになると考えたのですがうまくいきません。
他のやり方でも大丈夫なので簡単なコード教えていただきたいです
html
1コード 2 <p style=”position: relative;”> 3 <%= image_tag "e0050_0.png" %> 4 <span style=”position: absolute; rigth: 75px; width: 145px;”> 5 aiu 6 </span> 7 </p> 8 9
「レイアウトだけの話ならほぼ関係ないので」と書いたのでRails関係ないコードにしてほしかったのですが、タグを追加されるとRails前提になってしまいます。それで良いのなら良いのですけど・・
ブラウザに表示されたHTMLだけなのですが違いますでしょうか？？
> <%= image_tag "e0050_0.png" %>
これはHTMLではないです。RailsのViewのタグです。
Rais関係ないコードがわかりません。すみません。。
やりたいコードに関係あるところを抜粋しました
ブラウザ表示→ブラウザ内で右クリック→ソースを表示
ViewプログラムはコンパイルされてHTMLに変換されます。
とりあえず、ダブルクォーテーションが全角です。
あと、rigth→right だと思います。
コードがコピペじゃないということですね。
本当にそのままだとそもそも書いたstyleは一切ききません。
ただ、他のCSSの影響もありそうですね。
クォーテーション半角にしてrightにしても提示のようにはなりません。
rightからの距離しかとっていないのでブラウザ広げればずっと右側にくっついたまま画像からは離れていくはずです。
回答1件
0
「背景画像にしてその背景画像を入れた要素の中で位置を指定する」方が操作しやすいと思います。
おそらく、背景画像にできれば今でもpositionとか利用されているし、そこまで難しくはないのではと。
むしろpaddingとかtext-alignで済むくらいになるかもしれない。
投稿2020/10/22 05:16
総合スコア80875
■HTML
<div class=top_pic_text>
</div>
■CSS
.top_pic_text{
background-image: image-url('e0050_0.png');
}
何も表示されないのですが書き方違いますか？抜粋してます
「 image-url」というのはありません。
https://developer.mozilla.org/ja/docs/Web/CSS/background-image
あと背景画像にしたら領域の高さ・幅を確保（指定）する必要があります。勝手に広がってはくれません。
あなたの回答
tips
プレビュー
