CSS

CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック

2023/11/17(Fri) 08:51

margin: auto;は非常に便利なCSSで、使用することも多いと思います。そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。

https://coliss.com/articles/build-websites/operation/css/all-about-margin-auto-in-css.html

CSSの記述はこれで大きく変わる！ セレクタの適用範囲を設定できる、CSS @scopeの基礎知識と使い方を解説

2023/11/10(Fri) 08:52

CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。

https://coliss.com/articles/build-websites/operation/css/css-scope-at-rule.html

CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる

2023/10/25(Wed) 08:56

CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/get-screen-size-and-font-size-with-just-css.html

たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！ CSSのサブグリッド（subgrid）の基礎知識と使い方

2023/10/13(Fri) 08:38

CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。

https://coliss.com/articles/build-websites/operation/css/about-css-subgrid.html

CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更

2023/10/11(Wed) 08:49

今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。

https://coliss.com/articles/build-websites/operation/css/auto-resizing-text-input-with-form-sizing.html

古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

2023/10/06(Fri) 08:36

モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！

https://coliss.com/articles/build-websites/operation/css/a-more-modern-css-reset.html

知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法

2023/10/04(Wed) 08:59

CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。

https://coliss.com/articles/build-websites/operation/css/solved-by-css-scroll-driven-animations-detect-if-can-scroll-or-not.html

CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack

2023/09/29(Fri) 08:58

当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。

https://coliss.com/articles/build-websites/operation/css/expert-css-the-cpu-hack.html

CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版

2023/09/21(Thu) 09:17

目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。

https://photoshopvip.net/151016

これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders

2023/09/15(Fri) 09:33

HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。

https://coliss.com/articles/build-websites/operation/css/collection-of-css-loading-animations.html