互い違いレイアウトの組み方〜レスポンシブ編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ はっちゃんです。 今回はコーディングであるあるの「互い違いレイアウト」の組み方をご紹介します。 レスポンシブ対応で、SP表示時には縦並びになるようにします。 要件 PC表示 ブラウザ幅が769px以上だったらPCレイアウト表示 互い違い SP表示 ブラウザ幅が769px未満だったらSPレイアウト表示 均一に縦並び flex-directionで並びを入れ替える それでは早速組んでいきましょう。 互い違いには、Flexboxのflex-directionを使用します。 See the Pen Alternate Layout1 by k_hatsushi (@hatsushi_kazuya) on CodePen. メディアクエリでSP時にはFlexboxを解除 Flexboxを解除するだけで、DOMを書いた順に縦に積み上がっていきます。 See the Pen Alterna
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
