CSS
A more powerful CSS attr() function 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 attr()関数は、HTML属性の値を読み取り、それをCSSで使用できるようにする関数です。マークアップで定義された値…
Added to my CSS reset: interpolate-size, the quality-of-life feature we all wanted at some point 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSSで、固定幅から子要素によって設定される幅へ…
Tailwind CSS Basics for Beginners 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Tailwind CSS は、初心者から経験豊富な開発者まで、ウェブデザインを簡素化するユーティリティ優先の CSS フレーム…
The Different (and Modern) Ways to Toggle Content 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 コンテンツの切り替えとなると、JavaScriptを少し加えたdisplay: noneやopacity: 0を使用すること…
Decoding the fit-content() CSS Function 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 この記事では、CSS関数のfit-content()について詳しく見ていきます。これはCSSの新しい機能で、主にCSSのグリ…
What is a modal? And how to build a CSS-only Modal 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSSは基本的なスタイリングというつつましい始まりから、大きく進化してきました。擬似クラスの使…
Why Your CSS Grid Isn’t Working: Common Mistakes Unveiled 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに CSSグリッドは、Webレイアウトデザインの方法を革新しました。フロートや、さら…
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を置き去りにするほど十分に進化したの…
