サイト構築 -CSS

知っておくと便利なCSSのセレクタ! :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる

Post on:2022年11月29日

CSSはどんどん便利になってますね! :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下

...記事の続きを読む

CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか

Post on:2022年11月24日

UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく

...記事の続きを読む

11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります

Post on:2022年11月15日

11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作

...記事の続きを読む

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

Post on:2022年11月2日

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: f

...記事の続きを読む

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

Post on:2022年11月1日

詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと

...記事の続きを読む

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

Post on:2022年10月27日

Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素(コンテナ)のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイル

...記事の続きを読む

Webページの見栄えをよくするたった58バイトのCSS

Post on:2022年10月20日

ほとんどのWebページの見栄えをよくするたった58バイトのCSSを紹介します。 3つのプロパティだけですが、Webページを実装する時の最初のスタイルとして用意しておくとよいかもしれません。 また、ボーナスの100バイト版

...記事の続きを読む

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

Post on:2022年10月13日

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

...記事の続きを読む

CSS コンテナクエリの準備はできてる? 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました

Post on:2022年10月6日

コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そ

...記事の続きを読む

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

Post on:2022年10月4日

Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChrome 108で実装されます! CSSの新機能で、Chromeが一番最後というのは珍しいで

...記事の続きを読む

top of page

©2022 coliss