Q&A
タイポだらけで、一部抜粋のコードを見せられても、症状を再現できません。
再現できるコードを提示するか、Codepenに書いているなら、そのURLを提示してください。
前提・実現したいこと
表題のようにしたいです。
画像のような完成図を作りたいと考えています。
しかし、現状は、下記の画像のように
leftとrightが逆さまになっています。
codepenを使用していますが、この現象はなぜでしょうか？
原因追及と解決策を教えていただけると幸いです。
発生している問題・エラーメッセージ
2枚目の画像は、leftがrightの上にある状況です。leftのせいで、rightが隠れてしまっています。
試したこと
こちらのYoutubeで使い方を調べ、動かしている最中に躓きました。
Youtube
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>grid</title> 8 <link rel="stylesheet" href="../BUFFALO/grid/grid.css"> 9</head> 10<body> 11 <div class="grid"> 12 <div class="left"> 13 <img src="https://drive.google.com/uc?export=view&id=1eL4ju9KLYsxoMi5mDcazAjeg0UMXER48" alt="温泉1"> 14 </div><!-- /.grid-left --> 15 16 <div class="right"> 17 18 <p class="ttl">貸し切り露天風呂「雲居の湯」</p><!-- /.ttl --> 19 <p class="desc1">弱酸性の湯質が優しく肌を包み込むような心地よさ <br> 20 最上階の露天風呂「雲居の湯」では、湯冷めしにくい食塩泉を <br> 21 熱海の町並みを遠方に望みながら・・・</p> 22 </div><!-- /.grid-right --> 23 </div><!-- /.grid --> 24</body> 25 26</html>
CSS
1.grid{ 2 width:100vw; 3 height:l00vh; 4 display: grid; 5 grid-template-rows: 300px 381px; 6 grid-template-columns: 525px 813px ; 7 8grid-template: 50px 216px 165px/ 367px 158px 655px ; */ 9grid-template-area: 10 "... .... .... .... " 11 "left right .... right" 12 "left right .... right"1fr 13 "left right right right" 14 /300px 15} */ 16 17.left{ 18 grid-area: left; 19 grid-column: 1 / 3; 20 grid-row: 1/3; 21/* width: 50%; */ 22 z-index: 999; 23 24} 25 26.right{ 27 grid-area: right; 28 background-image: url(https://drive.google.com/uc?export=view&id=1yeoSIYfSD7K39u8Kl6BqyhhXGO3URMDr); 29 background-position: center; 30 background-size: cover; 31 grid-column: 2 / 5; 32 grid-row: 2 / 4; 33 z-index: -1; 34 35}
ご教授お願い致します。
承知しました。
codepen URL添付します。
https://codepen.io/free_worker77/pen/dyVYwrm
何卒宜しくお願い致します。
そのcodepenでは再現できませんが。
画像URLもリンクエラーですし。
画像は下記のようなサイトでURLを生成すると他人でも見られます。
https://placehold.jp/
https://picsum.photos/
こちらが画像です。
温泉01↓
https://d.kuku.lu/83e8f506a
txt-bg-img↓
https://d.kuku.lu/0f7ed6224
ご教授お願い致します。
codepenでは、開けませんか？
私は上記のcodepenだと開けますが、、、
回答1件
0
ベストアンサー
上記の画像を使って、質問のコードを再現。
**タイポ **
height:l00vh;(1が小文字のエルになっている) → height:100vh;
grid-template-area: → grid-template-areas:
ただし、重ねるならこれは不要。
img要素のサイズを指定していないので、画像のオリジナルのサイズで表示されている。
とりあえず、上記を修正して、余白などを調整すると、下記のような感じ。
こまかいレイアウトは分からないので、そちらで調節してください。
追記
CSS3 - gridを使って画像とtextを逆さまにした状態で、txtの画像も大きくしたい。｜teratail
上記の質問の回答用サンプルを書いていたら、削除リクエストされたようで、投稿できないので、ここに置いておきます。
gridを使うよりflexでレイアウトしたほうがシンプルになるので、そちらで作成しました。
左右入れ替えはflex-direction: row-reverse;で、
画像とテキストブロックの重なりは、ネガティブマージンで、
それぞれ実装しました。
下記のサンプルでご確認ください。
サイズや余白、重なり具合は適当ですので、ご希望に合わせて調整してください。
投稿2021/12/05 09:06
編集2021/12/07 04:09総合スコア33795
あなたの回答
tips
プレビュー
