CSS

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/

ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります

2024/11/01(Fri) 08:50

CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？
たとえば、下記のようにテキストの量によってサイズが異なるボタンです。これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたinterpolate-sizeプロパティやcalc-size()関数を使用すると、簡単にwidth: auto;へのアニメーションが実装できます。

https://coliss.com/articles/build-websites/operation/css/animate-to-height-auto-in-css.html

最近リリースされたCSSの新機能と新しい関数のまとめ

2024/10/17(Thu) 08:52

CSSは気がつくと、どんどん進化しています！先月リリースされたCSS Values and Units Module Level 5のワーキングドラフトでは新しい値と単位、プロパティ、関数が追加されました。それらの新機能と新しい関数を紹介します。

https://coliss.com/articles/build-websites/operation/css/new-values-and-functions-in-css.html

これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説

2024/10/11(Fri) 09:03

Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。

https://coliss.com/articles/build-websites/operation/css/css-hide-header-when-scrolling-down.html

コピペで使える! HTMLのチェックボックスを独自のデザインで実装する方法

2024/10/10(Thu) 08:57

チェックボックスは、HTML・CSSで独自にデザインすると手間のかかる要素です。ほとんどの場合は、<input type="checkbox" />を利用することになりますが、以下の課題があります。標準のinputタグはブラウザごとに見た目が異なり、利用できるCSSプロパティにばらつきがある。実装方法が複数存在し、どの方法が適しているか判断しにくい。チェックボックスには複数の状態が存在し、用意すべき見た目がわかりにくい。

https://ics.media/entry/241004/

HTML/CSSでできる、押したくなる最新Webボタンエフェクト集

2024/09/05(Thu) 09:01

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。

https://photoshopvip.net/160525