CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
CSS3のFlexBoxで実装する、知っておきたい5つのレイアウトテクニックまとめ
Flexbox は、もともとウェブサイトやモバイルアプリのUIをデザインするために最適化された CSS です。 Flexbox のさまざまなプロパティを利用することで、これまでは CSS のみで難しかったレイアウトや配置を実現できるようになりました。またスクリーンサイズに応じてレイアウトが変化する、レスポンシブデザインとの相性もよい点もポイントです。 この記事では、よくあるCSSによるレイアウトの問題5つを、Flexbox で解決できるテクニックを見ていきましょう。動作確認用のデモページと一緒に、実際にこれらのテクニックを適用した実践サンプル例もまとめています。 目次 対応ブラウザ環境は？ 高さの揃ったサイドバーを作成する方法 要素の表示順番を変更する方法。 どんな要素も天地中央揃えにする方法 レスポンシブに対応する、グリッドレイアウトを作成する方法 フッター要素を常に固定する方法 対応ブ
css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。
レスポンシブで大活躍のflexboxを使い倒す(後編) - Hatsuka
flexboxについての続編です。 flex-growやflex-shrinkの設定方法でちょっとつまったので、今回もサンプルをいくつか用意してみました。 flex-basis 基準となる幅を指定できます。 親要素に対して小さい値を設定すると隙間はできますが、大きい値を入れても突き破ることはないです。 2段などにさせたい場合はflex-wrap: wrap;を指定すればいいのですが、その場合2段目以降は100%より小さくても親要素にぴっちりなります。 See the Pen GJBJdM by matsui (@matsui) on CodePen. flex-grow フレックスアイテムがフレックスコンテナ内で、余裕がある場合どれだけ大きくなるかの割合を指定できます。 See the Pen aOjyKR by apct (@apct) on CodePen. flex-shrink フ
レスポンシブで大活躍のflexboxを使い倒す(前編) - Hatsuka
flexboxプロパティってとても便利ですよね。 便利だなーと思うのですが、毎回使い方を忘れて使うたびにググってます…。 いい加減覚えよう！といういましめエントリーです。 フレックスレイアウト 今までレイアウトには ブロックレイアウト インラインレイアウト テーブルレイアウト 配置レイアウト がありましたが、フレックスレイアウトという、新しいレイアウトモードが誕生しました。 近年、アプリやWEBページが複雑なレイアウトをする傾向から、CSS3で新しく誕生したレイアウトモードです。 どういうときに使うの？ 要素を左右上下と整列させたいとき 横並び要素の高さをそろえたいとき 要素を好きな順序に並び替えたいとき などなど、用途は様々です。 例えばこういう配置で高さを揃えたいときとか… sectionの後はh1を置きたいけど、上に画像がいるなーというときとか… See the Pen doejQa
最近増えてきたFlexboxベースのCSSフレームワークをご紹介 | MONOCHROME DESIGN｜東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作
最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。 Flexboxとは まずFlexboxとはなんなのか、正式名称は「CSS Flexible Box Layout Module」と言うもので、ざっくり言うと「今までより簡単にレイアウトが組めますよ！」って事です。 ざっくりしすぎなので補足すると、今までレイアウトを組むときは、テーブルを使ったり、CSSのfloatを使ったりして組んでいましたが、横並びにするとレイアウトが崩れる、縦の高さを揃えるのが難しい、上下中央揃えをしようとすると面倒・・・と手間がかかりました。javascriptを使わないと出来ない場合もありWEBのレイアウトは結構不自由だったのですが、Flexboxによってそれが改善されます。 Flexbox自体の使い方は
これが知りたかった！よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Patterns
Flexbox Froggy
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など