一昔前のCSSと比較すると、ここ数年でCSSはかなり進化しました。calc()で数式が扱えるようになり、変数、条件分岐、ループ、論理演算なども使用できます。CSSでロジックをどう記述するのか、ブログラミング言語的な実装を紹介します。 Writing Logic in CSS by Daniel Schulz TwitterでCSSがプログラミング言語なのかと話題になっていました。その前から本記事の翻訳に取り組んでいたのですが、非常に興味深い記事でした。CSSは宣言型プログラミング言語ですが、JavaScriptのような命令型の要素も増えてきて、一昔前からかなり進化しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの制御構造 CSSの実装テクニック 終わりに はじめに CSSは、スタイルのシステムに特化
2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたモダンCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラースペースなど、これからのWebサイトやスマホアプリのUI制作に役立ちます。 What's new in CSS and UI: I/O 2023 Edition by Una Kravets, Bramus, Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに モダンCSSの新しいレスポンシブ モダンCSSの基礎機能の強化 カスタマイズ可能なコンポーネント CSSによるインタラクション 終わり
CSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。
これは朗報！ ついにCSSでif else文が使えるようになります、Chrome 137で新しく追加された7個のCSSの機能
Chrome 137で追加された、CSSの新しい機能7個を紹介します。 今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制御できる新しいプロパティもサポートされるなど、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New in Chrome 137 Chrome 137 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if else文の条件付きでCSSの値を設定できるif()関数 reading-flowとreading-order
CSSの:has()疑似クラスの便利な使い方を徹底解説
先日の記事で:has()疑似クラスがSafariでサポートされ、こんなことができるというのを紹介しましたが、さらに:has()疑似クラスを掘り下げ、Webサイトやアプリでの便利な使い方を紹介します。 :has()疑似クラスは、指定した要素がある場合にのみスタイルを適用できるCSSの新機能で、これからのWeb制作に活躍するかなり便利な機能です。こういう機能を待ち望んでいた人も多いと思います。 たとえば、カードに画像がある場合、ナビゲーションに子メニューがある場合、ラッパーがある場合など、複雑なCSSが必要だったものやJavaScriptが必要だったものが簡単でシンプルなCSSで実装できます。 CSS Parent Selector by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has
CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む
CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。 たとえば、下記の.a .b .cと.a :is (.b . c)は同じように見えるかもしれませんが、実は異なります。 Using :is() in complex selectors selects more than you might initially think by Bramus CSSの:is()疑似クラスやセレクタの読む順番について詳しくは、以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:wher
CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単です。 Style a parent element based on its number of children using CSS :has() by Bramus :has()について詳しく知りたい人は、以前の記事をご覧ください。 CSSの:has()疑似クラスの便利な使い方を徹底解説 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has()を使用して、子の数に基づいて親要素のスタイルを設定 :has()
2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。 新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。 CSS update Media Query 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 はじめに 「update」クエリの基礎知識 新しいメディアクエリ「update」を使用したデモ リソース はじめに CSSのメディアクエリは、Webサイトやアプリを表示されているデバイスに基づいて外観をコントロールできる強力なツールです。メディアクエリを使用すると、さまざまなスクリーンサイズや向きなどに対してレイアウトを最適化できます。 updateクエリは、デバイスのリフレッシュレートに適応することが
CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style
Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。
メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、matchMedia()の使い方を紹介します。 Working with JavaScript Media Queries by Marko Ilic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに matchMedia()の使い方 条件の変化を継続的にチェックする方法 昔ながらの方法 まとめ はじめに メディアクエリと言われて最初に思い浮かぶのは何ですか？ おそらく、下記のようなCSSでしょ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Note @when/@else アットルール 2024 年 6 月 22 日現在サポートされているブラウザはありません。実装状況については Can I use を参照してください。 CSS @when/@else アットルールは @media や @support のような条件付き規則をまとめて記述するためのルールです。例えばメディアクエリを使って画面サイズが 640px 以上の場合には要素を表示し、それ以外の場合には非表示にするようなスタイルを記述する場合、以下のように記述できます。 @when media (min-width: 600px) { .box { display: block; } } @else { .box { display: none; } } @when ルールには boolean を返す条件を記述し、条件が true の場合にブロック内のスタイルを適用します
CSSの進化が止まらない！ CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります
先週、CSSで関数を自分で定義できるカスタム関数が使えるようなる（紹介記事）ことをお伝えしましたが、続報として、なんとif()関数も使えるようになるそうです。すでにChrome Canaryではif()関数をCSSで使用できます。 CSSで使えるif()関数は、if()はもちろん、elseも使用でき、条件付きで値を選択できるようになります。 CSS @function + CSS if() = 🤯 by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラー値以外でも機能するlight-dark()関数 コンテナクエリを使用したカスタム関数 CSSでif()関数が使えるようなる 終わりに はじめに CSS Custom Functions are coming（翻訳記事）で紹介したように、CSSのカス
CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。 CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるようになります。 CSS変数（カスタムプロパティ）について詳しくは、下記をご覧ください。 CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説 HTMLは、buttonにclassとstyleを与えます。ポイントとなるのは、styleにインラインでCSS変数を設定することです。
コンテナークエリーは、要素の幅を条件にする機能だけでなく、CSS変数を条件にスタイルを適用する、コンテナースタイルクエリーという機能があります。活用することで、ひとつのクラスに異なるバリエーションのスタイルを定義できます。 前回の記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』では、コンテナークエリーの基本的な使い方を紹介しました。本記事では、コンテナースタイルクエリーの使い方を紹介します。 ※本記事のデモは、ChromeまたはEdgeでご覧ください。ブラウザのサポート状況は、後述する「対応ブラウザ」を参照ください。 コンテナースタイルクエリーの使い方 @containerの条件をstyle()関数で定義することで、コンテナースタイルクエリーを利用できます。関数の引数には、条件とするCSS変数と値を設定します。CSS変数は、親要素に定義された値を参照します。 また、前
CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has(*)ではなく、:has(+ *)にする必要がある
CSSの:has()がブラウザで使用できるかどうかを@supports selector()で検出するには、:has(*)ではなく、:has(+ *)が必要です。 これは2023年現在、:has()はFirefoxを除くすべての主要ブラウザでサポートされていますが、Firefoxで実験的な機能としてサポートされているためです。 CSS :has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*) by @Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの:has()を検出するには :has(*)を使用した場合の問題点 デモとコード 終わりに はじめに CSSの:has()を@supports
スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。 このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。 Feature detect Style Queries Support in CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スタイルクエリのサポートを確認するCSS このCSSの仕組み デモ Safari 18のバグを回避する方法 はじめに 先日、XでAdam Wathanが（カスタムプロパティの）スタイルクエリを確認する方法を尋ねていました。理論的には@supports at-rule()を使用す
Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能はデフォルトで、有効になっています。 Chrome 122 beta New in Chrome 122 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サポートされていない機能を含む@containerクエリは一致しない CSSの::backdrop擬似要素は初期値を継承します CSSの@importのsupport()条件をサポートします はじめに 2/21にリリースされたChrome 122で3つのCSSの新しい機能が追加されました。対象となるChrome 122は、Andro
こんにちは。エンジニアのつっちーです。 以前に、「メディアクエリの書き方に注意しないと、ウインドウ幅と表示倍率によっては、スタイルの適用されない状態が発生してしまう」という内容の記事を書きました。 今回はその続編です。前回の記事では、対策として以下の2点を挙げ、基本的には1の方法を利用すべきであるとまとめました。 メディアクエリの設定をmin-widthかmax-widthに統一する（推奨） メディアクエリの設定に小数を利用する（非推奨） でも、たまにこの方法では不便なケースにも遭遇します。そんなときに便利なnotというキーワードがあったことを、最近になって知りましたので、もう一つの解決策として取り上げてみます。 こんなとき、min-widthかmax-widthに統一するのは大変…… 上に書いたとおり、メディアクエリはmin-widthかmax-widthに統一したいものです。ブレイクポ
はじめに C#も2021年現在ではC# 10.0が登場し、古いC#とは比べ物にならないほど様々な機能が追加され、ますます便利になってきました。 その中でも個人的にイチオシの機能が「パターンマッチング」です。 この機能のおかげでめちゃくちゃ実装が捗るようになったので今回はこちらを紹介します。 また、パターンマッチングと直接の関係はありませんが、「タプル(ValueTuple)」という機能もC#にはあります。ValueTupleは自分で定義した型に対してパターンマッチングを利用する際に使うことがあるので、ついでにこちらも紹介します。 タプル（ValueTuple）（C# 7.0～） タプルとは「複数のデータを一時的に扱う」ときに生成されるオブジェクトです。 すごく簡単にいうと、使い捨て用途のクラス/構造体の定義を極限まで簡単にしたものです。 タプルという概念自体はC#6以前からも存在し、.NE
こんにちは！フリーランスエンジニアのせっち@nosecchi01です。 WordPressでWebサイトを作る際、CSSを特定のページのみ読み込ませたい場合があります。 今固定ページ以外にも、投稿ページ(single)、トップページ(front_page)などにも使えます。 それでは行ってみましょう！ head内で読み込ませる方法 <head> <?php if ( is_page() ): ?> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample.css"> <?php endif; ?> </head> この場合、固定ページ(is_page)ならば、sample.cssを読み込みなさいという事になります。 しかし、is_page();だと全ての固定ページに適用されてしまい
React 条件分岐によるComponent表示切り替え方法を理解する #4 - Masa engineer blog
Event HandlerとuseStateについて紹介していきます。ユーザーがボタンを押下する、何か画面に入力するなどの操作をトリガーとして、定義したイベントを実行する仕組みになります。useStateと組み合わせて使うことがあるため、一緒に紹介します。 本記事では、前回記事で使ったコードを元に変更・追加をしていきます。 条件分岐によるcomponent表示切り替え方法だけであれば、本記事内のコードだけで理解できるようにしています。 2.条件分岐による切り替え「Add New」ボタンのクリックにより、表示内容を切り替え、「Cancel」ボタンによって元の表示にする例を紹介します。 条件分岐による切り替え方法は、いくつかあります。 2.1 && を使うNewExpense.js import React, { useState } from 'react'; import ExpenseF
ReactのJSXとは ReactにおけるJSXとは、Reactの要素をHTMLと同じように記述することのできる拡張構文です。 JSXで記述するのは実際にはHTMLではなく、JavaScriptのコードに変換されるものになります。 // 下のコードを変換すると、 import React from 'react'; const Render = () => { return <div>Sample</div>; } // HTMLではなく、下のようなJavaScriptコードに変換される import React from 'react'; const Render = () => { return React.createElement('div', null, 'Sample'); } そのため、実はReactを使う上でJSXの記述は必ずしも必要ではないのですが、ほとんどの場合はその便
お問い合わせフォームで、選択した内容に応じて入力項目を表示させる条件分岐プラグイン「Conditional Fields for Contact Form 7」 – wordpressのカスタマイズなどWordPress情報ならWPLab
お問い合わせフォームで、選択した内容に応じて入力項目を表示させる条件分岐プラグイン「Conditional Fields for Contact Form 7」 お問い合わせフォームで、選択した内容に応じて入力項目を表示させる条件分岐プラグイン「Conditional Fields for Contact Form 7」のご紹介。 お問い合わせフォームで、選択した内容に応じて入力項目を表示させるプラグイン「Conditional Fields for Contact Form 7」のメリット お問い合わせフォームのプラグインContact Form 7をもっと活用するプラグインの1つとして、「Conditional Fields for Contact Form 7」というプラグインがあります。 このプラグインは以下のような状況の時に役に立つプラグインです。 実際のデモページはこちら 名前
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSは確実に進化している！ 変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック
これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる
CSSの新機能、メディアクエリの新しいクエリ「update」がChrome 113で使用できるようになりました
JavaScriptでのメディアクエリ、matchMedia()の使い方を解説
あなたがまだ知らないReactのテクニック10選 - Qiita
CSS で条件分岐を行う `@when/@else` ルール
CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック
CSSのコンテナースタイルクエリーstyle()の使い方 - ICS MEDIA
CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も
Web制作者は要チェック！ Chrome 122で新しく追加された3つのCSSの機能
「未満」を表現！メディアクエリの「not」キーワード | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
C#のアプデでめちゃくちゃ便利になったswitch文（パターンマッチング）の紹介 - Qiita
WordPressで特定のページのみCSSを読み込ませる方法3選【コピペ5分】
【React】JSXで条件分岐を記述する方法をまとめてみた