質問編集履歴

1 微修正の方法を追記

hiyoko_tomoko

hiyoko_tomoko score 5

2020/03/01 21:36  投稿

画面全体を斜めで2分割し、左右それぞれにリンクを貼ることはhtml,cssで実現可能か
### 前提・実現したいこと
htmlとcssで以下のような画面を構築したいのですが、htmlとcssのみで実現可能でしょうか。
![イメージ説明](7b7357f8cc98e97ce5bf73a92dc2f3f9.jpeg)
・画面幅いっぱいで、左右のブロックはデバイスに合わせて伸び縮みする
 ・ロゴとテキストはブロックの中央に配置
・ブロック全体にリンクを貼る
### 発生している問題・エラーメッセージ
現在、以下を試しているのですが、余白が生まれるor横並びが崩れてしまい、うまくいきません。
・divを2個transformで傾け、floatで横並び
・さらに外側にdivを設け、overflow:hidden;
          ↓
ブロックのwidthを小さくすると余白が出てしまい、余白を潰すためブロックのwidthを大きくすると段落ちしてしまう
![イメージ説明](2edb5e69d06f357f16e0561965216cec.jpeg)
### 該当のソースコード
```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%に調整しました。
  • CSS3

    5522 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    10475 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る