HTMLとCSSを使って左右で異なる高さのレイアウトを作る方法
こんにちは、Ayanoです。
先日制作したサイトの左右で高さが異なるレイアウト部分に対して、どうしたら良いか悩んだ末、リストを使ってコーディングしたら良い感じになりましたので備忘録にまとめます。
目次
左右で高さの違うレイアウトの例
先日コーディングした「Shiro」というサイトのセクション部分です。
【実際のデモサイトはこちら】
769px以上のウィンドウサイズであれば、リスト化された状態でレスポンシブ対応になっています。
768px以下だと横スクロール型になりますので、興味のある方はブラウザのサイズを変えたりデベロッパーツールで確認してみて下さいね！
この高さが異なるレイアウトを、最初はdisplay: flex で要素を折り返したりして、なんとかパソコン上の表示だけ…というところまではたどり着きました。でもウェブサイトを作るからにはやっぱりレスポンシブ対応は必須！！
アレコレ苦戦しましたが、最終的に左右それぞれをリスト化することで解決しました！
実際にコーディングしたサンプルがこちら
- 画像
タイトル
説明が入ります。
画像タイトル
説明が入ります。
- 画像
タイトル
説明が入ります。
画像タイトル
説明が入ります。
こんな感じで、右側だけ下がっています。
コーディングのポイント
1.リストの中にdiv要素を二つ作る。
2.リストを横並びに表示。
3.二つ目（右側）のリストの上側に余白をつくる。
サンプルを図にするとこんな感じになっています。
1.リストの中にdiv要素を二つ作る。
2.リストを横並びに表示。
3.二つ目（右側）のリストの上側に余白をつくる。
<ul class="sample">
<li>
<div class="ue"></div>
<div class="sita"></div>
</li>
/* 高さを変えるリストにクラスをつける */
<li class="migi">
<div class="ue"></div>
<div class="sita"></div>
</li>
</ul>わかりやすく、クラス名を”ue”と”sita”にしました。
1.リストの中にdiv要素を二つ作る。
2.リストを横並びに表示。
3.二つ目（右側）のリストの上側に余白をつくる。
.sample {
list-style: none;
/* リストを横並びにする */
display: flex;
}.sample は ul につけたclass名です。ul に対して、display: flex を指定します。
1.リストの中にdiv要素を二つ作る。
2.リストを横並びに表示。
3.二つ目（右側）のリストの上側に余白をつくる。
.migi {
/* 右側だけ上に余白をつける */
padding-top: 100px;
}サンプル全体のコード
以上のポイントを踏まえてのサンプル全体のコードはこちら。
<ul class="sample">
<li>
<div class="ue">
<div class="image one">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
<div class="sita">
<div class="image two">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
</li>
<li class="migi">
<div class="ue">
<div class="image three">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
<div class="sita">
<div class="image four">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
</li>
</ul>.sample {
padding: 0;
/* リストを横並びにする */
display: flex;
justify-content: space-between;
list-style: none;
background-color: #dcdcdc;
}
.sample li {
width: 50%;
margin: 50px 30px 0;
}
.migi {
/* 右側だけ上に余白をつける */
padding-top: 100px;
}
.ue,.sita {
margin-bottom: 80px;
padding-bottom: 30px;
background: #fff;
}
.ue h1,.sita h1 {
font-size: 24px;
}
.ue h1,.ue p,
.sita h1,.sita p {
padding: 10px;
}
.image {
text-align: center;
color: white;
font-size: 40px;
}
.image.one {
background-color: #dc143c;
height: 200px;
line-height: 200px;
}
.image.two {
background-color: #4169e1;
height: 300px;
line-height: 300px;
}
.image.three {
background-color: #228b22;
height: 300px;
line-height: 300px;
}
.image.four {
background-color: #333631;
height: 200px;
line-height: 200px;
}以上で左右の高さが異なるレイアウトが作れました！
レスポンシブも余白を調整するだけで簡単ですし、display: flex を解除したら縦並びにもできます。
リストを3つに増やしてみる
せっかくですから、アレンジしました。
リストを3つにするのも簡単にできちゃいます！
※この記事をスマホで見たらすごいｷﾞｭｯとなります。笑
レイアウトの例なのであえて3列のままです。
- 画像
タイトル
説明が入ります。
画像タイトル
説明が入ります。
- 画像
タイトル
説明が入ります。
画像タイトル
説明が入ります。
- 画像
タイトル
説明が入ります。
画像タイトル
説明が入ります。
HTMLはあまり変わりません。リストを増やすだけですね。
<ul class="sample2">
<li>
<div class="ue">
<div class="image one">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
<div class="sita">
<div class="image two">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
</li>
<li>
<div class="ue">
<div class="image three">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
<div class="sita">
<div class="image four">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
</li>
<li> /* 三つ目のリストを増やしました。*/
<div class="ue">
<div class="image five">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
<div class="sita">
<div class="image six">画像</div>
<h1>タイトル</h1>
<p>説明が入ります。</p>
</div>
</li>
</ul>サンプル2のCSSはSCSSで記述してまとめました。
また、最初のサンプルでは高さを変えるリストにクラス属性をつけてましたが、
「:nth-child(n)」を使ってHTMLも簡略的にしてます。
.sample2 {
padding: 0;
display: flex;
justify-content: space-between;
list-style: none;
li {
/* リストの幅は最大32%で指定できます。
（左右の余白なしなら33％）
33％より大きい数字だと自動的にulに対して3等分になります。*/
width: 33%;
margin: 50px 15px 0;
/* 二つ目のリストの高さを調節 */
&:nth-child(2) {
margin-top: 120px;
}
/* 三つ目のリストの高さを調節 */
&:nth-child(3) {
margin-top: 200px;
}
}
}
// 追加分イメージのレイアウト
.image.five {
background-color: #e9bc00;
height: 400px;
line-height: 400px;
}
.image.six {
background-color: #ed6d46;
height: 150px;
line-height: 150px;
}リストを増やしたり、リストの中の<div>要素を増やせば色々とカスタマイズできそうです。
増えすぎる場合はBootstrapのグリッドシステムを利用した方が良いかもしれませんが、HTMLとCSSの基本で作れるレイアウトは手軽で良いですね。