Chrome 116 デベロッパーツールの新機能が便利！ 正常に読み込まれなかったスタイルシートのデバッグが簡単に
先日リリースされたChrome 116 デベロッパーツールの新機能で、正常に読み込まれなかったスタイルシートを簡単にデバッグできるようにするための多くの改良が加えられました。 What's New in DevTools (Chrome 116) 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 正常に読み込まれなかったスタイルシートのデバッグ 正常に読み込まれなかったスタイルシートのデバッグ Chrome 116のデベロッパーツールでは、欠落しているスタイルシートの問題をより迅速に特定し、デバッグできるようにするために多くの改良を加えました。 「ソース」>「ページ」ツリーで、正常に読み込まれたスタイルシートのみが表示されるようになり、混乱が最小限に抑えられます。 「ソース」>「エディタ」で
HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。 Izmir Izmir -GitHub Izmirの特徴 Izmirの使い方 Izmirのカスタマイズ Izmirの特徴 Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。 MITライセンスで、商用プロジェクトでも無料で利用できます。 Izmir 主な特徴は、下記の通り。 エフェク
朗報！ CSS Flexboxの8年越しのバグがようやく修正されます
CSS Flexboxのこのバグに悩んだ人もいると思います。 リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。 左: バグ、右: 期待する表示 まずは、そのバグが確認できるデモをご覧ください。 すべてのアイテムはul内のliで実装されており、CSSでulにborder: 1px solid red;を設定しています。 しかし、ボーダーはリスト全体ではなく左端の1列のみに適用されます。このバグは現在、Chrome, Safari, Firefoxで確認できます。 参考: Issue 507397 ※上記ではEdge（non chromium version）は期待通りに表示されるとあり、Edge 115（chromium version）ではバグで表示されます。 See the Pen "flex-f
CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示
CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @font-faceの新しい構文のブラウザサポート @font-faceによる可変フォントの使用方法 tech()によるカラーフォントの使用方法 @supportsでも同等の機能が使用できる @font-faceの新しい構文のブラウザサポート CSSの@font-faceの新しい構文は、Safai 17（次のバージョンアップ）, Fir
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
CSSでここまでできるとは驚いた！ CSSを活用した本作りのワークフローを徹底解説した良書 -CSS組版Vivliostyle入門
CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は『CSSによる本作り』の解説書を紹介します。 原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。 表紙に「未知の表現力！」とあるように、CSSでこんなこともできるのかと驚きの連続でした。 本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。 マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。
Scroll-driven AnimationsでCSSでの実装が大きく変わる！ スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
CSSの美しいシャドウもこれなら簡単！ box-shadowを重ねた面倒なコードを簡単に生成できるツール -boxshadows.xyz
直感的なインターフェイスで、CSSのbox-shadowを使用した複雑で美しいシャドウを簡単に作成できるツールを紹介します。 シャドウはさまざまなパラメータで正確に調整でき、リアルタイムにシャドウの見た目とCSSのコードが生成されます。CSSの初心者でも経験豊富な人にとっても便利だと思います。 boxshadows.xyz boxshadows.xyzとは boxshadows.xyzの使い方 boxshadows.xyzとは boxshadows.xyzは直感的なインターフェイスで、レイヤー化された複雑なシャドウを正確に、そして簡単に作成できるオンラインツールです。シャドウのタイプ、シャドウのぼかしと広がり、オフセットの調整など、さまざまなパラメータを調整しながらリアルタイムにシャドウを確認しながら作成できます。
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。 Proportio Proportio -GitHub Proportioの特徴 Proportioの使い方 Proportioの特徴 Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン
HTMLメールの最近の実装方法を解説、tableは不要になりました
HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ
これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ
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のブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden
CSSのブランドモードは、知っているけどあまり使用したことがないという人もいると思います。そんなCSSのブレンドモードを使用して、さまざまな美しいデモでインタラクティブに学べるサイトを紹介します。 CSSのブレンドモードは、IEを除くデスクトップ・スマホのすべてのブラウザでサポートされています。 CSS Blend Modes Brad Woods' Digital Gardenは、Web上で作成するための設計図になることを目的としたサイトです。CSSをはじめ、HTMLやSVG、JavaScript、WebAPIなど、Webの実装に役立つさまざまなコンテンツが揃っています。 それらの中から最近リリースされた、CSSのブレンドモードを紹介します。ページのデザインも美しく、インタラクティブなデモがたくさんあるので、見ているだけでも楽しめます。 CSS Blend Modes まずは、CSSブレ
プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。 HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートしています。 Neat CSS Neat CSS -GitHub Neat CSSの特徴 Neat CSSの仕様 Neat CSSの使い方 Neat CSSの特徴 Neat CSSは、ミニマルなWebサイトを素早く構築するシンプルなCSSのフレームワークです。CSSは約2Kbの超軽量サイズ（未圧縮）、カスタマイズも簡単です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 Neat CSS Neat CSSの主な用途 ブログ ジャーナル テクニカルサイト ドキュメン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
便利なのが登場！ フロントエンドの開発に役立つ最新ツールがひとまとめに利用できる -HTML＆CSS Code Generator
CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります
