前提
「質問」
レスポンシブでディスプレイ幅を変更した際も画像の裏側のあしらい文字が動かないようにする方法をご教示いただきたいです。よろしくお願いいたします!!
「現在」
→画像の裏側にあしらい文字を配列しているのですが、レスポンシブでディスプレイ幅を変えるたびにずれてしまいます。
現在は、paddingで文字の位置を調節しているのですが、何か他に良い方法はないでしょうか?
実現したいこと
レスポンシブで横幅のサイズを変えるたびにpaddingを調節しなくてもよいように、
画像と文字(作品名が入る等)、あしらい文字(05)の3つの要素を一塊にしたい。
該当のソースコード
現在は以下のようにコードを組んでおります。
HTML
1<a class="works-item" href="works-template.html"> 2 <div class="asirai">05</div> 3 <p class="works-img"><img src="img/works.jpg" alt="画像名を入れる" /></p> 4 <p class="works-name">作品名が入る</p> 5 <p class="works-info">Banner Design</p> 6</a>
css
1.works-img img { 2 border: 1px solid #e6e6e6; 3 position: relative; 4} 5 6.asirai { 7 font-family: "BIZ UDゴシック"; 8 font-size: 90px; 9 color: #fff; 10 opacity: 0.3; 11 position: absolute; 12 margin-top: 190px; 13 margin-left: 240px; 14}
補足情報(FW/ツールのバージョンなど)
構築環境:Google chrome / visual studio code
> 画像と文字(作品名が入る等)、あしらい文字(05)の3つの要素を一塊にしたい。
フォントサイズについてはどうなりますか?
画面幅を狭くしたら画像が小さくなりますが、
それに合わせて「05」のフォントサイズも小さくしますか?
それともそのままのサイズですか?
回答1件
あなたの回答
tips
プレビュー