動画版：https://youtu.be/HtZjECM1M4I
渋谷という街は、かつてビットバレーと呼ばれ
IT企業の聖地とされてきました。
残念ながら、いまでは世界とだいぶ差をつけられていて
ビットバレー(笑) みたいなところはありますが
いまなお国内のIT企業がひしめきあう場所です。
そんな渋谷には、フロントエンドエンジニアなら見つけなければならない
フロントエンドの最新技術が散りばめられています。
第1問: フロントエンドを見つけなさい
| 1枚目 | 2枚目 | 3枚目 |
|---|---|---|
 |
 |
 |
お分かりいただけただろうか？
これは ブロークングリッドレイアウト というWebデザインです。
ブロークングリッドレイアウトとは？
綺麗に整えられたグリッドレイアウトをあえて崩すことによって
オリジナリティを演出するデザイン手法です。
2017年頃からWebデザインでも採用されるようになりました。
 |
 |
|---|---|
 |
 |
marginで実現しているサイトが多い
今回頭の片隅に入れておくべき情報としては2つあって
1つは、ブロークングリッドレイアウトを実装する場合はmarinをズラして実現しているサイトが多いこと。
やはり奇抜なデザインが来ると
position: absoluteとか使いたくなるのですが
まあ当然副作用もあるので、世の中のブロークングリッドレイアウトのサイトでは
結構marginで実現しているものが多い印象です。
|
|
|---|---|
 |
 |
参考：
display: gridで実現している猛者がいた
2つ目は、ブロークングリッドレイアウトを、わざわざgridレイアウトで実現している猛者がいました。
.grid1 {
display: grid;
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
grid-template-rows: 100px auto 15px auto auto;
}
出典：
- https://codepen.io/tutsplus/pen/oqpyBE
- https://webdesign.tutsplus.com/tutorials/create-a-broken-grid-layout-using-css-grid--cms-30870
gridレイアウトで実現できるなら、当然marginをズラすよりもシステマティックに実装できると思うので
今後ブロークングリッドレイアウトの実装があるときは、攻めの一手としてはアリかもしれません。
まとめ
このように、渋谷にはフロントエンドの最新技術が散りばめられているのですが
いきなりおかしなことすると、みんなビックリしてしまうかもしれないので
今回は1問のみとします。