リスト内の項目の1行目だけを太字にする（::first-line 疑似要素）

2024.06.022024.06.12

CSSを使って要素内の最初の行だけを太字にできます。

/** title-listクラスのリスト 2024-06-02*/
.title-list li {
    font-size: 80%;
}
.title-list li::first-line {
    font-weight: 900;
      font-size: 120%;  
}

li セレクターを使って、全ての <li> 要素のフォントウェイトを normal に設定しています。これにより、デフォルトでは <li> 要素内のテキストは太字にならなくなります。

::first-line 疑似要素は、以下の要因によって区切られます。

改行文字（<br>要素など）：
明示的な改行文字によって区切られます。改行文字の前が最初の行となります。
ブロックレベル要素：
<div>、<p>、<h1>などのブロックレベル要素が最初の行を区切ります。これらの要素は新しい行から始まります。
行の長さ：
要素の幅とフォントサイズに基づいて、テキストがラップされる位置で最初の行が区切られます。つまり、テキストが要素の幅を超えると、次の行に移動します。
フロートとクリア：
floatプロパティを持つ要素や、clearプロパティを持つ要素も最初の行を区切る可能性があります。
インラインブロック要素：
display: inline-block;を持つ要素も、最初の行を区切ることがあります。

ちなみに、ブロックエディタ内ではうまく反映されず、わかりにくかったので枠をつけています。

.block-editor-page .title-list {
    border: 3px solid rgba(0,120,255,0.5);
}
.block-editor-page .title-list li::first-line {
    font-weight: 900;
}

こちらもどうぞ。

[CSS] 一行目以外にスタイルを設定するには？（否定擬似クラスには擬似要素を入れられない）

:not(::first-line)は無効になる title-listクラスのリスト要素（li）の各一行目を太字にしています。このCSSセレクタは、 .title-list li::first-line 二行目以降にスタイルを設定したいと思いました。一見、::first-line 擬似要素を :not() 否定擬似クラスに入れれば、リスト項目の最初の行以外を選択するセレクタになりそうです。 .title-list li:not(::first-line) しかし、これはうま...

[JavaScript]全選択で記事部分だけになるようにした

自分のサイト内の記事全体を選択しやすいように、スクリプトを作りました。 window.getSelection() テーマのjavascript.jsに以下のコードを追加しました。 document.addEventListener('keydown', function(event) { if ((event.ctrlKey || event.metaKey) && event.key === 'a') { event.preventDefault(); const art...

[CSS] ブログの文字詰めを微調整した【letter-spacing と font-feature-settings】

ちいラボでは、なるべく「文字が見やすい大きさ」に設定しています。しかし、自分のスマートフォンで閲覧すると、一行の文字数が少ないために、改行が多すぎる気もしています。そこで、文字の大きさをそのままに、「文字詰め」を狭めてみることにしました。 letter-spacing 全体的な字間をそのまま減らすには、letter-spacing に負の値を設定します（規定は0）。 letter-spacing: -0.05em; font-feature-settings に "palt...

[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】

なぜか、Cocoonのテーマ設定のソースコードが反映されませんでした。CSSセレクタを設定し直したら、うまく動きました。 highlight.jsが動作しない Cocoonテーマには、ソースコードハイライト機能があります。これは、highlight.jsを利用しています。しかし、Cocoon設定では、ちゃんとハイライト表示にチェックがつけたのですが、記事内のソースコードがそのままでした。これまでうまくコードハイライトが表示されない原因は、「スクリプトの遅延処理などのほ...

QRコードを読み込むと、関連記事を確認できます。