前提・実現したいこと
htmlとcssで以下のような画面を構築したいのですが、htmlとcssのみで実現可能でしょうか。
・画面幅いっぱいで、左右のブロックはデバイスに合わせて伸び縮みする
・ロゴとテキストはブロックの中央に配置
・ブロック全体にリンクを貼る
発生している問題・エラーメッセージ
現在、以下を試しているのですが、余白が生まれるor横並びが崩れてしまい、うまくいきません。
・divを2個transformで傾け、floatで横並び
・さらに外側にdivを設け、overflow:hidden;
↓
ブロックのwidthを小さくすると余白が出てしまい、余白を潰すためブロックのwidthを大きくすると段落ちしてしまう
該当のソースコード
html
1<body> 2<div class="screen"> 3 <h1><img src="./img/z_logo.png" alt="Z"></h1> 4 <div id="t"> 5 <a href="https://t.co.jp/" target="_blank"> 6 <div> 7 <h2><img src="./img/t_logo.png" alt=""></h2> 8 <hr> 9 <p>テキストテキストテキスト<br> 10 テキストテキストです<br> 11 テキストテキストテキストです</p> 12 </div> 13 </a> 14 </div> 15 <div id="e"> 16 <a href="" target="_blank"> 17 <div> 18 <h2><img src="./img/e_logo.png" alt="e"></h2> 19 <hr> 20 <p>テキストテキストテキスト<br> 21 テキストテキストです<br> 22 テキストテキストテキストです</p> 23 </div> 24 </a> 25 </div> 26</div> 27
css
1body{ 2 width: 100%; 3 position: relative; 4} 5h1{ 6 position: absolute; 7 top:40px; 8 left:50px; 9 z-index: 1; 10} 11div.screen{ 12 width:100vw; 13 height:100vh; 14 overflow: hidden; 15} 16div#t, 17div#e{ 18 position: relative; 19 background:linear-gradient(#000, #333); 20 transform: rotate(20deg); 21 width: 637px; 22 height: 850px; 23 float:left; 24} 25div#t a div, 26div#e a div{ 27 width: 225px; 28 height:175px; 29 position: absolute; 30 top:0; 31 right:0; 32 bottom:0; 33 left:0; 34 margin:auto; 35} 36div#t a, 37div#e a{ 38 position: absolute; 39 display: block; 40 width: 100%; 41 height: 100%; 42} 43
お知恵を貸してください><
宜しくお願いいたします。
ーーーーーーー
追記:
hatena19様の方法で横並びにした後に、
ロゴとテキストを中央に持ってくるために、
div#eの中のdivのleft:0;を25%、div#tの中のdivのright:0;を25%に調整しました。
![guest](/img/icon/icnUserSample.jpg)
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/01 12:09