CSS

CSSのみで画面の幅と高さのウィンドウサイズを取得する方法

2025/01/22(Wed) 08:59

画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。

https://black-flag.net/css/20250121-8237.html

意外？@propertyがCSSアニメーションを激変させる理由

2024/12/20(Fri) 08:53

メディアクエリとして知られる@mediaやCSSアニメーションで使われる@keyframesなど、CSSには@から始まるさまざまなルールがあります。その中にある@propertyというルールはご存知でしょうか？

https://ics.media/entry/241219/

2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ

2024/12/20(Fri) 08:52

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。

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

これがCSSだけで実装できるとはすごすぎる！ 窓から差し込む柔らかな日差しを実装 -sunlit

2024/12/19(Thu) 09:11

CSSのスゴ技を見つけたので、紹介します。画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエットの動きが実装されています。

https://coliss.com/articles/build-websites/operation/css/css-implementation-of-some-sunlight.html

CSSの「text-wrap」と「word-break」での改行位置の制御

2024/12/12(Thu) 08:53

Webページ上に文章を掲載する際、末尾の一文字だけ改行してしまったり、改行位置のバランスに困ることがよくあります。レスポンシブの場合だと、PC表示では違和感のない改行位置だったとしても、SP表示で表示幅が変わることでテキストのバランスがおかしくなるようなこともしばしばありますが、そんな文章の改行位置を調整できるCSSの「text-wrap」と「word-break」の2つのプロパティでどのように改行位置が変化するかサンプルをもとに紹介してみます。

https://black-flag.net/css/20241210-8217.html

CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる

2024/12/12(Thu) 08:51

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。

https://coliss.com/articles/build-websites/operation/css/viewport-resize-behavior-on-mobile-with-interactive-widget.html#google_vignette

Webページ内の任意の要素のCSSの調査と編集機能を使いやすいUIで提供するオープンソースのブラウザ拡張・「Inspect CSS」

2024/12/03(Tue) 09:20

Inspect CSSはWebページ内の任意の要素のCSSの調査と編集機能を使いやすいUIで提供するオープンソースのブラウザ拡張です。Vueで書かれており、MITライセンスの元でソースコードが公開されています。

https://kachibito.net/useful-resource/inspect-css

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

2024/11/22(Fri) 09:01

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。

https://coliss.com/articles/build-websites/operation/css/css-stretch-keyword.html

CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

2024/11/13(Wed) 08:57

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。

https://coliss.com/articles/build-websites/operation/work/ai-assistance-for-developer-tool.html#google_vignette

CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術

2024/11/08(Fri) 09:03

ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。

https://ics.media/entry/241105/