ラベル「CSS」の付いた投稿を表示しています。

【CSS】contain: content; の考慮漏れ

はじめに CSS の contain プロパティに関する個人的な失敗談です。 問題の対象 .post-title { contain: content; } contain: paint; ( content / strict )は、要素が領域外へはみ出さないことを保証...

ウェブページにアウトラインを表示するブックマークレット

はじめに 文章のアウトラインではないです。DOM要素のアウトラインのレイアウトを表示します。 次の画像のような表示を確認するブックマークレットです。 この表示の何が良いのかといえば、要素の配置が一目瞭然になるところです。不要な要素の発見、意図しない位置に配置された要素の発見などに...

Google検索に順位(連番)を表示する

はじめに Google検索に順位(連番)を表示するユーザスタイルです。 検索がちょっとだけ便利になります。 結果の表示例 簡単な説明 CSSの counter 関数を利用して、検索結果のタイトルに連番を計算します。計算した連番を ::before の content プロパティを...

すべてのページで標準のスクロールバーを表示する

はじめに 様々なウェブページがあります。この頃、モバイル対応やレスポンシブ対応の結果、デスクトップ環境のサイトでもスクロールバーを非表示にするサイトが出始めました。 モバイル環境であれば、スクロールバーを非表示にして表示領域を確保するのは良い方法です。ですが、デスクトップ環境では...

SyntaxHighlighter.jsからhighlight.jsへ移行しました

はじめに 当ブログでは、ブログ上のソースコードをハイライト表示するライブラリを利用しています。ソースコードには、予約後や文字列、数値など予め予測できる書式が多数存在します。それらを指定の色や書体によりハイライト表示することで、ソースコードを読みやす表示しています。 これまで CD...