CSS

2024年の実装に役立つCSSの新機能と使い方のまとめ

by

https://coliss.com/articles/build-websites/operation/css/css-snippets-in-2024.html

2024年の実装に役立つCSSの新機能とその使い方を紹介します。セレクタを条件式のように記述できる:has()、複数のカード内でテキストを揃えられるsubgrid、CSS内でネストを使用できるCSSネスト、レスポンシブ対応のコンポーネントに役立つコンテナクエリ単位など、次のプロジェクトに役立つCSSがたくさんあります。

コリス
  • :has()疑似クラス（そのポテンシャルは親セレクタ以上）
  • subgridでカード内のテキストを簡単に揃えることができる
  • CSSでネストをする
  • 見出しテキストの折り返しのバランスをブラウザに任せる
  • コンテナクエリ単位

【第5弾】少しのコードで実装可能な10のCSS小技集

by

https://www.webcreatorbox.com/tech/css-tips-5

CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！

webクリエーターボックス

続きを読む

HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir

by

https://coliss.com/articles/build-websites/operation/css/image-hover-css-library-izmir.html

画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。

HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。

coliss

朗報！ CSS Flexboxの8年越しのバグがようやく修正されます

by

https://coliss.com/articles/build-websites/operation/css/css-flexbox-bug-fixed-flex-flow-column-wrap.html

CSS Flexboxのこのバグに悩んだ人もいると思います。
リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。

coliss

続きを読む

【css】font-size: 62.5%やrem指定について解説

by

https://yoncoichi.com/font-size-rem/

font-size: 62.5%。
この指定の意味が分からず、モヤモヤしている人もいると思います。
おそらく少数ですが。
そこでfont-size: 62.5%について、ややマニアック的に解説していきます。

しっかり理解して納得したい人は、ご覧ください。

ほぼほぼ４コいち

続きを読む