CSS

デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

2022/11/04(Fri) 08:59

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。

https://coliss.com/articles/build-websites/operation/css/find-inactive-styles-in-devtool.html

CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css

2022/11/02(Wed) 09:19

詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。

https://coliss.com/articles/build-websites/operation/css/acab-reset-css.html

CSSの進化がすごい！ スタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用

2022/10/28(Fri) 08:56

Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。たとえば、下記は右のカードの親要素に特定のスタイルが設定されており、それに応じて子要素のスタイルが適用されています。

https://coliss.com/articles/build-websites/operation/css/basic-knowledge-of-css-style-queries.html

CSSの最新テクニック！ シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装

2022/10/26(Wed) 09:03

この実装は、完全に想定外の発想でした！スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScriptはなし、HTMLとCSSだけで簡単に実装できます。

https://coliss.com/articles/build-websites/operation/work/pop-up-api-off-canvas-menu.html

【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集

2022/10/17(Mon) 08:57

何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！

https://qiita.com/mhousetree/items/9a3265c0d6d6e903ed46

レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説

2022/10/14(Fri) 08:56

CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。

https://coliss.com/articles/build-websites/operation/css/use-cases-css-comparison-functions.html

朗報！ CSSの新しい単位（lvh, svh, dvh)がChromeに実装、100vhがビューポートの高さいっぱいにならない問題を解決

2022/10/05(Wed) 08:53

Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChrome 108で実装されます！CSSの新機能で、Chromeが一番最後というのは珍しいですね。最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュースです。

https://coliss.com/articles/build-websites/operation/css/large-small-dynamic-viewport-sizes.html

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