floatでレイアウトを組んでいたことが懐かしいくらいに、Flexboxが主流となり、最近はボックスの間隔とかすごく楽に設定できるのでCSS Gridを使用する場面が増えました。 「Flexboxの時代も終わりかぁ…」なんて思ってしまいましたが、二つとも似て非になるものと言いますか、場面によってはCSS GridよりFlexboxで組むほうが正解！なんてこともあったので、ここでは「どういう時にCSS Grid（Flexbox）がいいの？」を解説していきたいと思います。 そもそもFlexbox Flexbox（Flexible Box Layout Module）は、Webページの要素を柔軟にレイアウトするためのCSSレイアウトモジュールです。従来のfloatやdisplay: tableなどのレイアウト方法と比較して、以下の点で優れています。 アイテムを横方向または縦方向に並べる アイテム

先月からXにCSSテクニックを定期的に投稿しているので、それのまとめです。 テキストの中央寄せだからといって text-align:center を指定したほうが良いかは考えたほうがいい ポストを別枠で表示する 和文をtext-align:centerで中央寄せすると複数行になった際に見栄えが悪くなるケースが多いです。 inline-size:fit-contentとmargin-inline:autoでセンタリングすることで、1行の場合は中央寄せ、複数行の場合は左寄せといった実装が可能となります。

CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。

はじめに Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。 ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！ モーダルを表示する まず、モーダルの表示をCSSだけで実現します。 基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。 checkboxを使う場合 checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。 紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。 See the Pen CSSModa

はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor（CSS:カスケーディングスタイルシート） 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 currentColorの利点は、色の変更が親要素のcolorプロパティによって自動的に反映されるため、親要素のテキスト色を変更するとcurrentColorを使用している要素の色も新しい色に変更されることです。 使用例 .parent { color: red; border: 1px solid currentColor; /* テキストの色と同じ色（red） */ .child { color: currentColor; /* 親のテキストの色と同じ

CSS で条件分岐を行う `@when/@else` ルール 2024.06.22 `@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイルが、`false` の場合には `@else` ブロック内のスタイルが適用されます。このルールを使うことでより簡潔なコードを書くことができます。

コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。 コンテナークエリーを利用することで、再利用性の高いパーツを実装できます。とくに、カラム数が多いレイアウトや複雑な横並びの要素において、コンテナークエリーは有効な機能です。 この記事では、簡単な作例と使用上の注意点を紹介します。 コンテナークエリーの使い方 作例の紹介の前に、コンテナークエリーの使い方を簡単に説明します。 コンテナークエリーを使用するためには、使用したい親の要素にcontainer-typeプロパティを設定する必要があります。以下の2通りの指定ができます。 con

23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。 実際の動作は、デモページでご覧ください。 See the Pen Gradient Overlay with border-image by coliss (@coliss) on CodePen. HTMLはシンプルです。 テキストのh1要素と背景を設定したdiv要素があるだけです。

SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。 HTML でロゴやアイコンを表示する時、SVG はよく使われるフォーマットです。SVG はベクター形式で記述されるため、拡大・縮小しても画質が劣化しないという特徴があります。SVG を HTML で表示する場合、以下のような方法が使われていました。 <img> 要素の src 属性に SVG ファイルのパスを指定する <svg> 要素を直接記述する svg スプライトを使用する それぞれの方法にはメリット・デメリットが存在

簡単にCSSアニメーションのコードを生成できるAIツールが登場しました。テキストや音声でプロンプトを入力するだけで、複雑なCSSアニメーションでも数秒でコードが生成されます。 生成されたCSSアニメーションはその場ですぐ...記事の続きを読む

フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ

CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較...記事の続きを読む

シンプルなHTMLを使用して、レスポンシブ対応、ライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリを紹介します。 シンプルなWebページやポートフォリオ、プロトタイプなどをすばやく作成したい時に便利で、ベースにしてリセットCSSの拡張版としても利用できます。 matcha.css matcha.css -GitHub matcha.cssの特徴 matcha.cssの使い方 matcha.cssのデモ matcha.cssの特徴 matcha.cssは、classレスでHTMLのあらゆる要素にシンプルで読みやすいスタイルを設定するように設計されたCSSライブラリです。ライト・ダークモード対応で、テキストはユーザー設定が尊重された適切なスペースで配置され、ナビゲーションやフォームなども非常に見栄えがします。 matcha.css HTMLで作成された静的ペ

ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下

CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen

CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。 このCSSの詳細度について、よくある誤解を紹介します。 Misconceptions about CSS Specificity by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 詳細度の誤解 1: 詳細度は10進数である 詳細度の誤解 2: style属性で詳細度が高くなる 詳細度の誤解 3:!importantで詳細度が高くなる 終わりに はじめに CSSの詳細度（Specificity）、ひいてはカスケード（Cascade）に関する記事が公開される度に、私はと