封印されしnoscript
WebページにJavaScriptが必須となってはや20年、ずっと noscript タグを書き続けていた筆者であるが Next.js などの SSG 系と相性が悪くて最近使っていないので、この度封印することにした。 我 …
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
CSSだけでスムーズスクロールする
scroll-behavior というプロパティをアンカーがある親要素に指定する。 ヘッダーなどが固定の場合は、アンカー位置とヘッダーが重なったりするので、それを回避する場合は、scroll-margin-topプロパテ …
擬似クラスの記述順序について
LVHA（link、visited、hover、activeの頭文字）の順序で記述するのが良いとされている。 参考：http://cccs.cc/css/selector/priority/cascading/
FAQとQ&Aの違いについて
Google より明確に基準が設けられており、構造化データについても両者違いがあるため、それぞれ実装方法が異なる。 Q&Aの定義 掲載できる質問は 1 ページにつき 1 つです。複数の質問を 1 ページに掲載して …
CSS clip-path でキリヌキ
要素のどの部分を表示するかを設定するクリップ領域を作成する。 https://developer.mozilla.org/ja/docs/Web/CSS/clip-path これをうまく使うと下記のようなボーダーが入った …
min() max() clamp()
使いどころがないと忘れてしまう CSS関数を取り上げてみる。 ちなみにこれらはIEに対応していないため注意。これらの引数には — から始まる変数宣言（var()）も使うことができる比較関数である。 比較関数 …
遅いフォントと早いフォント
早期アクセスだったNotoが2019年ごろから、正式にリリースされた。こちらのURLに差し替えると、かなり速度が向上する。 速度改善のキーワードは以下の２つ。 サブセット化 フォントに含まれている文字の中から必要な文字だ …
よくある質問構造化データをHTML中に書く
hreflang について
多言語サイトを運営している際に、GoogleにそのページのURLと使用している言語を知らせるためのlinkタグの属性のひとつ。 サイトマップの場合は下記のようにする。
node-sass（LibSass）からsass（DartSass）に移行しよう。
https://sass-lang.com/blog/libsass-is-deprecated LibSassは非推奨になったため、DartSassの移行すべし。 結構変わるところがある。例えば@import構文を@u …