HTML/CSS

clipPathUnits=”objectBoundingBox”によって、切り抜くパスのサイズを切り抜きたい要素のサイズに応じて相対的に変更するという設定となる。また切り抜くパスを0から1の範囲 …

“SVGでクリッピングマスク” の続きを読む

特定のページでなぜかfaviconが表示されない不具合があった。他のページと変わらず、faviconの設定がしてあり、faviconファイルについてもリンクを辿るとしっかり存在している。ただ、Chromeのネットワークの …

“空白文字がファビコンを壊す” の続きを読む

参考：https://developer.mozilla.org/ja/docs/Web/CSS/:where whereやisはセレクター解釈を寛容にするためにある擬似クラスで、引数の要素をまとめて書くことができる。s …

“:where()と:is()の違い” の続きを読む

現時点でもEvery Layoutは充分に機能するが、値の型を変換する機能があれば、より柔軟に扱うことができるのになと思うレイアウトに遭遇した。たとえばこんな感じ。最小限のCSSにしたので、訳わからない意図ではあるが、l …

“CSSに値を変換する関数があればEvery Layoutは完成を見ると思う” の続きを読む

こんなにたくさんあるとは知らなかった。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Functions attr()、calc()、clamp()とかはもちろんよく …

“CSSの関数一覧” の続きを読む

transformプロパティは translate や rotate、scale などさまざまな値があり、アニメーションをさせる際には、調整が面倒だった。 CSSカスタム変数が登場してからは、カスタム変数を利用することで …

“transformの個別プロパティについて” の続きを読む

https://github.com/adobe-fonts/adobe-blank 10年くらい前に開発されたAdobe BlankというWebフォントはすべてのUnicodeコードポイントを不可視のグリフにマッピング …

“Adobe Blank の便利な使い方” の続きを読む

head内にbase要素を追加するとHTML内にあるaタグの一部の挙動を制御することができる。 参考：https://qiita.com/ryuta69/items/7eaa5d07fc2e6f8933ad

jumbotronherooverlaytile, panelholderbar