ラベル「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...

ブログのfont-family決定版

目次 はじめに 通常フォント 通常フォントの別フォント順案（覚書） 等幅フォント 等幅フォントの別フォント順案（覚書） その他（覚書） 関連 はじめに ブログの font-family 決定版です。下記の長い長い調査結果を踏まえた最終案です。 font-familyを調べまわった...

Firefoxでページの一部が印刷されない

忘却録。 現象 当ブログでは、Firefoxで印刷（印刷プレビュー）すると、2ページ目以降が印刷されない。1ページ目のみ印刷される。現象でした。 他のブログを確認してみたところ、コンテンツ部分を1ページに収まる範囲のみ印刷するものもありました。ヘッダー・フッター・コンテンツが別ペ...

画像のないimgタグのSEO対策

画像のない <img> のSEO対策です。 問題 画像のない <img> を配置して、alt属性がないと警告を受ける。画像には、alt属性を付けましょう…。 だが、alt属性をを付けるとalt属性の文字列が表示されてしまう。alt属性の文字列が画面上に表示...
ホーム