Q&A
どの文字を重ねたいのでしょうか。
コメントアウトされている <h1>●○○○○●○○○○●○○○○</h1> でしょうか。
2カラムレイアウトで画像の上に文字を重ねるやり方がわかりません。
試してみたこと : 重ねるということで、position:relativeとabsoluteを
使用しましたが、flexboxを使っているので、レイアウトが崩れてしまいました。
使用エディタ ： Brackets1.14最新
※重ねたい文字はHTMLのコメントアウトにしてある
<main class="main"> <!--<h1>●○○○○●○○○○●○○○○</h1>-->となります。 補足としまして、赤枠で質問箇所を示したワイヤーフレームと 現行のコードを添付いたしました。お手数おかけしますが、ご回答いただけると幸いです。
よろしくお願いいたします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>●○○○○●○○○○●○○○○</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <div class="twocolumn-wrapper"> 10 <div class="container"> 11 <div class="wrapper"> 12 <nav class="side"> 13 <a href="#"><img class="logo-img" src="●○○○○●○○○○●○○○○"></a> 14 <a href="#"><img class="menu-img" src="●○○○○●○○○○●○○○○"></a> 15 <p>●○○○○●○○○○●○○○○</p> 16 <div class="border"></div> 17 <a href="#"><img class="menu-img" src="●○○○○●○○○○●○○○○"></a> 18 <p>●○○○○●○○○○●○○○○</p> 19 <div class="border"></div> 20 <a href="#"><img class="menu-img" src="●○○○○●○○○○●○○○○"></a> 21 <p>●○○○○●○○○○●○○○○</p> 22 <div class="border"></div> 23 <a href="#"><img class="menu-img" src="●○○○○●○○○○●○○○○"></a> 24 <p>●○○○○●○○○○●○○○○</p> 25 <div class="border"></div> 26 </nav> 27 <main class="main"> 28 <!--<h1>●○○○○●○○○○●○○○○</h1>--> 29 <img class="main-img" src="●○○○○●○○○○●○○○○"> 30 <div class="heading"> 31 <h2 class="heading-tokucho">｜ ●○○○○●○○○○●○○○○ ｜</h2> 32 </div> 33 <article class="archive"> 34 <!--<p>●○○○○●○○○○●○○○○</p>--> 35 <img src="●○○○○●○○○○●○○○○"> 36 <section> 37 <h3>●○○○○●○○○○●○○○○</h3> 38 <p>●○○○○●○○○○●○○○○</p> 39 <a>●○○○○●○○○○●○○○○</a> 40 </section> 41 <section> 42 <h3>●○○○○●○○○○●○○○○</h3> 43 <p>●○○○○●○○○○●○○○○</p> 44 <a>●○○○○●○○○○●○○○○</a> 45 </section> 46 <img src="●○○○○●○○○○●○○○○"> 47 </article> 48 </main> 49 </div> 50 </div> 51 </div> 52 </body> 53</html>
CSS
1body { 2 margin: 0; 3 font-family: "Hiragino Mincho ProN"; 4} 5a { 6 text-decoration: none; 7} 8.container { 9 width: 1170px; 10 margin: 0 auto; 11} 12.wrapper { 13 width: 100%; 14 display: flex; 15 justify-content: space-between; 16} 17.side { 18 width: 8%; 19 margin-right:5%; 20 position: sticky; 21 top: 0; 22 text-align: center; 23} 24.main { 25 width: 87%; 26} 27.logo-img { 28 width: 90px; 29 padding: 30px 0; 30 border-bottom: 1px solid #b4b4b4; 31} 32.menu-img { 33 width: 80%; 34 padding-top: 25px; 35} 36.side p { 37 margin-top: 0; 38 font-size: 16px; 39 letter-spacing: 4px; 40 font-weight: bold; 41 text-align: center; 42} 43.border { 44 border-bottom: 1px solid #b4b4b4; 45 padding-top: 10px; 46} 47.main-img { 48 height: 765px; 49 object-fit: cover; 50 width: 100%; 51} 52.heading-tokucho { 53 text-align: center; 54 font-size: 26px; 55 font-weight: bold; 56 padding-top: 80px; 57 letter-spacing: 5px; 58} 59.archive { 60 display: flex; 61 flex-wrap: wrap; 62 justify-content: space-between; 63 padding: 50px 100px; 64} 65.archive section { 66 width: 50%; 67 padding-bottom: 200px; 68 text-align: center; 69} 70.archive h3 { 71 font-size: 18px; 72 letter-spacing: 5px; 73 padding: 25px 0 15px 0; 74} 75.archive p { 76 color: dimgrey; 77 letter-spacing: 4px; 78 line-height: 30px; 79 font-size: 14px; 80 text-align: justify; 81 padding-bottom: 40px; 82} 83.archive a { 84 padding: 20px 130px; 85 background-color: #8CC63F; 86 font-size: 16px; 87 font-weight: bold; 88 color: white; 89 letter-spacing: 5px; 90} 91.archive img { 92 width: 300px; 93 height: 300px; 94 object-fit: cover; 95 padding-top: 50px; 96}
回答1件
0
ベストアンサー
<h1>●○○○○●○○○○●○○○○</h1> を画像に重ねる。
下記のCSSでどうでしょう。
css
1.main { 2 position: relative; /* これがabsoluteの基準位置になる */ 3} 4.main > h1{ 5 position: absolute; 6 top: 350px; /* お好みで調整してください */ 7 /* テキストをセンタリングする場合は下記追加 */ 8 width: 100%; 9 text-align: center; 10}
コメントより
添付画像内に青丸で「archiveクラスのimg」というのがあるのですが、
その上にHTMLのarchiveクラス内にコメントアウトで追記した
<p>●○○○○●○○○○●○○○○</p>の文字を置くやり方をご存知でしょうか。テキストと画像を重ねたいということは、両者は一体のものであるということなので、
HTMLもそのような構造にしましょう。下記のように両者を囲む親ブロックを追加します。
html
1 <div class="img-box"> 2 <p>●imgに重ねるテキスト○○○</p> 3 <img src="●○○○○●○○○○●○○○○"> 4 </div>
CSSは下記のようにすればいいでしょう。
css
1.img-box { 2 position: relative; 3} 4 5.img-box > p { 6 position: absolute; 7 top: 150px; 8 width: 100%; 9 text-align: center; 10}
投稿2020/08/18 07:31
編集2020/08/18 15:21総合スコア33790
ご回答いただき、誠にありがとうございます。
main-imgの上に文字を置くことができました。
一点、追加でご質問がございます。
添付画像内に青丸で「archiveクラスのimg」というのがあるのですが、
その上にHTMLのarchiveクラス内にコメントアウトで追記した
<p>●○○○○●○○○○●○○○○</p>の文字を置くやり方をご存知でしょうか。
position:relativeとabsoluteで重ねようと試みたのですが、
flexboxでのレイアウトが崩れ、うまくいきません。
基本的にflexboxを使用した際は、positionを使って物を重ねることはできないのでしょうか。
追加の質問となってしまい申し訳ございませんが、
よろしくお願いいたします。
hatena19 様
追記のご回答、ありがとうございました。
無事に表示させることができました。
ベストアンサーとさせていただきます。
あなたの回答
tips
プレビュー
