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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1206閲覧

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

user20

総合スコア31

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/06 02:42

解決したいこと : 画像とテキストを交互に配置しているのですが、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}

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

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

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

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

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

Lhankor_Mhy

2020/11/06 04:11

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

2020/11/06 04:25

Lhankor_Mhy様 質問についてですが、 Z軸です。 添付資料でimg01にかかる黄背景(この部分を白にしたいです)の正方形とテキスト文は、あくまでimg01を説明する文なので、img02にはかかりません。 よろしくお願いします。
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様のご質問のように作成したいです。 ただ、サイズが変わる正方形にすることが難しい場合、 固定サイズでの正方形の配置でもワイヤーフレームの形で、 表示させたいです。 よろしくお願いいたします。
guest

回答3

0

ベストアンサー

イメージ説明
こういうことでしょうか?

ご提示いただいたコードを元にして、
デモサイトを作成しました。
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

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

0

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

総合スコア1899

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

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

0

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

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

下記の例はブラウザのサイズが1000px以上の場合は全てが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>

投稿2020/11/06 12:33

編集2020/11/06 12:58
Jon_do

総合スコア1373

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問