:visited疑似クラスの制限
:visited 擬似クラスには多くの制限がかけられている。具体的には使用できるプロパティが color や background-color、border-color などに限定されており、そのプロパティのアルファ値に …
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
裏技なんてないこの世の中だから
SEO関連では裏技なんてない。本来の用途でHTMLを作成し、人間が読みやすいという絶対的な観点で施策をせず、ハック的な考えを遂行してしまうと必ず報いを受ける。 table要素は昔、ハック的にレイアウトを作るために使われて …
ブラウザスクロール隠し
やんごとなき事情で、htmlにscroll-y:autoを指定するときに、ブラウザ側で二重にスクロールバーが表示されてしまうことがあるが、cssで隠せるようになった。 その指定方法をメモ。 引用：https://zero …
ツェリードニヒ的リンク先読み
参考：https://developer.mozilla.org/ja/docs/Web/HTTP/Link_prefetching_FAQ リンクの先読みとはブラウザの機能の一つで、ブラウザのアイドル時間を使用して、予 …
fullPage.js のスクロール制御をCSSで模倣する
scroll-snap-alignプロパティとscroll-snap-typeプロパティを使用する。
SVGでクリッピングマスク
clipPathUnits=”objectBoundingBox”によって、切り抜くパスのサイズを切り抜きたい要素のサイズに応じて相対的に変更するという設定となる。また切り抜くパスを0から1の範囲 …
空白文字がファビコンを壊す
特定のページでなぜかfaviconが表示されない不具合があった。他のページと変わらず、faviconの設定がしてあり、faviconファイルについてもリンクを辿るとしっかり存在している。ただ、Chromeのネットワークの …
:where()と:is()の違い
参考：https://developer.mozilla.org/ja/docs/Web/CSS/:where whereやisはセレクター解釈を寛容にするためにある擬似クラスで、引数の要素をまとめて書くことができる。s …
CSSに値を変換する関数があればEvery Layoutは完成を見ると思う
現時点でもEvery Layoutは充分に機能するが、値の型を変換する機能があれば、より柔軟に扱うことができるのになと思うレイアウトに遭遇した。たとえばこんな感じ。最小限のCSSにしたので、訳わからない意図ではあるが、l …
CSSの関数一覧
こんなにたくさんあるとは知らなかった。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Functions attr()、calc()、clamp()とかはもちろんよく …