【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/04/15 138 users コリス ナビゲーションバー CSS レイアウト HTML

CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 ?- Build 5 Responsi... 続きを読む

Flexboxで実装する定番レイアウトのコードのまとめ | コリス

2021/04/01 99 users Flexbox コリス ブッダ コピペ レイアウト

Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使... 続きを読む

CSS Flexboxでヘッダを実装する最近のテクニックのまとめ | コリス

2020/09/24 204 users コリス Flexbox ヘッダ ナビゲーション テクニック

CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを... 続きを読む

Web制作の面倒な作業をラクにするCSS便利ツール59個まとめ - PhotoshopVIP

2020/07/07 368 users Grid PhotoshopVIP ニューモーフィズム 配色

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール59個をまとめています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問... 続きを読む

CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 | コリス

2019/12/23 178 users margin Flexbox コリス auto プロパティ

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（ma... 続きを読む

独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル | コリス

2019/12/05 255 users コリス 各プロパティ ステップ形式 構造 チュートリアル

CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思い... 続きを読む

かなり便利！VS CodeでCSSを書きながらFlexboxのチートシートを利用できる -CSS Flexbox Cheatsheet | コリス

2019/09/12 190 users Flexbox コリス CSS チートシート 一目

Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示... 続きを読む

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

2019/07/12 456 users Grid Flexbox チートシート レイアウト お好み

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

CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック | コリス

2019/01/31 141 users コリス Flexbox 利点 ネック レイアウト

CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで起きる厄介な問題が解決したようなので、紹介します。 The Flexbox Holy Albatross by Heydon Pickerin... 続きを読む

遊んでCSS Flexboxを覚える / Flexbox Froggy をやってみた - よしたく blog

2019/01/16 70 users Blog

tl;dr 内容 特徴 実際の画面 まとめ tl;dr Flexbox Froggy でFlexbox を楽しく学ぼう 内容 CSS触ってますか？？CSSって思っているとおりに動かなくて難しくないでしょうか？自分は全く使いこなせません。そして、何から学んだらいいかわからず途方に暮れていました。画面の 見た目 に関することですし、ゲーム感覚で動い... 続きを読む

備えておくと便利！CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin | コリス

2018/11/19 58 users Mixin Sass コリス グリッド レスポンシブ対応

CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。 CSS Flexboxの各プロパティがまとめられたSass Mixin CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin CSS Flexboxの各プロパティがまとめられたSass Mixin flexbo... 続きを読む

CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック | コリス

2018/08/23 68 users margin コリス auto ヘッダ 両端

CSS Flexboxも、margin: auto;も、よく使用していると思います。 しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。 CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するかを紹介します。ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つ... 続きを読む

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

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

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

CSS flexboxのレイアウトで困った時に使えるスタイルシートのテクニックまとめ | コリス

2017/06/06 119 users コリス clearfix Flexbox レイアウト 仕様

flexboxを使ってレイアウトを実装するのは、何年もの間floatやclearfixを使っていた人に新しい驚きと喜びを与えます。主要なブラウザすべてにサポートされ、採用するプロジェクトも増えてきました。 しかし、以前のテクニックはflexboxに通用しません。 flexboxの仕様に基づいた、レイアウトで困った時に使えるスタイルシートのテクニックを紹介します。 11 things I learn... 続きを読む

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

2017/03/30 1264 users チートシート Webクリエイターボックス Flexbox

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