毎日暑いですね…。
毎週言っている気がしますが、私はこの時期の空気感や花火などのイベントが大好きなので最高に幸せです。
今日は、去年からはやっている縦に2分割しているwebサイトのサンプルを作成してみました。一時期すごく流行って、結構取り入れてるサイト見かけました。
最近参加したプロポーザルの際に、社内の先輩にアドバイスされたのがこの縦に分割しているタイプのデザインで、私自身なんだか取り組んだことなかったなぁ~と思ったので、今回このブログで作成してみました。
すごくシンプルで簡単なものなので、もっと複雑にしたい方は、これから紹介するソースにいろいろオプションとして加えていってみてください。
以下ソースです。
See the Pen twocolumn by sayuri (@giraffeweb) on CodePen.0
スマートフォン表示のときはコンテンツが縦並びになるので、横並びにしたり、縦並びにしたりしやすいように
まず大きな<div class=”two_columnBox”>で囲っちゃいます。
あとはflexboxを使用して、さくっとできちゃいます。
結構簡単に説明してしまいましたが、ソース見てもらえば単純なので詳しい説明はいらないと思います。
ぜひみなさんもつくってみください。