CSS

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/21(Mon) 08:56

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました。次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。

https://zenn.dev/moneyforward/articles/css-nesting-without-sass

【CSS】1行のテキストを両端揃えする方法

2022/11/09(Wed) 08:54

1行のテキストを両端揃えしたいことってありますよね。たとえば以下のようなデザインに出会ったことはないでしょうか。「うどん」「そば」「ラーメン」のテキストが両端揃えになっています。

https://zenn.dev/yend724/articles/20221105-osx4fnh0l44mn3ii

今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ

2022/11/07(Mon) 08:55

HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。

https://photoshopvip.net/140529

デベロッパツールの新機能が便利！ その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