【webデザイン CSS】flexboxでスキュードブロック・レイアウト

【webデザイン CSS】flexboxでスキュードブロック・レイアウト

flexboxとtransformプロパティを使ってスキュードブロック・レイアウトを作ってみます。
直感的なデザインを考える時に有機的なラインとか斜めの線などを使ってデザインします。
グラフィック・デザインであれば自由に思いつくままデザインを構築することができますが、webデザインになるとブラウザとかOSとかデバイスとか様々な制約があり、どうしてもデザインに縛りが出てきます。
そんな中数少ないWebデザインのアクセントとしてスキュードブロックというデザインの手法があります。
要は斜めることなのですが通常のウェブサイトを見慣れている人は面白いと感じると思います。
画像などで斜めの表現は多いと思いますがCSSを使って情報量は損なわずにいつもと違った表現をしたいと思います。

See the Pen
Responsive skewed block layout by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.

transformプロパティを使う

まずはHTMLでカード型レイアウト同様<section>を一つのブロックとしてレイアウトしていきます。
transformプロパティを使ってラインを斜めにしていきますが、そのまま適用すると内容まで斜めのままになります。
内容は正体でラインは斜めにしたいと思いますので<section>の親要素の<div>を斜めのラインにして内容の<section>を正体にしたいと思います。
ついでにLPサイトという体でサイト内リンクをつけときます。
<a>のhref属性にID名を設定しておきます。
こうすることでサイト内でID名の場所に移動できるようになります。
それでは斜めを適用させていきます。
まず<main>の中の子要素<div>全体を斜めにします。

スキュードブロックを交互に斜めにするスロープライン型

複数ありますので交互に斜めを指定していきます。
地道に一つずつ設定するのもありですが奇数、偶数で指定します。
まず、上から数えて奇数の<div>です。
順番の指定の:nth-of-type()を使います。（）のなかに奇数の指定をします。
main > div:nth-of-type(odd)になります。
このoddが奇数の指定になります。
その奇数の<div>に５度の斜めを指定します。指定はtransform: skewY(5deg);になります。
transformプロパティでskewYを指定します。
これはY軸に沿って傾斜変形します。
水平線を上下に斜めにする場合はこの指定を行います。
()に角度を入力しますが単位を入れるのをお忘れなく。
単位はdegです。
続いて偶数の<div>をoddとは反対側に斜めにします。
main > div:nth-of-type(even)になります。
反対側なので-5度にします。
指定はtransform: skewY(-5deg);です。
これで<div>が偶数、奇数で交互に斜めになる設定ができました。
ですがこのままでは内容まで斜めになりますので<section>を同じtransformプロパティを使って逆の角度に指定して正体に戻します。
main > div:nth-of-type(odd) > sectionにtransform: skewY(-5deg);を指定して子要素だけ戻します。

一連の指定です。

main > div:nth-of-type(odd) {
  background-color: black;
  /*skew*/
  transform: skewY(5deg);
}
main > div:nth-of-type(odd) > section {
  /*skew*/
  transform: skewY(-5deg);
  /*flex*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main > div:nth-of-type(even) {
  background-color: crimson;
  /*skew*/
  transform: skewY(-5deg);
}
main > div:nth-of-type(even) > section {
  /*skew*/
  transform: skewY(5deg);
  /*flex*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

あと<section>は上下左右で中央に配置したいのでdisplay: flex;を指定して左右の中央の指定のjustify-content: center;と上下の中央の指定のalign-items: center;を指定します。
<div>の背景画像は:nth-of-typeを使って順番でそれぞれ指定します。
デバイスサイズでタイトルとメニューの表示を変えていきます。

スマホサイズ

nav ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
nav li{
  width: 50%;
}

でタイトルとメニューを縦で表示しメニューは２列で表示します。

タブレットサイズ

タブレットサイズではタイトルとメニューは縦並びですがメニューだけ横並びにします。

nav ul {
  flex-wrap: nowrap;
}
nav li{
  width: auto;
}

PCサイズ

<article>にdisplay: flex;を設定してタイトル、メニューを横一線に並べます。

article {
  display: flex;
  justify-content: space-between;
  align-items: center;
}