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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

画像とあしらい文字を一塊にして塊で動かせるようにしたいです(現在レスポンシブでディスプレイ幅を調節する度にあしらいがずれてしまう)

risa_1010
risa_1010

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0グッド

0クリップ

258閲覧

投稿2022/12/04 09:18

前提

「質問」
レスポンシブでディスプレイ幅を変更した際も画像の裏側のあしらい文字が動かないようにする方法をご教示いただきたいです。よろしくお願いいたします!!

「現在」
→画像の裏側にあしらい文字を配列しているのですが、レスポンシブでディスプレイ幅を変えるたびにずれてしまいます。
現在は、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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Cocode

2022/12/04 20:26

> 画像と文字(作品名が入る等)、あしらい文字(05)の3つの要素を一塊にしたい。 フォントサイズについてはどうなりますか? 画面幅を狭くしたら画像が小さくなりますが、 それに合わせて「05」のフォントサイズも小さくしますか? それともそのままのサイズですか?

回答1

3

ベストアンサー

position: absolute;で位置決めする場合は、まず座標の基準とする親要素にposition: relative;を設定します。
質問のHTMLなら、.works-itemになるでしょう。
次に、この親要素のどこを基準に位置決めするかですが、画像のレイアウトから推測するに、親要素の右下を基準にするとよさそうです。その場合、rightbottom で右下からの距離を設定します。

画面幅に対して、要素のサイズをどうするのかの仕様が不明なので、こちらで適当に決めたサンプルコードを提示しておきますので、これを参考にしてお好みのサイズに修正してください。

css

1.works-img img { 2 border: 1px solid #e6e6e6; 3 position: relative; 4 width: 95%; 5} 6.works-item { 7 display: block; 8 position: relative; 9 background-color: #e6d1c9; 10 max-width: 1000px; 11 width: 100%; 12 margin: 0 auto; 13 text-decoration: none; 14} 15.asirai { 16 font-family: "BIZ UDゴシック"; 17 font-size: 90px; 18 color: #fff; 19 opacity: 0.3; 20 position: absolute; 21 right: 5%; 22 bottom: 5%; 23} 24.works-name, .works-info { 25 font-size: 20px; 26}

投稿2022/12/06 14:50

hatena19

総合スコア32038

risa_1010😍を押しています
risa_1010👏を押しています
risa_1010を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

risa_1010

2022/12/07 04:31

ずっと悩んでいたことだったので本当に助かりました! ご丁寧にご回答いただき、ありがとうございます!!!✨

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。