サイズ可変の正方形をテキストの下に引くやり方がわかりません。

解決したいこと　：　画像とテキストを交互に配置しているのですが、h3とpの下にサイズ可変の白色の正方形を置きたいです。テキストの背景になる正方形のpaddingは5pxとしたいです。
完成予定図のワイヤーフレームを添付いたしました。

行ってみたこと　：　[html] <div class="rect-wrap"><div class="rect"></div></div>
[css] .rect-wrap { width: 50% ;}
.rect { width : 100% ; padding-top : 100% ; background-color: #29d632;}
を書き足しましたが、レイアウトが崩れてしまいます。

ご回答いただけると幸いです。
よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>ダミーダミーダミー</title>
6    <meta name="description" content="ダミーダミーダミー">
7    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
8    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
9    <link rel="stylesheet" href="ダミーダミーダミー">
10</head>
11<body>
12    <div class="top-wrapper">
13        <div class="container">
14            <img class="top-logo" src="ダミーダミーダミー" alt="ダミーダミーダミー">
15        </div>
16    </div>
17    <header>
18        <div class="container header-flexbox">
19            <div><a href="index.html"><img class="header-logo" src="ダミーダミーダミー" alt="ダミーダミーダミー"></a></div>
20            <nav>
21                <ul class="nav-main">
22                    <li><a href="message.html">ダミーダミーダミー</a></li>
23                    <li><a href="effect.html">ダミーダミーダミー</a></li>
24                    <li><a href="recruit.html">ダミーダミーダミー</a></li>
25                    <li><a href="activity.html">ダミーダミーダミー</a></li>
26                </ul>
27            </nav>
28        </div>
29    </header>
30    <div class="message-wrapper">
31        <div class="container">
32            <div class="message-text">
33                <h1>タイトルが入りますタイトルが入ります</h1>
34                <p>ダミーダミーダミー</p><p>ダミーダミーダミー</p><p class="message-paddingTop">ダミーダミーダミー</p>
35            </div>
36        </div>
37    </div>
38    <div class="activity-wrapper">
39        <div class="container service">
40           <div class="heading">
41               <h2>ダミーダミーダミー</h2>
42           </div>
43            <ul class="servicearea">
44                <li class="category">
45                    <div class="pic"><img src="ダミーダミーダミー"></div>
46                    <div class="rect-wrap">
47                        <div class="rect"></div>
48                    </div>
49                    <div class="txt">
50                        <h3>見出しが入ります</h3>
51                        <p>テキストが入ります。テキストが入ります。テキストが入ります。
52                            テキストが入ります。テキストが入ります。テキストが入ります。
53                            テキストが入ります。テキストが入ります。テキストが入ります。</p>
54                    </div>
55                </li>
56                <li class="category">
57                    <div class="pic"><img src="ダミーダミーダミー"></div>
58                    <div class="txt">
59                        <h3>見出しが入ります</h3>
60                        <p>テキストが入ります。テキストが入ります。テキストが入ります。
61                            テキストが入ります。テキストが入ります。テキストが入ります。
62                            テキストが入ります。テキストが入ります。テキストが入ります。</p>
63                    </div>
64                </li>
65                <li class="category">
66                    <div class="pic"><img src="ダミーダミーダミー"></div>
67                    <div class="txt">
68                        <h3>見出しが入ります</h3>
69                        <p>テキストが入ります。テキストが入ります。テキストが入ります。
70                            テキストが入ります。テキストが入ります。テキストが入ります。
71                            テキストが入ります。テキストが入ります。テキストが入ります。</p>
72                    </div>
73                </li>
74                <li class="category">
75                    <div class="pic"><img src="ダミーダミーダミー"></div>
76                    <div class="txt">
77                        <h3>見出しが入ります</h3>
78                        <p>テキストが入ります。テキストが入ります。テキストが入ります。
79                            テキストが入ります。テキストが入ります。テキストが入ります。
80                            テキストが入ります。テキストが入ります。テキストが入ります。</p>
81                    </div>
82                </li>
83            </ul>
84        </div>
85    </div>
86</body>
87</html>

css
1@charset "UTF-8";
2* { 
3    box-sizing: border-box;
4}
5html {
6    font-size: 100%;
7}
8body {
9    font-family: 'Lora', serif;
10    font-family: 'Noto Serif JP', serif;
11}
12a {
13    text-decoration: none;
14}
15h2, h3, p {
16    font-weight: normal;
17}
18.container {
19    max-width: 1170px;
20    width: 100%;
21    padding: 0 15px;
22    margin: 0 auto;
23    padding: 0 4%;
24}
25.top-wrapper {
26    min-height: 100vh;
27    background-image: url(ダミーダミーダミー);
28    background-size: cover;
29    background-position: center top;
30    background-repeat: no-repeat;
31}
32.top-logo {
33    position: absolute;
34    top: 50%;
35    left: 50%;
36    width: 20%;
37    -webkit-transform: translate(-50%, -50%);
38    -moz-transform: translate(-50%, -50%);
39    transform: translate(-50%, -50%);
40    z-index: 100;
41}
42header {
43    height: 80px;
44    width: 100%;
45    background-color: #f7f7f7;
46}
47.header-flexbox {
48    display: flex;
49    justify-content: space-between;
50}
51.header-logo {
52    width: 55px;
53    margin-top: 13px;
54}
55.nav-main {
56    display: flex;
57    list-style: none;
58    margin-top: 27px;
59    font-size: 1rem;
60    text-transform: uppercase;
61}
62.nav-main li {
63    margin-left: 70px;
64    letter-spacing: 5px;
65}
66.nav-main a { 
67    color: black;
68    position: relative;
69    display: inline-block;
70}
71.nav-main a::after {
72    position: absolute;
73    bottom: -10px;
74    left: 0;
75    content: '';
76    width: 100%;
77    height: 1px;
78    background: #333;
79    transform: scale(0, 1);
80    transform-origin: right top;
81    transition: transform .3s;
82}
83.nav-main a:hover::after {
84    transform-origin: left top;
85    transform: scale(1, 1);
86}
87.message-wrapper {
88    height: 1050px;
89    background-image: url(ダミーダミーダミー);
90    background-size: cover;
91    object-fit: cover;
92    display: flex;
93    justify-content: center;
94    padding-top: 90px;
95}
96.message-text {
97    color: black;
98    text-align: center;
99}
100.message-text h1 {
101    font-size: 26px;
102    letter-spacing: 5px;
103    font-weight: bold;
104    padding-bottom: 90px;
105}
106.message-text p {
107    font-size: 14px;
108    letter-spacing: 5px;
109    line-height: 2.5;
110    font-weight: normal;
111}
112.message-paddingTop {
113    padding-top: 40px;
114}
115.activity-wrapper {
116    height: auto;
117}
118ul,li {
119    margin:0;
120    padding:0;
121    list-style: none;
122}
123.heading {
124    padding: 90px 0;
125    text-align: center;
126}
127.heading h2{
128    letter-spacing: 5px;
129    font-size: 16px;
130    font-weight: normal;
131    line-height: 2.5;
132    border-top: 1px solid #000;
133    border-bottom: 1px solid #000;
134    display: inline-block;
135}
136.servicearea{
137    margin-top: 0px;
138}
139.servicearea .category + .category {
140    margin-top: 60px;
141}
142.servicearea .category{
143    background: #fff;
144}
145.rect-wrap {
146    width: 50% ;
147}
148.rect {
149    width : 100% ;
150    padding-top : 100% ;
151    background-color: #29d632;
152}
153.txt h3{
154    font-size: 20px;
155    font-weight: bold;
156    border-bottom: 1px solid #000;
157    line-height: 3.5;
158    letter-spacing: 5px;
159}
160.txt p{
161    font-size: 14px;
162    padding-top: 22px;
163    line-height: 1.8;
164    letter-spacing: 5px;
165}
166.servicearea .category {
167    display: flex;
168    align-items: center; 
169}
170.pic img {
171    height: 500px;
172    object-fit: cover;
173}
174.servicearea .category .pic {
175    width: 85%;
176}
177.txt {
178    width: 25%;
179}
180.servicearea .category .pic img {
181    width: 100%;   
182}
183ul li:nth-child(even) {
184    flex-direction: row-reverse;
185}
186ul li:nth-child(even) .txt {
187    padding-right: 0;
188    margin-right: -5%; 
189}
190ul li:nth-child(odd) .txt {
191    padding-left: 0;
192    margin-left: -5%; 
193}

Lhankor_Mhy

2020/11/06 04:11

「h3とpの下に」とのことですが、これはY軸上の「下」ですか？　それともZ軸上の「下」ですか？

user20

2020/11/06 04:25

Lhankor_Mhy様質問についてですが、 Z軸です。添付資料でimg01にかかる黄背景（この部分を白にしたいです）の正方形とテキスト文は、あくまでimg01を説明する文なので、img02にはかかりません。よろしくお願いします。

Lhankor_Mhy

2020/11/06 05:29 編集

すみません、ちょっとすぐに回答の時間がとれなさそうなので、お急ぎでしたら↓あたりをご参考にしてみてはいかがでしょうか。 https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

user20

2020/11/06 07:38

Lhankor_Mhy様参考サイトを添付していただき、誠にありがとうございます。参考サイトを見ながら作業を進めているのですが、うまくテキストの下に配置ができません。もしよろしければ、お手隙の時にコードを送っていただくことはできないでしょうか。

cerfweb

2020/11/12 08:57

つまりは、黄色で色付けをしている部分が本来は白で表示しようとしている部分で、これをh3とpのテキスト量に応じてサイズが変わるpadding: 5px;の正方形としたいということでしょうか。

user20

2020/11/12 23:47

cerfweb様ご連絡が遅くなり申し訳ございません。 cerfweb様のご質問のように作成したいです。ただ、サイズが変わる正方形にすることが難しい場合、固定サイズでの正方形の配置でもワイヤーフレームの形で、表示させたいです。よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

こういうことでしょうか？

ご提示いただいたコードを元にして、
デモサイトを作成しました。
https://ki-hi-ro.com/sample/rect/

ソースコードはこちらからダウンロードできます。
Git Hub

ZIPファイルを解凍してください。

以下のHTMLは、同じものが4つ繰り返されます。

HTML
1
2        <article class="category">
3          <div class="rect-wrap">
4              <div class="txt">
5                <h3>見出しが入ります</h3>
6                <p>
7                  テキストが入ります。テキストが入ります。テキストが入ります。
8                  テキストが入ります。テキストが入ります。テキストが入ります。
9                  テキストが入ります。テキストが入ります。テキストが入ります。
10                </p>
11              </div>
12          </div>
13
14          <div class="pic">
15            <img src="assets/img/tree-838667_1280.jpg">
16          </div>
17        </article>

共通部分のCSSです。

CSS
1/* 共通部分 */
2.servicearea {
3    margin-top: 0px;
4}
5.category {
6    background: #fff;
7    display: flex;
8    align-items: center;
9    justify-content: flex-end;
10}
11.pic {
12    width: 77%;
13}
14img {
15    width: 100%;
16    height: 500px;
17    object-fit: cover;
18}
19.rect-wrap {
20    width: 33%;
21    margin-right: -100px;
22    z-index: 1;
23}
24.txt {
25    padding: 1rem 2rem 2rem 2rem;
26    background-color: #fff;
27}
28h3 {
29    font-size: 20px;
30    font-weight: bold;
31    border-bottom: 1px solid #000;
32    line-height: 3.5;
33    letter-spacing: 5px;
34}
35p {
36    font-size: 14px;
37    padding-top: 22px;
38    line-height: 1.8;
39    letter-spacing: 5px;
40}

2個目以降は上の間隔を空けました。

CSS
1/* 最初以外の上の間隔を空ける */
2.category:not(:first-child) {
3    margin-top: 10rem;
4}

偶数番号は、左右の要素を反対にしました。

CSS
1/* 偶数番号 */
2.category:nth-child(2n) {
3    background: #fff;
4    display: flex;
5    align-items: center;
6    flex-direction: row-reverse;
7    justify-content: flex-start;
8}
9.category:nth-child(2n) .rect-wrap {
10    z-index: 1;
11    margin-left: -100px;
12}

投稿2020/11/23 09:08

khiro

総合スコア43

user20

2020/11/23 09:17

ご回答ありがとうございます。目的の形にすることが出来ました。

行動規範の内容に同意します

cssだけでは無理があるのではないかと。JavaScriptで対応する方法しか思いつきません。
.rect-wrap及び.rectは不要とします。

css
1.txt {
2   /* width: 25%; */
3   padding: 5px;
4   background-color: #fff;
5   height: auto;
6}
7

jQuery
1$(function() {
2    rect();
3    
4    $(window).on('resize', function() {
5	    rect();
6    });
7});
8
9function rect(){
10    $('.txt').each(function() {
11	    let $this = $(this),
12	    	w = $this.width(),
13	    	h = $this.height();
14	    
15	    while (w != h) {
16		    if (w > h) {
17			    w = w - (w - h) / 2;
18		    } else if (w < h) {
19			    w = w + (h - w) / 2;
20		    }
21		    
22		    $this.css('width', w);
23		    h = $this.height();
24	    }
25    });
26}
27

投稿2020/11/13 10:57

cerfweb

総合スコア1907

サイズ可変の正方形と言っても条件をどうするかによって変わってきます。

・ブラウザのサイズを1px小さくした場合、正方形も1px小さくなる
・ブラウザのサイズが600px以上の時は正方形の大きさが倍になる
などなど条件次第で様々なパターンが考えられます。

下記の例はブラウザのサイズが１０００px以上の場合は全てが1.5倍になる設定にしています。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .mainWrap {
10            width: 600px;
11            margin: 0 auto;
12        }
13
14        .mainArt {
15            height: 200px;
16            position: relative;
17            margin-bottom: 20px;
18        }
19
20        .img {
21            width: 480px;
22            height: 100%;
23            background-color: rgba(199, 160, 99);
24            position: absolute;
25            top: 0;
26            z-index: 0;
27            display: block;
28        }
29
30        .mainArt:nth-child(odd) .img,
31        .mainArt:nth-child(even) .mainArtInner {
32            right: 0
33        }
34
35        .mainArtInner {
36            width: 160px;
37            height: 160px;
38            background-color: rgb(217, 223, 0);
39            position: absolute;
40            z-index: 1;
41            top: 20px;
42        }
43
44        h3 {
45            text-align: center;
46            margin: 5px 0;
47            font-size: 18px;
48        }
49
50        .mainArtInner p {
51            width: 150px;
52            margin: 0 auto;
53            padding-left: 5px;
54            font-size: 16px;
55        }
56
57        @media screen and (min-width: 1000px) {
58            .mainWrap {
59                width: 900px;
60            }
61
62            .mainArt {
63                height: 300px;
64                margin-bottom: 30px;
65            }
66
67            .img {
68                width: 720px;
69            }
70
71            .mainArt:nth-child(odd) .img,
72            .mainArt:nth-child(even) .mainArtInner {
73                right: 0
74            }
75
76            .mainArtInner {
77                width: 240px;
78                height: 240px;
79                top: 30px;
80            }
81
82            h3 {
83                text-align: center;
84                margin: 7.5px 0;
85                font-size: 27px;
86            }
87
88            .mainArtInner p {
89                width: 225px;
90                padding-left: 7.5px;
91                font-size: 24px;
92            }
93
94        }
95    </style>
96</head>
97
98<body>
99    <div class="mainWrap">
100        <article class="mainArt">
101            <div class="mainArtInner">
102                <h3>見出し</h3>
103                <p>
104                    テキストテキストテキストテキストテキストテキストテキスト
105                </p>
106            </div>
107            <img class="img" src="#" alt="">
108        </article>
109        <article class="mainArt">
110            <div class="mainArtInner">
111                <h3>見出し</h3>
112                <p>
113                    テキストテキストテキストテキストテキストテキストテキスト
114                </p>
115            </div>
116            <img class="img" src="#" alt="">
117        </article>
118        <article class="mainArt">
119            <div class="mainArtInner">
120                <h3>見出し</h3>
121                <p>テキストテキストテキストテキストテキストテキストテキスト</p>
122            </div>
123            <img class="img" src="#" alt="">
124        </article>
125        <article class="mainArt">
126            <div class="mainArtInner">
127                <h3>見出し</h3>
128                <p>テキストテキストテキストテキストテキストテキストテキスト</p>
129            </div>
130            <img class="img" src="#" alt="">
131        </article>
132    </div>
133</body>
134
135</html>