レスポンシブ対応！縦に半分割しているWebサイトの作り方

2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 縦に半分割しているWebサイトを作ってみよう！ Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回

[kithzmky]

レスポンシブ

[kathew]

素敵

[sima-box]

レスポンシブ　縦に半分　コーディング

[kanariya0922]

“Studio Meta”

[nyangry]

[CSS]

[wordi]

今までwidthの100%、50%切り替えの小技が必要だったのが、flexの指定だけで済む

[stilo]

なるほど、こういう作りなんですね。bootstrapで手抜きして「.col-sm-12.col-md-6」してました...