teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップCSS3に関する質問可変する要素の真ん中に配置したい

編集履歴

質問編集履歴

3

画像を追加

2022/10/03 10:00

投稿

n2018
n2018

スコア19

test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,8 @@
15
15
 
16
16
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-03/61f39919-e872-47c3-8850-3b733b9c7dc7.png)
17
17
 
18
+
19
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-03/e7317ed6-c8be-4b42-a355-94563c94a94d.png)
18
20
 
19
21
 
20
22
 
CSS3HTML5

2

説明画像を追加

2022/10/03 05:52

投稿

n2018
n2018

スコア19

test CHANGED
File without changes
test CHANGED
@@ -5,6 +5,17 @@
5
5
  これは画像を切り替えごとに大きさを作り替えないといけないものでしょうか？
6
6
 
7
7
  お手数をおかけしますがわかる方ご協力いただけると助かります。
8
+
9
+ 切り替わりイメージは以下になります。画像の中央にリアルタイムで配置される画像を作りたいのです。
10
+ ※ＴＯＰ画像の上にぴったり重なるように別画像をいれたいのでそれもイメージに反映されています。
11
+
12
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-03/3a83d692-b99d-4153-9629-806d692bfad9.png)
13
+
14
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-03/9133d2e5-57e7-479c-8d45-54990c57a8d2.png)
15
+
16
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-03/61f39919-e872-47c3-8850-3b733b9c7dc7.png)
17
+
18
+
8
19
 
9
20
 
10
21
  ```
CSS3HTML5

1

仮想画像を挿入しました。

2022/09/30 11:39

投稿

n2018
n2018

スコア19

test CHANGED
File without changes
test CHANGED
@@ -10,23 +10,22 @@
10
10
  ```
11
11
  <div id="header_p" class="header_image">
12
12
  <figure class="bg_haikei">
13
- <p class="fade right">moji</p>
13
+ <p class="fade right"><タイトル</p>
14
14
  <picture>
15
- <source media="(min-width:1000px)" sizes="100vw" srcset="img/main_pc_1920.jpg 1920w, img/main_pc.jpg 3840w">
15
+ <source media="(min-width:1000px)" sizes="100vw" srcset="https://placehold.jp/1920x1080.png 1920w, https://placehold.jp/3840x2160.png 3840w">
16
- <source media="(min-width:428px)" sizes="100vw" srcset="img/main_tb_high.jpg 2048w">
16
+ <source media="(min-width:428px)" sizes="100vw" srcset="https://placehold.jp/2048x2732.png 2048w">
17
- <img sizes="(max-width:427px) 100wv" srcset="img/main_sp_low.jpg 720w, img/main_sp_normal.jpg 1080w, img/main_sp_high.jpg 1284w" alt="moji">
17
+ <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="">
18
18
  </picture>
19
19
  </figure>
20
20
  <picture class="fade header_yama">
21
- <source media="(min-width:1000px)" sizes="100vw" srcset="img/bg_head_bg_small.svg 1920w">
21
+ <source media="(min-width:1000px)" sizes="100vw" srcset="https://placehold.jp/8271x847.png 1920w">
22
- <source media="(min-width:428px)" sizes="100vw" srcset="img/bg_head_bg.svg 1920w">
22
+ <source media="(min-width:428px)" sizes="100vw" srcset="https://placehold.jp/8274x1094.png 1920w">
23
- <img sizes="(max-width:427px) 100wv" srcset="img/bg_head_bg_small_2.svg 1080w" alt="moji">
23
+ <img sizes="(max-width:427px) 100wv" srcset="https://placehold.jp/4504x1095.png 1080w" alt="">
24
24
  </picture>
25
25
  <h1 class="logo_box">
26
- <img src="img/begi_banner.png" alt="moji" class="fade begi_logo">
26
+ <img src="https://placehold.jp/1061x240.png" alt="" class="fade begi_logo">
27
27
  </h1>
28
28
  </div>
29
-
30
29
  ```
31
30
  ```
32
31
  body{
CSS3HTML5