2024年のCSSの書き方、ワークフローとツールについて

2024/01/18 207 users ワークフロー CSS subgrid ブラウ Has

CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウ... 続きを読む

Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3

2023/03/16 195 users ひとまとめ デコード CSS diff Grid

HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無... 続きを読む

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

2023/01/19 165 users CSS SVG フォントサイズ Web制作 可変

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニ... 続きを読む

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

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

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

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

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

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

この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック

2021/11/30 211 users ブッダ Calc CSS 成り行き ラッパー

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer T... 続きを読む

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

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

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

図で理解するFlexbox

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

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

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

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

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

まとまったCSSを別のコンポーネントに分けないでほしい話 - uhyo/blog

2020/10/15 139 users React uhyo コンポーネント CSS スタイリング

この記事は、ReactでCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コンポーネントにまたがって修正が必要になるのを防ぐという意味もあります。 Flexboxの例関連した... 続きを読む

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

2020/09/24 204 users コリス ヘッダ ナビゲーション CSS flexbox 配置

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

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

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

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

これで完璧！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 Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 | コリス

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

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

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

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

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

CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout | コリス

2019/09/05 242 users コリス コンテキスト Media コンポーネント CSS

CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイス... 続きを読む

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

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

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

これは期待！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 Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック | コリス

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

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

Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid | コリス

2019/01/16 166 users コリス グリッド Vue.js 動的コンテンツ 一定

カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。 動的コンテンツはもちろん、... 続きを読む

[CSS]知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法 | コリス

2019/01/10 240 users コリス padding-bottom margin-top

現在のところ、margin-top, padding-bottomのように物理プロパティをボックスモデルで使用していると思います。しばらくはそのままで問題ないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会が増えるでしょう。 CSSの論理プロパティにおける考え方、注意点、そして英語や日本語など言語で変化する... 続きを読む

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

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

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

CSS GridとFlexboxでの実装で役立つ！各プロパティの役割が、ぱっと見てすぐ分かる簡単便利なチートシート | コリス

2018/09/10 185 users コリス CSS チートシート CSS Grid レイアウト

CSS GridとFlexboxの各プロパティに値を指定した際、それぞれがどのようになるかまとめられた簡単便利なチートシートを紹介します。レイアウトとコードがまとめられたシンプルなチートシートで、あれ何だっけ？ という時用にブックマークしておくと便利です。 まずは、CSS Flexbox用のチートシートから。 CSSのプロパテ... 続きを読む

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

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

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

2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査 | コリス

2018/05/15 107 users コリス デベロッパー npm Webpack CSS

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどの... 続きを読む