一昔前の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文を実現するには...記事の続きを読む
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でしょ
JavaScriptのモダンなコードとレガシーなコード、適切なコードを適切なブラウザに提供する方法を紹介します。特に、Edge, Safariあたりは注意が必要です。 Modern Script Loading by Jason Miller 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに どうすればよいか オプション 1: 動的にロードする オプション 2: userAgentを利用する オプション 3: 古いブラウザにペナルティを与える オプション 4: 条件付きバンドルを使用する どれを使用すればよいか？ 参考文献 はじめに 適切なコードを適切なブラウザに提供するのは難しい場合があります。この記事でそれを解決するいくつかの方法を紹介します。 モダンなコードをモダンブラウザに提供することはパフォーマンスが向上します
はじめに Reactは、UIを構築するための人気のあるJavaScriptライブラリです。 しかし、この強力なツールは、表面だけを見ているだけでは、その真の力を発揮することはありません。ここでは、あなたがまだ知らないかもしれないReactのテクニック10選を紹介します。 （本記事は初心者向けで作成してます。） 1. フラグメントを利用する React.Fragmentは、余分なノードをDOMに追加せずに、複数の要素をグループ化する素晴らしい方法です。
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
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
【保存版】WordPressの条件分岐まとめ【42選】
2023年10月15日管理画面にオリジナルの管理ページを実装いたしました。2023年10月14日テーマの変更に伴う不具合を修正いたしました。2023年10月13日ページネーションが動作しない不具合を修正いたしました。2023年10月12日既存サイトをWordPress化いたしました。2023年10月11日メタ情報の最適化を行いました。2023年10月10日グローバルメニューの位置を変更いたしました。2023年10月09日スライダーを実装いたしました。2023年10月08日埋め込まれた動画が正常に表示されるように修正いたしました。2023年10月07日WordPress、プラグイン、テーマ、PHPのバージョンアップを行いました。2023年10月06日レイアウトを修正いたしました。2023年10月05日無料ブログの記事をWordPressに移植いたしました。2023年10月05日前後記事へのリ
こんにちは。エンジニアのつっちーです。 以前に、「メディアクエリの書き方に注意しないと、ウインドウ幅と表示倍率によっては、スタイルの適用されない状態が発生してしまう」という内容の記事を書きました。 今回はその続編です。前回の記事では、対策として以下の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();だと全ての固定ページに適用されてしまい
WordPressのプライバシー設定で指定しているプライバシーポリシーページを判別する条件分岐「is_privacy_policy」
EUのGDPRへの対応を支援するために、WordPress4.9.6から管理画面に「プライバシー設定」という項目が追加されました。 参考：WordPress 4.9.6 プライバシー・メンテナンスリリース [設定] – [プライバシー]にアクセスすると、プライバシーポリシーページを設定することができます。 今回は、このプライバシー設定で指定されているプライバシーポリシーページをテーマ内で判別する方法をご紹介したいと思います。 WordPressのプライバシー設定で指定しているプライバシーポリシーページを判別する条件分岐 プライバシーポリシーページを判別するには、is_privacy_policy()を使います。いつの間にか条件分岐が追加されていたと思ったら、WordPress5.2で導入されたみたいです。 具体的には、以下のように条件分岐させることが可能です。 <?php if( is_p
このページでは、バッチファイルに頻出するifコマンドについて、詳細な解説を行っています。 ifコマンドには様々な使用形態があるので、久々にバッチを使うときや初めてバッチを使うときに戸惑うこともあるかと思います。 そんなときには、是非このページをご覧下さい。 目次 １．ifコマンドの基本 ２．ifコマンドの構文①～ == ～ ３．ifコマンドの構文②～ 比較演算 ～ ４．ifコマンドの構文③～ errorlevel ～ ５．ifコマンドの構文④～ exist ～ ６．ifコマンドの構文⑤～ defined ～ ７．ifコマンドの構文⑥～ cmdextversion ～ ８．ifコマンドの注意点・応用 １．==とequの違い ２．if文の入れ子には気を付けよう ９．まとめ 1.ifコマンドの基本 if文とは、「条件付き処理」を行うコマンドです。そのまんまですね。 下の文章をご覧ください。 これ
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」というプラグインがあります。 このプラグインは以下のような状況の時に役に立つプラグインです。 実際のデモページはこちら 名前
React のアプリで例えば編集モードの時にはフィールドで、そうでない時はテキストを表示するなど、条件によって表示を変えたい時など JSX 内で分岐をさせたい場合とか。 ふと思った。 JSXの中でif文使いたい場合って何がスタンダードなんだろう？ JSXの中で {(() => { if {...} else {...} }()} って即時関数にするんはなんか違和感あるし、function foo() { if {...} else {...} } を作っておいて <Foo /> で呼び出すとかなんかな？— 🌲🌲🌲 🌲🌲@芸カ18プ05 (@KiKiKi_KiKi) 2019年5月11日 JSX 内で直接 if 文は使えない JSX は { } 内で JavaScript が実行できるものだと思いこんでいたのですが、実行できるのは式 ( expression ) だけで、if や
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSは確実に進化している！ 変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック
これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる
CSSの新機能、メディアクエリの新しいクエリ「update」がChrome 113で使用できるようになりました
JavaScriptでのメディアクエリ、matchMedia()の使い方を解説
JavaScriptのモダンなコードとレガシーなコードを適切なブラウザに提供する方法
あなたがまだ知らないReactのテクニック10選 - Qiita
Web制作者は要チェック！ Chrome 122で新しく追加された3つのCSSの機能
「未満」を表現！メディアクエリの「not」キーワード | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
C#のアプデでめちゃくちゃ便利になったswitch文（パターンマッチング）の紹介 - Qiita
WordPressで特定のページのみCSSを読み込ませる方法3選【コピペ5分】
.bat（バッチファイル）のifコマンド解説。 - Qiita
【React】JSXで条件分岐を記述する方法をまとめてみた
React JSX の中で if で分岐させたい - かもメモ