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

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

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

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

HTML5

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

解決済

可変する要素の真ん中に配置したい

n2018
n2018

総合スコア19

CSS3

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

HTML5

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

1回答

0リアクション

0クリップ

166閲覧

投稿2022/09/30 10:27

編集2022/10/03 10:00

pictureとsourceを使い、デバイスサイズにあわせて画像が切り替わるTOPを作りました。
そのTOP画像の中央に、切り替わりに対応した画像(h1)を入れようとしているのですがうまくいきません。
positionで制御しようとしましたが切り替わるごとに画像が下の方にいってしまい不自然になってしまいます。
これは画像を切り替えごとに大きさを作り替えないといけないものでしょうか?

お手数をおかけしますがわかる方ご協力いただけると助かります。

切り替わりイメージは以下になります。画像の中央にリアルタイムで配置される画像を作りたいのです。
※TOP画像の上にぴったり重なるように別画像をいれたいのでそれもイメージに反映されています。

イメージ説明

イメージ説明

イメージ説明

イメージ説明

<div id="header_p" class="header_image"> <figure class="bg_haikei"> <p class="fade right"><タイトル</p> <picture> <source media="(min-width:1000px)" sizes="100vw" srcset="https://placehold.jp/1920x1080.png 1920w, https://placehold.jp/3840x2160.png 3840w"> <source media="(min-width:428px)" sizes="100vw" srcset="https://placehold.jp/2048x2732.png 2048w"> <img sizes="(max-width:427px) 100wv" srcset="https://placehold.jp/720x1280.png 720w, https://placehold.jp/1080x1920.png 1080w, https://placehold.jp/1284x2778.png 1284w" alt=""> </picture> </figure> <picture class="fade header_yama"> <source media="(min-width:1000px)" sizes="100vw" srcset="https://placehold.jp/8271x847.png 1920w"> <source media="(min-width:428px)" sizes="100vw" srcset="https://placehold.jp/8274x1094.png 1920w"> <img sizes="(max-width:427px) 100wv" srcset="https://placehold.jp/4504x1095.png 1080w" alt=""> </picture> <h1 class="logo_box"> <img src="https://placehold.jp/1061x240.png" alt="" class="fade begi_logo"> </h1> </div>
body{ font-size:16px; } section{ display: block; margin: 0 auto; } p { line-height:1.7rem; } img { display: block; } .header_image { width:100vw; position:relative; height:100vh; } .bg_haikei { height:100vh; z-index:0; } .header_yama { width:100vw; z-index:2; position: absolute; top:0; left:0; } p,h2 { z-index:4; color:#6D5C51; } .right { text-align:right; position: absolute; top:26px; right:20px; font-size:1.2rem; font-weight:bold; letter-spacing: 0.15rem; } img.begi_logo { position:absolute; display: block; top:40%; width:min(80vw,1133px); margin:0 auto; z-index:6; } main.bg_kiso { width:80vw; margin:0 auto; } .kikkake,.syoukai_n { display:block; width:86vw; margin:0 auto; } section.color_bg1 { background-color:#BFD5A0; padding-top:148px; padding-bottom:257px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .k_midashi { font-size:2.5rem; letter-spacing: 0.15rem; margin-bottom:24px; } .left2 { margin-bottom:88px; } .openbtn>p{ font-size:0.8rem; letter-spacing: 0.1rem; } .syoukai { padding-top:120px; padding-bottom:180px; background:#F5F5F5; } section.color_bg2 { background-color:#F5F5F5; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } figure.zure1 img{ width:100vw; } figure.zure2 img{ width:53.6vw; margin-left:6.4vw; margin-top:-56px; margin-bottom:56px; } figure.zure3 img{ width:85.9vw; margin-left:14.1vw; }

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

hatena19

2022/09/30 11:00

それぞれの画像のサイズが分からないので、HTML内の各画像のURLを下記のページのダミー画像のURLに置き換えてもらえますか。 https://placehold.jp/
n2018

2022/10/03 05:19

失礼いたしました。別の質問と同様入れ替えさせていただきました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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