【Web】Webサイト画面を半分割にする2017/04/25

Webサイトの画面を半分割にできる方法を「レスポンシブ対応!縦に半分割しているWebサイトの作り方」にて紹介されていまして、面白そうだなと思いご紹介いたします。

こういった縦分割のサイトが流行っているようです。

使用例、実装方法等の詳細等は参考サイトをご参照ください。

[参考サイト]:レスポンシブ対応!縦に半分割しているWebサイトの作り方(2017/01/17)

 

■ソース

【HTML】

<div class="wrapper">
<div class="column screen1">
<div class="info">
<h2>テキスト</h2>
<p>テキスト</p>
<a href="#">テキスト</a>
</div>
</div>
<div class="column screen2">
<div class="info">
<h2>テキスト</h2>
<p>テキスト</p>
<a href="#">テキスト</a>
</div>
</div>
</div>
【CSS】(スマホサイズ)
.column {
  height: 100vh;
  width: 100%;
}
.screen1{
  background: url(images/背景画像) no-repeattopcenter;
  background-size: cover;
}
.screen2{
  background: url(images/背景画像) no-repeatcentercenter;
  background-size: cover;
}
【CSS】(大きめサイズの縦半分割)
@media all and (min-width: 500px) {
.wrapper {
display: flex;
}
}