hiyoko_tomoko score 5
2020/03/01 21:36 投稿
| 画面全体を斜めで2分割し、左右それぞれにリンクを貼ることはhtml,cssで実現可能か |
| ### 前提・実現したいこと |
| htmlとcssで以下のような画面を構築したいのですが、htmlとcssのみで実現可能でしょうか。 |
|  |
| ・画面幅いっぱいで、左右のブロックはデバイスに合わせて伸び縮みする |
| ・ロゴとテキストはブロックの中央に配置 |
| ・ブロック全体にリンクを貼る |
| ### 発生している問題・エラーメッセージ |
| 現在、以下を試しているのですが、余白が生まれるor横並びが崩れてしまい、うまくいきません。 |
| ・divを2個transformで傾け、floatで横並び |
| ・さらに外側にdivを設け、overflow:hidden; |
| ↓ |
| ブロックのwidthを小さくすると余白が出てしまい、余白を潰すためブロックのwidthを大きくすると段落ちしてしまう |
|  |
| ### 該当のソースコード |
| ```html |
| <body> |
| <div class="screen"> |
| <h1><img src="./img/z_logo.png" alt="Z"></h1> |
| <div id="t"> |
| <a href="https://t.co.jp/" target="_blank"> |
| <div> |
| <h2><img src="./img/t_logo.png" alt=""></h2> |
| <hr> |
| <p>テキストテキストテキスト<br> |
| テキストテキストです<br> |
| テキストテキストテキストです</p> |
| </div> |
| </a> |
| </div> |
| <div id="e"> |
| <a href="" target="_blank"> |
| <div> |
| <h2><img src="./img/e_logo.png" alt="e"></h2> |
| <hr> |
| <p>テキストテキストテキスト<br> |
| テキストテキストです<br> |
| テキストテキストテキストです</p> |
| </div> |
| </a> |
| </div> |
| </div> |
| ``` |
| ```css |
| body{ |
| width: 100%; |
| position: relative; |
| } |
| h1{ |
| position: absolute; |
| top:40px; |
| left:50px; |
| z-index: 1; |
| } |
| div.screen{ |
| width:100vw; |
| height:100vh; |
| overflow: hidden; |
| } |
| div#t, |
| div#e{ |
| position: relative; |
| background:linear-gradient(#000, #333); |
| transform: rotate(20deg); |
| width: 637px; |
| height: 850px; |
| float:left; |
| } |
| div#t a div, |
| div#e a div{ |
| width: 225px; |
| height:175px; |
| position: absolute; |
| top:0; |
| right:0; |
| bottom:0; |
| left:0; |
| margin:auto; |
| } |
| div#t a, |
| div#e a{ |
| position: absolute; |
| display: block; |
| width: 100%; |
| height: 100%; |
| } |
| ``` |
| お知恵を貸してください＞＜ |
| 宜しくお願いいたします。 |
| 宜しくお願いいたします。 |
| ーーーーーーー |
| 追記： |
| hatena19様の方法で横並びにした後に、 |
| ロゴとテキストを中央に持ってくるために、 |
| div#eの中のdivのleft:0;を25%、div#tの中のdivのright:0;を25%に調整しました。 |
