指定していない値は、デフォルトにリセットしてしまう。

テキスト色と背景色の組み合わせ

テキスト色	背景色	説明
#333333	#FFFFFF	ダークグレーのテキストと白い背景で、柔らかなコントラスト。
#4D4D4D	#F5F5F5	少し明るめのグレーとオフホワイトで、目に優しい組み合わせ。
#2E2E2E	#FAFAFA	より濃いグレーと淡い背景色で、モダンな印象を与える。
#4D5156	#FFFFFF	Google（検索結果）
#0F1419	#FFFFFF	Twitter
#050505	#FFFFFF	Facebook
#262626	#FFFFFF	Instagram
#444444	#FFFFFF	東洋経済オンライン
#222222	#FFFFFF	NewsPicks
#0F1111	#FFFFFF	Amazon

rgb(31 120 50) rgb(30% 20% 50%) rgb(255 122 127 / 80%) rgb(255 122 127 / .2)

.ichimatsu { background-size: 30px 30px; /* repeating-conic-gradientが適用されるサイズ */ background-image: repeating-conic-gradient(from 0deg, #fff 0deg 90deg, #ebebeb 90deg 180deg); /* 90度ずつ色変更を360度まで繰返し（2回） */ background-repeat: repeat; }

次の値を含めなければなりません。
<font-size>
<font-family>
次の値は任意で含めることができます。
<font-style>
<font-variant>
<font-weight>
<font-stretch>
<line-height>
font-style, font-variant, font-weight は font-size よりも前になければなりません。
font-variant は CSS 2.1 で定義された値、つまり normal および small-caps のみ指定できます。
font-stretch は単一のキーワード値のみを指定することができます。
line-height は font-size の直後に、 "/" で区切って、 "16px/3" のように指定します。
font-family は指定される最後の値である必要があります。

font: <font-style> <font-weight> <font-size> <font-family>;

font-styleプロパティ
normal，italic，oblique

汎用フォント・ファミリー名
serif：明朝体
sans-serif：ゴシック体
cursive：筆記体
fantasy：ファンタジー
monospace：等幅

<style> .customize_tag:last-of-type { border-bottom: dashed 3px blue; padding-bottom: 1em; } </style> <div> <p class="customize_tag"> AAA </p> <p class="customize_tag"> BBB </p> </div> <p> CCC </p>

<div>要素で囲むことで、<p> 要素の最後の子要素が正しく認識されるようになります。

<p> <img src="../../blog-media/bz12/img-xxxxx.webp" alt="" style="cursor: zoom-in;" id="zoomImage-xxxxx"> </p> <div style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000;" id="overlay-xxxxx"> <img src="../../blog-media/bz12/img-xxxxx_o.webp" alt="" style="max-width: 90%; max-height: 90%;"> </div> <script> const img-xxxxx = document.getElementById('zoomImage-xxxxx'); const overlay-xxxxx = document.getElementById('overlay-xxxxx'); img-xxxxx.addEventListener('click', () => { overlay-xxxxx.style.display = 'flex'; }); overlay-xxxxx.addEventListener('click', () => { overlay-xxxxx.style.display = 'none'; }); </script>

画像ファイル名と"ID"を編集。
拡大画像（元画像）の幅が 922px 以下ならば、「img-xxxxx_o.webp」は存在しない。「img-xxxxx.webp」が元画像と同じサイズなので、「img-xxxxx_o.webp」を「img-xxxxx.webp」に読み替えてください。

<p style="font-family: monospace, serif; white-space: pre-wrap; color: #eaeaea; background-color: #1e1e1e; padding: 0.3em 0.5em;">

win10

#cccccc #0c0c0c

fedora

#eaeaea #1e1e1e