質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

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

Q&A

解決済

4回答

3169閲覧

画面全体を斜めで2分割し、左右それぞれにリンクを貼ることはhtml,cssで実現可能か

hiyoko_tomoko

総合スコア5

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2020/03/01 02:11

編集2020/03/01 12:36

前提・実現したいこと

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%に調整しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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}

動作確認用Codepenサンプル

div#t, div#eの横並びは、親要素にdisplay: flex;で実現しました。
斜め変形させると左右に余白ができますので、幅を広げてtranslateXで横移動させて余白を隠しました。

投稿2020/03/01 04:16

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiyoko_tomoko

2020/03/01 12:09

お忙しいところ、丁寧なご回答をいただきありがとうございます。 無事、余白なしで幅いっぱいの斜めブロックを横並びにできました!! 皆様勉強になりましたが、その中でも一番わかりやすかったのでベストアンサーとさせていただきます。 ありがとうございました!!
guest

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
hwatarig

総合スコア461

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiyoko_tomoko

2020/03/01 12:25

お忙しいところ、丁寧な回答をいただきありがとうございます。 段落ちしない方法の他にも、aタグの入れ方・クラスの付け方等、とても勉強になりました。 無事、余白なしで幅いっぱいの斜めブロックを横並びにできました!! 見やすいデモ画面も付けていただき、本当にありがとうございました!
guest

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

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oikashinoa

2020/03/01 04:44

> ・ブロック全体にリンクを貼る 背景の線に沿ってリンク先を分けているようでしたよ。それも実現できそうです?
kei344

2020/03/01 04:56

To: oikashinoaさん そこは読み落としていました。 a::beforeを回転させて被せたら全体を回すよりは影響が少ないと思います。
oikashinoa

2020/03/01 05:28

背景の区切りとキッチリ合わせるのは大変そうな気がしますが…一度考えてみます。
hiyoko_tomoko

2020/03/01 12:16

お忙しいところ、ご回答をいただきありがとうございます。 a::beforeを回転させる案、張っていただいたURLも参考にさせていただきます!
guest

0

http://www.htmq.com/html5/area.shtml

テキストはうまく重ねてください

投稿2020/03/01 02:57

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiyoko_tomoko

2020/03/01 12:13

お忙しいなか、コメントをいただきありがとうございます。 せっかくご指摘いただいたのにこちらの知識不足で理解が出来なかったのですが、 <a>の範囲を広げるのではなく、<area>を使った方が良いということでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問