CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む
Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能
New in Chrome 119 Chrome 119 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 119で追加された4つの新しいCSSの機能 CSSの疑似クラス「:user-valid」「:user-invalid」 CSSの相対カラー構文(RCS) CSSのclip-pathで「geometry-box」値 CSSのclip-pathで「xywh()」と「rect()」値 Chrome 119で追加された4つの新しいCSSの機能 11/1にリリースされたChrome 119で4つの新しいCSSの機能が追加されました。対象となるChrome 119は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。 以下、その4つの新
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ
WordPress taxonomy アーカイブの判別方法 - by Takumi Hirashima
WordPress で タクソノミーアーカイブページの判別方法を紹介します。 is_tax() 関数を使用する is_tax() 関数を使用する is_tax() 関数は、現在表示しているページが taxonomy アーカイブページかどうかを判定する関数です。 引数には、taxonomy のスラッグを指定します。 たとえば、taxonomy のスラッグが category のカテゴリーアーカイブページかどうかを判定する場合は、次のようになります。 if ( is_tax( 'category' ) ) { // カテゴリーアーカイブページ } まとめ WordPress で タクソノミーアーカイブページの判別方法を紹介しました。
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える CSSのサブグリッド（subgrid）のサポートブラウザ デモページの解説 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ
先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。 今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。 Chrome 117 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @starting-styleルール overlayプロパティ transition-behaviorプロパティ CSS Gridのsubgrid値 text-wrap: pretty; contain
CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかも、CSSのみで表現できるスニペット多数で、コピペで利用できます。 今後のプロジェクトに魅力的なWebテクニックを活用してみましょう。 CSSで実装できる、最新HTMLテクニック・スニペットまとめ iPhone 15 Pro紹介ページのCTAボタン コンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。 See the Pen Apple Style CTA Reveal with CSS
CSSで実装できるのか！ iPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドを実装するテクニック
先週発表されたiPhone 15のWebページに、面白い仕掛けが実装されていました。Appleは新製品のページにはスクロール駆動のアニメーションを多数取り入れており、今回のはスクロール駆動のダイナミックアイランドです。 このスクロール駆動のダイナミックアイランドをCSSで実装するテクニックを紹介します。下記のアニメーションは少しゆっくりめにしています。 ダイナミックアイランド（Dynamic Island）とは、iPhone 14 Proで実装された機能で、カメラのパンチホール部分のスペースを利用して実行しているアプリのアクティビティを表示します。サイズはアプリごとに最適化されます。 参考: iPhone 14 ProのDynamic Islandの使い方 | Appleサポート で、今回のiPhone 15 Proのページにスクロール駆動のダイナミックアイランドが多数実装されています。コ
【React / useHooks】開発不要で使える便利なカスタムフックス20選
フロントエンドで処理をカスタムフックス化する際、windowの高さを取得するなど、どのプロジェクトでもある程度決まったコードがありますよね。 useHooksはそういったカスタムフックスのライブラリとなっています。カスタムフックは自前で作ってしまうことが多いものの部分的に任せられるかなと思い、useHooksに登録されている便利そうなカスタムフックスをピックアップしてみました。 useHooksを使うにあたって カスタムフックスは自前で用意する方がカスタマイズ性高く安心して使える 調べれば同じ機能を持つカスタムフックのコードが出てくるので必ずしもuseHooksを使う必要はない プロトタイプ開発とかで速度が求められるなら導入するのはありかも 最初からこういうのに慣れすぎると開発理解があやふやになるのではといった議論はありそう こういうカスタムフック置くと便利だなという確認にも良さそう 結論
横並びになったボタンを同じ幅で配置するCSS
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
HTMLのdialogタグでダイアログ（モーダル）を実装する方法｜BLACKFLAG
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます
イラストを描くときや写真のシャドウではハイライトが非常に重要ですが、CSSのシャドウでこの発想は抜けていました。 テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャドウになる実装テクニックを紹介します。 まずは、デモで実際のシャドウをご覧ください。 上部に2pxのハイライトを設定しています。 See the Pen highlight compliment to a text-shadow effect by coliss (@coliss) on CodePen. シャドウとハイライトのCSSは、下記の通りです。 カラーがoklch()で設定されていますが、hex値でも大丈夫です。ポイントは通常のシャドウと一緒にハイライト用のtext-shadowを上部に設定することです。 .highlighted-text-shadow { :r
CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
【第5弾】少しのコードで実装可能な10のCSS小技集
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
