CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も

2024/11/06 10 users CSS コンテナ パク スタイルクエリ ラベル

スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。 このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。 Feature detec... 続きを読む

HTML で `<select>` 要素を `<hr>` でセパレートできるようになった

2023/05/03 121 users select ＨＲ Proposal WHATWG HTML

HTML Living Standard の5月2日付けの更新で <select> 要素の子要素として <hr> を含めることができるようになりました。 Proposal: Allow adding separator rows to <select> boxes using <hr> · Issue #3410 · whatwg/html Allow <hr> to be used inside <select> as a separator by annevk · Pull Request #9124 · wh... 続きを読む

Chrome 111のココに注目！ 三角関数やスタイルクエリなどCSSに関する新機能がけっこうたくさんサポートされました

2023/03/08 15 users CSS 三角関数 スタイルクエリ ココ nth-child

本日リリースされたChrome 111で、CSSに関する新機能がけっこうたくさんサポートされたので、紹介します。 sin(), cos(), tan()などの三角関数をはじめ、親要素のスタイルに応じて子要素のスタイルを適用できるスタイルクエリ、:nth-child()で「of S」構文が使用できるようになったり、他にもいろいろ盛りだくさんです。... 続きを読む

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

2022/11/29 26 users セレクタ Has CSS 疑似クラス 要素

CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単で... 続きを読む

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

2022/10/27 160 users CSS コンテナクエリ スタイルクエリ Safari コンテナ

Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定... 続きを読む

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

2022/10/06 42 users ポリフィル アップデ ブラウザ 安定版 準備

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

[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック | コリス

2018/07/27 194 users コリス ポパー クリックイベント CSS ターゲット

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義でき... 続きを読む

CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem | コリス

2018/07/09 131 users rem コリス フォントサイズ CSS 複利計算

フォントサイズの指定によく使用される単位は、相対値で指定できる単位が人気です。中でも、親要素に相対的なemより、常にルートに相対的なremの方が使い勝手がよいでしょう。emを使用すると複利計算になるため、深い階層の子要素...記事の続きを読む 続きを読む

[CSS]幅や高さが不明な要素を中心に配置する、IE8対応の古い方法とモダンブラウザ対応の最新の方法 | コリス

2018/07/04 51 users コリス CSS 要素 両方 方向

CSSで子要素を親要素の中心に配置するには、水平と垂直の両方の方向に対して中央揃えにする必要があります。特に、子要素の幅や高さが不明な場合はやっかいです。 幅や高さが不明な子要素を親要素の中心に配置するIE8にも対応した古い方法、モダンブラウザ対応の最新の方法を紹介します。 Centering: The Newest Coolest... 続きを読む

[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説 | コリス

2018/06/08 92 users コリス 色相 CSS 一行 美しいエフェクト

ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いスタイルシートが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。... 続きを読む

Sketchにインストールしておくと便利なプラグインのまとめ | コリス

2018/02/14 68 users コリス Sketch padding プラグイン レイアウト

Sketchはそのままでも利用できますが、プラグインをいれると更に便利になります。 Webページやスマホアプリの制作に便利なSketchのプラグインを紹介します。 Paddy 文字数を変更したり、子要素のサイズを変更すると、親要素のレイアウトが崩れてしまうことがあります。そんな時は、このプラグインが便利です。 要素にpaddingを指定したら、それを保ったままレイアウトを変更できます。機能は他にも... 続きを読む

Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説 | コリス

2017/03/03 96 users Flexbox コリス Flex float アニメーション

普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイアウトを作成する時に役立つ、Flexboxのプロパティがどのように収縮して機能するかアニメーションで分かりやすく解説します。 Even more about how Flexbox... 続きを読む

Markdown記法 とりあえずこれだけ覚えれば大丈夫 基本のチートシート | megane9988のブログ

2014/08/06 143 users チートシート markdown記法 Markdown 基本

まだ使ってない人向けです。WordPressの場合は、Jetpackが提供してくれるMarkdownを利用することで、普通にタグを書くよりもずいぶんブログを書く時間が短縮できますよ。 チートシート 見出し # h1 #### h2 ##### h3 // 増やした数だけ数字が増える リスト - リスト - リスト - 子要素(先頭にタブインデント1つ) - 孫要素(先頭にタブインデント2つ) - ... 続きを読む

CSSでボックスを上下左右中央に配置する第３の方法 | 3streamer blog

2012/01/17 108 users CSS 上下左右中央 ボックス ウインドウサイズ Box

ポイントはboxの横と高さの1/2 をネガティブマージンで指定するところですね。class=”box”に指定しているmin-widthはブラウザのウィンドウサイズをboxの大きさよりも小さくした時の対策です。これが無いとカラム落ちのような状態になってしまいます。 このやり方のネックは中央に配置される子要素のboxの幅と高さをCSSで指定しないと使えないという点です。例えば、内包する子要素が画像で色... 続きを読む

複数要素の関連をビジュアライズできるライブラリ「arbor.js」:phpspot開発日誌

2011/11/29 33 users ライブラリ phpspot開発日誌 プチリニューアル 関連

arbor.js 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 JavaScriptベースですが、Chromeで見るとなめらかに動作して良い感じです。 動きがカッコイイのでデモなんかで見せるとよい印象を得られるかも。 更に子要素をアニメーション 階層的にデータを現せます 関連エントリ HTML5のキャンバスと連動させて音声をビジュアライズしたデモ ブログのプチリニューアルに使... 続きを読む

[CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid | コリス

2011/07/03 211 users グリッドシステム grids Grid コリス class

FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。 デモページ：入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。 コンテナとなる要素のclassに「grids」を加えます。 子要素に望むサイズのclassを指定します。 Gridのスタイルシート 2011年7月1日リリース版のスタイルシートです。... 続きを読む

[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

2011/03/10 712 users overflow Demo コリス float フロート

下記は各ポイントを意訳してものです。はじめにDemo 1: overflow:auto;Demo 2: overflow:hidden;overflowを使って生じる問題点と解決方法はじめにフロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。デモ：１ フロートをクリアする要素を配置して解消した例しかし、この問題を... 続きを読む

[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff | コリス

2011/02/08 100 users div要素 コリス カルーセル テキスト スライダー

一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。 下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。This is a slide! 続きを読む