Defending Against CSS-Based Attacks: Best Practices for Web Security 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 現代のウェブセキュリティ環境において、CSSやJavaScriptなどのフロントエンド…

Maximize Your Workflow with These SASS Mixins and Functions 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 同じCSSを何度も書いていたり、異なる画面サイズでデザインをレスポンシブにするのに苦…

How to animate CSS Grid layouts (image grid project) 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSSグリッドのプロパティの一部をアニメーション化できることが判明しました！今日は、ホバーエ…

Responsive design is easy with Fluid Tailwind Plugin. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Fluid Tailwind Pluginとは？ Fluid Tailwind Pluginは、Tailwind CSSで流動的なタイポグラフ…

Keeping Pixely Images Pixely (and Performant!) 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Marcが先週、今年の大きなプロモーションの一環として必要だった技術について言及した後、デザインの…

Grid Template Areas 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 この記事では、複雑なレイアウトを作成するためのgrid-template-areasプロパティの使用方法について説明します。このプロパティはC…

Absolute positioning with CSS grid 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 これは、CSSグリッドを使用して要素を重ね合わせることができるという、皆さんへの親切なお知らせです。この機能は…

On compliance vs readability: Generating text colors with CSS 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 私がデザインしたCSSの機能の中で、相対的な色（別名：相対的な色の構文、RCS）は間違…

Backgrounds for the Box Model (and why it can be useful) 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 先日、ある人からボックスモデルの異なる部分を可視化しようとしているという話を聞きまし…

Speeding Up Your Sass Compilation in Vite and Webpack 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Sassのコンパイルはビルドの速度低下の原因となることがありますが、もはやそうである必要はあ…

Why you should use CSS env() 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 共有のCSSとJavaScript値を最新の状態に保ち、同期させるのに苦労していますか？共有値を更新する際に、一見ランダムなバ…

Snappy Scroll with CSS Scroll Snap 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSS スクロールスナップは、スクロール可能な要素のスナップポイントを定義できるようにする新しい機能です。これ…

6 Best CSS Generator Tools That You Can Use in 2024 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 視覚的に魅力的でレスポンシブなウェブサイトを作成するには、CSSの確かな理解が不可欠です。し…

How to Lighten or Darken a Color with Pure CSS 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 色を明るくしたり暗くしたりすることは、UIデザインでよくある使用例です。ユーザーがボタンにホバー…

10+ Hamburger Menu Examples [CSS Only] 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 レスポンシブデザイン、モバイル、あるいはナビゲーション要素にもっと多くのコンテンツを収めたい場合、CSSレ…

6 practical uses of the CSS :has selector 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ開発の絶えず進化する領域において、CSSは私たちがウェブページをスタイリングする方法を簡素化する…

The New !important 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 とある人気のWordPressテーマで使用されているこんなCSSを見つけました： .wp-block-theme-button .button:not(.specificity):not(.…

Make some hacky noise with CSS gradients 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 偶然見つけたエフェクトで、かなりクールだと思いました。繰り返しの放射状グラデーションのリングのサイズ…

Get The Screen Width & Height Without JavaScript 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Javascriptを使わずCSSだけでスクリーンサイズを取得する方法です。 @propertyと三角関数を使用しま…

承知しました。HTMLタグをエスケープし、コード部分はそのまま保持した文章を作成します。以下がエスケープ処理を施した文章です: 6 practical uses of the CSS :has selector 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可…

Using @starting-style and transition-behavior for enter and exit stage effects 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 @starting-styleを使って遊んでいたら、transition-behaviorと組み…

Understanding new CSS at-rule @scope 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 テンプレートを作成する際、開発者は特異性と柔軟性のバランスを取るのに苦労することがよくあります。一方では…

Do You Still Need Sass? 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 2006年にSassがリリースされて以来、ネイティブCSSは長い道のりを歩んできました。Sassを置き去りにするほど十分に進化したの…

10+ Online CSS Pattern Generators For Background 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 背景画像で使えるパターンを生成するジェネレーターを10+1選ご紹介します。 生成したパターンは画像…

Fancy Hover Effect With Anchor Positioning 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSS Anchor Positioningを使用したCSSだけでできるナビゲーションのホバーエフェクトをご紹介します。 ア…

パンくずリストのデザインアイデアを45選ご紹介します。 Pure CSS3 breadcrumb navigation, pixel perfect Collection - Breadcrumbs - Сomponent - 4ID Simple "transform: skew" breadcrumb Pure CSS3 breadcrumb navigation Flat CSS3 Breadcrumb Refacto…

Master Consistent Styles with CSS currentColor: 3 Powerful Use Cases 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 currentColorを使ってCSSの色のスキームを一貫して維持するのに苦労していませ…

How should class naming be in HTML? — Clean Code. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 多くの開発者は開発フェーズでネーミングに多大な時間を費やすことがあります。実際、場合によって…

View Transition API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 View Transition APIは他ページへの遷移にアニメーション効果を適用するCSSです。 2024年秋に予定されているiOS18に搭載されるSafa…

Beyond CSS Media Queries 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 メディアクエリの問題点 メディアクエリの問題点 問題1: ビューポート中心主義 問題2: 管理が困難 問題3: それほどレスポンシ…