日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

2017/03/30 1264 users チートシート CSS flexbox 日本語対応 レイアウト

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは 以前からFlexboxの使い方について紹介してきた のです... 続きを読む

これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス

2015/02/24 1232 users Fle ブラウザー 前々 モダンブラウザー CSSレイアウト

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFle... 続きを読む

CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA

2016/08/22 945 users float ICS MEDIA CSSレイアウト CSS 主流

ICS MEDIA Web制作 2016/08/22 CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 « Prev ボックス要素の横並びをCSSで行う場合、これまでは float プロパティを使うのが主流でした。しかし、 CSS3の新機能「Flexbox」を使うと float よりも簡潔なコードで、ボックスの豊富なレイアウトが可能です 。本記事では... 続きを読む

今こそ未来！CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG

2013/04/30 877 users 初耳 レスポンシブデザイン 昨今 デモ 株式会社LIG

こんにちは、王です、デザイナーやってます。 「これからの時代はFlexboxだ！」 ということで短い動画を用意しておきましたので、初耳の方、ざっと「Flexboxで何が出来るか？」が分かるかと思います。 動画の中で使ってたデモをこちらにアップしたので、実際に確認してみたい方ご自由に。 PC、タブレット、スマホ…デジタルデバイスサイズの多様化で、昨今ではレスポンシブデザインとやらが流行っています。同... 続きを読む

最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

2015/04/23 612 users コリス ヴィジュアル ドラフト 各プロパティ レイアウト

Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガ... 続きを読む

Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など | コリス

2016/11/15 556 users コリス セレクタ コーディング CSSアニメーション CSS

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークし ...記事の続きを読む 続きを読む

flexboxのバグに立ち向かう（flexbugsスクリーンショット集） - Qiita

2016/08/14 494 users Qiita スクショ パク レイアウト 作者

flexbox使ってますか？バグつらいですね。必死に組んだレイアウトがIE11で崩れる様を見て、膝から崩れ落ちたことは何度もあります。 Solved by Flexbox の作者でもある、philipwaltonさんの flexbugs という素晴らしいflexboxのバグまとめがあるんですが、いかんせん分量が多くて読むのが辛いです。 そこで、今回はflexbugsに上がっているバグのスクショを一... 続きを読む

上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA

2018/03/28 465 users ICS MEDIA 手軽 displ ベンダープレフィックス

CSSでblock要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSSのFlexboxを使う方法が現在では一番短いコード量で済みます。中央揃えしたい要素の親に対して たった3行記述するだけ です。最新ブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィックスなしで動作します。 ▼ CSS .container { displ... 続きを読む

これで分かった！CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP

2019/07/12 456 users Grid CSS flexbox チートシート レイアウト

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作... 続きを読む

Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ | コリス

2016/03/17 412 users コリス Bootstrap class グリッド レイアウト

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap ... 続きを読む

CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ

2021/11/18 385 users CSS メディアクエリ テクニック ブレークポイント Grid

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, ... 続きを読む

2020年、知っておくと便利なCSSのプロパティのまとめ | コリス

2020/07/21 369 users コリス プロパティ Edge CSS Chromiumベース

ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに... 続きを読む

これは期待！Visual Studio Codeでページやアプリなど、フロントエンドの実装が楽になる機能拡張 -Gimli | コリス

2019/04/22 368 users React angular vuejs コリス ブロン

Visual Studio Codeが、Webページやアプリのフロントエンド開発用ビジュアルツールになる機能拡張「Gimli」がリリース予定なので紹介します。 CSS GridやFlexboxの実装が単純化されるビジュアルツールで、React、VueJS、Angularなど、さまざまなフレームワークやライブラリもサポートされています。 Gimli Gimliはフロン... 続きを読む

これで完璧！CSS GridとFlexboxの違いと使い分け方、よく見かけるUIコンポーネントを実装するテクニックのまとめ | コリス

2020/06/25 351 users コリス フォールバック UIコンポーネント CSS Grid

CSS GridとFlexboxのどちらを使った方がよいか悩んだことはありませんか？ CSS GridとFlexboxの違い、使い分け方、CSS Gridの実装例、Flexboxの実装例、CSS GridとFlexboxを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下... 続きを読む

[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある | コリス

2017/11/16 327 users コリス float CSS 主流 CSS Grid

Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS... 続きを読む

知ってると便利なCSSのテクニックのまとめ -CSS Protips | コリス

2015/10/05 326 users コリス Chrom CSS ボーダー ナビゲーション

リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地左右の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。 下記のスタイルシートの対応ブラウザはChrom... 続きを読む

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

2018/09/28 311 users コリス CSS タスク 主流 CSS Grid

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さ... 続きを読む

デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

2022/11/02 310 users Flex デベロッパーツール display プロパティ 下記

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携... 続きを読む

最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ | コリス

2018/01/26 310 users コリス CSS 挫折 CSSレイアウト 主流

CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: ... 続きを読む

CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ | コリス

2016/12/21 302 users コリス CSS ナビゲーション アニメーション レイアウト

2016年も、CSSの進化がすごかったですね。 CSSを使ったアニメーション、レスポンシブ対応のレイアウトや配置が簡単にできるFlexbox、ナビゲーションやメニュー、パネルやカードなど、さまざまな素晴らしいアイデアを取 ...記事の続きを読む 続きを読む

保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

2018/08/10 289 users CSS CSS flexbox スニペット集 コード ヘッダ

ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up al... 続きを読む

Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス

2015/08/18 274 users WebKit ベンダープレフィックス 応用 CSS 前述

以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要で... 続きを読む

2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど | コリス

2020/12/07 271 users コリス ブレークポイント フレームワーク プロパティ CSS

CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。 レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザ... 続きを読む

CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS

2022/01/20 269 users 挙動 CSS レイアウト テクニック UIコンポーネント

WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問... 続きを読む

図で理解するFlexbox

2021/08/15 267 users justify align レイアウト 毎回 要素

Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央... 続きを読む