CSSだけでスムーズスクロールする
scroll-behavior というプロパティをアンカーがある親要素に指定する。
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
擬似クラスの記述順序について
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 …
昔懐かし、HTMLの復習
pの中になぜdivタグは入れられないのか 説明するときにいまいち体系的に説明できなかったので、復習をしてみた。 概要 HTML5より前は、インライン要素とブロックレベル要素の2種類のみで、ブロックレベル要素はブロックレベ …