タグ

Flexboxに関するicicaのブックマーク (3)

  • 最近増えてきたFlexboxベースのCSSフレームワークをご紹介 | MONOCHROME DESIGN|東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作

    最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。 Flexboxとは まずFlexboxとはなんなのか、正式名称は「CSS Flexible Box Layout Module」と言うもので、ざっくり言うと「今までより簡単にレイアウトが組めますよ!」って事です。 ざっくりしすぎなので補足すると、今までレイアウトを組むときは、テーブルを使ったり、CSSのfloatを使ったりして組んでいましたが、横並びにするとレイアウトが崩れる、縦の高さを揃えるのが難しい、上下中央揃えをしようとすると面倒・・・と手間がかかりました。javascriptを使わないと出来ない場合もありWEBのレイアウトは結構不自由だったのですが、Flexboxによってそれが改善されます。 Flexbox自体の使い方は

    最近増えてきたFlexboxベースのCSSフレームワークをご紹介 | MONOCHROME DESIGN|東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作
  • Flexboxで決まり! | Webクリエイターボックス

    2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います! ↑私が10年以上利用している会計ソフト! 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

    Flexboxで決まり! | Webクリエイターボックス
  • 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カラム。まずはこのレイア

    Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
  • 1