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

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

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

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

HTML5

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

Q&A

解決済

1回答

556閲覧

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

risa_1010

総合スコア1

CSS3

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

HTML5

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

0グッド

0クリップ

投稿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

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

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

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

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

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

Cocode

2022/12/04 20:26

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

回答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

総合スコア33516

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

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

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

risa_1010

2022/12/07 04:31

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

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

CSS3

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

HTML5

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