[B! css] siik02のブックマーク

x.com

siik02 2024/05/21

css

リンク

少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG

少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。ポストを別枠で表示するそのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。

siik02 2024/05/21

リンク

CSSのレイアウトで、ラッパーが異なるコンテンツのツラをcalc()関数のパディングで揃える

メインのヘッダは固定幅、記事のヘッダは流動幅、ラッパーが異なるコンテンツのツラを揃えるCSSのテクニックを紹介します。下記のようにヘッダのロゴと記事のタイトルを揃えたい時はありませんか？ CSSのcalc()関数を使用した動的なパディングを使用すると、簡単に実装できます。デスクトップの大きいスクリーン、スマホなどの小さいスクリーン、記事が長くてスクロールバーが表示される場合などにも対応しています。 Aligning Content In Different Wrappers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。固定幅と流動幅でツラを揃える動的なパディングを実装するテクニックスマホでのパディングの処理このCSSをどこにでも使用できるようにするスクロールバーで位置がずれる問題を

siik02 2022/03/24

css

リンク

CSSは確実に進化している！変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック

一昔前のCSSと比較すると、ここ数年でCSSはかなり進化しました。calc()で数式が扱えるようになり、変数、条件分岐、ループ、論理演算なども使用できます。CSSでロジックをどう記述するのか、ブログラミング言語的な実装を紹介します。 Writing Logic in CSS by Daniel Schulz TwitterでCSSがプログラミング言語なのかと話題になっていました。その前から本記事の翻訳に取り組んでいたのですが、非常に興味深い記事でした。CSSは宣言型プログラミング言語ですが、JavaScriptのような命令型の要素も増えてきて、一昔前からかなり進化しています。下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの制御構造 CSSの実装テクニック終わりにはじめに CSSは、スタイルのシステムに特化

siik02 2022/03/18

css

リンク

CSSの新機能カスケードレイヤーが主要ブラウザにサポートされます、最初に理解しておきたい基礎知識を解説

CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化（階層化）でき、これまでのCSSの実装方法が大きく変わるものです。 Chromeのデベロッパーによるカスケードレイヤーの基礎知識を紹介します。 Cascade layers are coming to your browser by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに準じて翻訳しています。はじめに CSSの詳細度とカスケード @layerの動作レイヤーの優先順位の管理インポートファイルの整理レイヤーとカスケードカスケードレイヤーの注意点カスケードレイヤーの参考リソースはじめにカスケードレイヤー（@layerC

siik02 2022/02/15

css

リンク

レンダリングを妨げるリソースの除外/CSSを非同期で読み込む

レンダリングを妨げるリソースの除外/CSSを非同期で読み込む PageSpeed Insights や Chrome の拡張機能 Lighthouse を使ってページをテストすると「レンダリングを妨げるリソースの除外」という項目が表示されることがあります。この項目が表示される原因の1つは CSS ファイルの読み込みなどのレンダリングブロックによる表示の遅延です。以下はレンダリングをブロックする CSS ファイルの読み込みを最適化してページの表示速度を改善させる方法と WordPress で CSS を非同期で読み込む方法の覚書です。レンダリングのブロック以下はあるサイトのページを PageSpeed Insights でテストした結果の一部抜粋です（同様のテストは Chrome の拡張機能 Lighthouse でも可能です）。「改善できる項目」が複数表示されていて、その中に「レ

siik02 2021/11/24

css

リンク

CSS in JSとしてVanilla-Extractを選んだ話と技術選定の記録の残し方

インクリメンタルに新しい技術を取り入れる方法 [/karte-blocks-incremental-development/]では、VueからReactへ段階的に移行していったという話を紹介していました。このReactの採用を決定してから大きな論点となったのは、ReactでCSS(スタイル)をどのように書くかについてです。 Reactのスタイリング方法には、デファクトと言えるものはありません。