【CSS】contain: content; の考慮漏れ 2023/10/03はじめに CSS の contain プロパティに関する個人的な失敗談です。 問題の対象 .post-title { contain: content; } contain: paint; ( content / strict )は、要素が領域外へはみ出さないことを保証...
Element から CSS Selector を取得する 2023/02/112023/02/16コード getCSSSelector.js /** * Element から CSS Selector を取得する * @author toshi (https://github.com/k08045kk) * @license MIT License |...
canvas を画面サイズに合わせる方法 2022/10/10キャンバス要素を画面全体に表示します。 結論 sample-fit-canvas-screen-size.html <!DOCTYPE html> <html> <head> <meta name="viewport...
ウェブページにアウトラインを表示するブックマークレット 2021/12/03はじめに 文章のアウトラインではないです。DOM要素のアウトラインのレイアウトを表示します。 次の画像のような表示を確認するブックマークレットです。 この表示の何が良いのかといえば、要素の配置が一目瞭然になるところです。不要な要素の発見、意図しない位置に配置された要素の発見などに...
JavaScript 無効限定の CSS を適用する 2021/05/132023/02/22JavaScript を使用する方法 <html class="nojs"> <head> <script> document.documentElement.classList.replace('nojs...
Google検索に順位(連番)を表示する 2021/04/15はじめに Google検索に順位(連番)を表示するユーザスタイルです。 検索がちょっとだけ便利になります。 結果の表示例 簡単な説明 CSSの counter 関数を利用して、検索結果のタイトルに連番を計算します。計算した連番を ::before の content プロパティを...
すべてのページで標準のスクロールバーを表示する 2021/02/262021/02/27はじめに 様々なウェブページがあります。この頃、モバイル対応やレスポンシブ対応の結果、デスクトップ環境のサイトでもスクロールバーを非表示にするサイトが出始めました。 モバイル環境であれば、スクロールバーを非表示にして表示領域を確保するのは良い方法です。ですが、デスクトップ環境では...
右クリックを禁止・禁止解除する 2021/01/112021/05/21JavaScriptで右クリックを禁止する ページ全体で右クリックを禁止する window.addEventListener('contextmenu', function(e) { e.preventDefault(); }); //window.onconte...
HTMLで高さ指定あり画像をアスベクト比維持自動縮小する 2020/03/07やりたいこと 「 <img> で height 属性を指定するが、領域の横幅が width 属性の指定を下回る場合、横幅の縮小に合わせてアスベクト比を維持したまま縦幅も縮小する」です。遅延読み込みやリフロー(レイアウト)の再実行防止などで画像の幅高さを事前に指定する必...
SyntaxHighlighter.jsからhighlight.jsへ移行しました 2020/02/262020/10/06はじめに 当ブログでは、ブログ上のソースコードをハイライト表示するライブラリを利用しています。ソースコードには、予約後や文字列、数値など予め予測できる書式が多数存在します。それらを指定の色や書体によりハイライト表示することで、ソースコードを読みやす表示しています。 これまで CD...
Bloggerのコメント欄を標準jsなしで返信可能にする 2020/02/222020/02/25 はじめに Bloggerのコメント欄改善です。標準jsを読み込めば、返信(リプライ)できるようにできます。ですが、できるだけスクリプトを使用したくないため、自作して最小限のスクリプトで済ますようにします。 仕様 コメントをJavaScript無効で表示する...
ブログのfont-family決定版 2020/02/072021/12/02目次 はじめに 通常フォント 通常フォントの別フォント順案(覚書) 等幅フォント 等幅フォントの別フォント順案(覚書) その他(覚書) 関連 はじめに ブログの font-family 決定版です。下記の長い長い調査結果を踏まえた最終案です。 font-familyを調べまわった...
有名サイトのfont-familyを調べてみた 2020/02/062020/03/11当ブログのfont-family選定の作業の一部です。決定版は次の記事参照です。 ブログのfont-family決定版 有名サイトのfont-family font-family Google - https://www.google.co.jp/ font-family: ar...
font-familyのソースコード用等幅フォント設定まとめ 2020/02/052021/12/02目次 はじめに 暫定案(もしくは、ただの全部載せ) コードの補足 プログラミングフォント 源ノ角ゴシック SFMono Consolas Menlo Monaco Roboto Mono Liberation Mono Courier, Courier New メイリオ mono...
font-familyを調べまわった結果のまとめ 2020/02/042021/12/02目次 はじめに 暫定案(もしくは、ただの全部載せ) コードの補足 OSに関する補足 アップルUI Helvetica Neue Verdana Segoe UI Arial Roboto ヒラギノ角ゴ Pro ヒラギノ角ゴシック (Hiragino Sans) BIZ UDゴシッ...
Firefoxでページの一部が印刷されない 2020/01/312021/07/24忘却録。 現象 当ブログでは、Firefoxで印刷(印刷プレビュー)すると、2ページ目以降が印刷されない。1ページ目のみ印刷される。現象でした。 他のブログを確認してみたところ、コンテンツ部分を1ページに収まる範囲のみ印刷するものもありました。ヘッダー・フッター・コンテンツが別ペ...
JavaScript から CSS のルールを管理する 2020/01/242023/08/27忘却録。 <style> を追加する addLocalStyle.js // CSSを追加する var addLocalStyle = function(text) { var style = document.createElement('style...
画像のないimgタグのSEO対策 2019/05/152020/03/22画像のない <img> のSEO対策です。 問題 画像のない <img> を配置して、alt属性がないと警告を受ける。画像には、alt属性を付けましょう…。 だが、alt属性をを付けるとalt属性の文字列が表示されてしまう。alt属性の文字列が画面上に表示...
FontAwesome を SVG で使用する【JavaScript なし】 2019/05/102023/03/14はじめに 「FontAwesome を JavaScript なしで使用する方法」または、「FontAwesome の一部のアイコンを使用する方法」です。 JavaScript 無効環境で FontAwesome を使用したページを閲覧すると文字化けしたような表示になるのを目にし...