CSS

CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方

2022/09/29(Thu) 08:57

ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。

https://coliss.com/articles/build-websites/operation/css/what-is-the-top-layer.html

これでもう絶対迷わない！ CSSの疑似クラスと疑似要素、:と::の違い

2022/09/16(Fri) 08:51

CSSで疑似クラス、または疑似要素を使用する時に、:と::のどっちだっけ？ と迷ったことはありませんか？:beforeと::beforeのどっちだっけ？ :notと::notのどっち？ :と::のどっちが疑似クラスだっけ？
※CSS3では::beforeですが、CSS2では:beforeでした。たまに迷ってしまうことがある人に、CSSの疑似クラスと疑似要素、:と::の違いについて紹介します。

https://coliss.com/articles/build-websites/operation/css/difference-between-pseudo-classes-and-pseudo-elements.html

CSSで最後の要素にだけスタイルを適用させない、疑似クラス「:not()」と「:last-of-type」の組み合わせは便利

2022/09/14(Wed) 08:59

疑似クラスを使いなせるようになると、CSSはより楽しくなります。リストなど複数の兄弟要素を配置した時に、最後の要素にだけスタイルを適用しないようにするには、:not()と:last-of-typeを組み合わせると便利です。下記のように最後だけラインをつけないとか、marginやpaddingを変えるという時によく使用されるCSSのテクニックです。

https://coliss.com/articles/build-websites/operation/css/css-selectors-is-not-last-of-type.html

CSSの実装はこれでかなり進化する！ Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ

2022/09/09(Fri) 08:53

CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。

https://coliss.com/articles/build-websites/operation/css/howtouse-css-has-pseudo-selector.html

有名サイトで使用されているCSSテクニックまとめ

2022/09/09(Fri) 08:52

たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。

https://qiita.com/k__watanabe/items/70171a5095e714509af4

新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き

2022/09/08(Thu) 08:51

この記事では、ウェブ制作で積極的に活用したい最新CSSテクニックを、実例サンプルコードと一緒にご紹介します。新しいCSSプロパティにはじまり、これまではJavaScriptが必要だったデザインも、CSSのみで実現できるようになっています。普段からCSSを使いこなしているベテランデザイナーさんにこそオススメしたい、CSSの進化を感じるテクニックが揃います。

https://photoshopvip.net/137332

永遠にスクロールしていたくなる、気持ちいいエフェクト -Intersection Observer Scrolling Effects

2022/08/24(Wed) 08:54

Intersection Observerとカスタムプロパティを使用して、グリッドやリストのスクロールビューにアニメーションを適用するテクニックを紹介します。アニメーションはスクロールに連動して動作し、GridやListなどよく見かけるUIだけでなく、水平スクロールやジッパー・回転などもあります。どのスクロールエフェクトも軽快な動作で、ちょー気持ちいいです！

https://coliss.com/articles/build-websites/operation/work/intersection-observer-scrolling-effects.html

レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法

2022/08/22(Mon) 08:53

皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらなず仕方なくブレイクポイントを追加して対応したことはありませんか？僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。

https://itokoba.com/archives/4267

この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

2022/08/10(Wed) 08:52

モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。

https://coliss.com/articles/build-websites/operation/css/css-border-animations.html

CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」

2022/08/03(Wed) 09:06

今年になってもCSSの進化が止まりません、むしろ加速しています！IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ

https://coliss.com/articles/build-websites/operation/css/the-future-of-css-variable-units.html