Q&A
お忙しいところ、丁寧な回答をいただきありがとうございます。
段落ちしない方法の他にも、aタグの入れ方・クラスの付け方等、とても勉強になりました。
無事、余白なしで幅いっぱいの斜めブロックを横並びにできました！！
見やすいデモ画面も付けていただき、本当にありがとうございました！
前提・実現したいこと
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%に調整しました。
回答4件
0
ベストアンサー
いろいろ方法があると思いますが、
transform: rotate で回転させると余白が上下左右にできるのでそれを埋めるのが面倒なので、
transform: skewで斜め変形させる方法で考えてみました。
参考リンク
SVGやclip-pathは必要なし！平行四辺形のクリッピングマスクをかけてアニメーションさせてみよう
css
1* { 2 margin: 0; 3 padding: 0; 4} 5body{ 6 width: 100%; 7 position: relative; 8} 9h1{ 10 position: absolute; 11 top:40px; 12 left:50px; 13 z-index: 1; 14} 15div.screen{ 16 width:100vw; 17 height:100vh; 18 overflow: hidden; 19 display: flex; 20} 21div#t, 22div#e { 23 position: relative; 24 background:linear-gradient(to left, #000, #333); 25 transform: skew(-20deg) translateX(-25%); 26 height: 850px; 27 flex: 0 0 65%; 28} 29div#t a div, 30div#e a div{ 31 width: 225px; 32 height:175px; 33 position: absolute; 34 top:0; 35 right:0; 36 bottom:0; 37 left:0; 38 margin:auto; 39 transform: skew(20deg); 40} 41div#t a, 42div#e a{ 43 position: absolute; 44 display: block; 45 width: 100%; 46 height: 100%; 47}
div#t, div#eの横並びは、親要素にdisplay: flex;で実現しました。
斜め変形させると左右に余白ができますので、幅を広げてtranslateXで横移動させて余白を隠しました。
投稿2020/03/01 04:16
総合スコア34075
0
divを2個transformで傾け、floatで横並び
作りたいイメージからするとtransform:rotate()ではなく、transform:skew()を使った方が適していると思います。
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/skew
ブロック全体にリンクを貼る
html5で作っているなら、ブロック全体を囲むようにaタグを入れるのが楽です。
ブロックのwidthを小さくすると余白が出てしまい、余白を潰すためブロックのwidthを大きくすると段落ちしてしまう
ブロック2つを囲むdivをもう一つ設けて、段落ちしない幅を設定して、はみ出た分左にずらすと良いかと思います。
このように
css
1.wrapper { 2 width: 100vw; 3 overflow: hidden; 4} 5.inner { 6 width: 120vw; 7 margin-left: -10vw; 8} 9.block { 10 width: 60vw; 11}
一通り作ってみました。ご参考までに。
https://codepen.io/w1103h/pen/mdJwRPa
投稿2020/03/01 05:16
編集2020/03/01 05:22
総合スコア461
0
背景をlinear-gradientで書いてしまえばよいとおもいます。
【linear-gradient() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient
【【CSS】背景（background）を2色にする | 125naroom / デザインするところ（会社）です。】
https://125naroom.com/web/2838
投稿2020/03/01 04:17
総合スコア69606
> ・ブロック全体にリンクを貼る
背景の線に沿ってリンク先を分けているようでしたよ。それも実現できそうです？
To: oikashinoaさん
そこは読み落としていました。
a::beforeを回転させて被せたら全体を回すよりは影響が少ないと思います。
背景の区切りとキッチリ合わせるのは大変そうな気がしますが…一度考えてみます。
お忙しいところ、ご回答をいただきありがとうございます。
a::beforeを回転させる案、張っていただいたURLも参考にさせていただきます！
0
http://www.htmq.com/html5/area.shtml
テキストはうまく重ねてください
投稿2020/03/01 02:57
退会済みユーザー
総合スコア0
お忙しいなか、コメントをいただきありがとうございます。
せっかくご指摘いただいたのにこちらの知識不足で理解が出来なかったのですが、
<a>の範囲を広げるのではなく、<area>を使った方が良いということでしょうか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/01 12:09