大西佐七のザ・飛騨弁フォーラム　方言学

リストマーカー問題

戻る

私:最近はただ記事を書いているだけではなく、あれこれサイト構造をいじくりまわしていて、そちらにてんやわんや。
君:具体的なお話をお願いね。
私:語源学の各論のところを先ほどはいじくってみた。かなりの量のファイルが詰め込んであるが、いちいち数える事は不可能に近いし、自動的に番号を振れば見やすいし、僕自身が数えやすいと思って、まずは気軽に＜ｌｉ＞のタグを使ってみた。ＰＣ画面では正しく番号が表記されるものの、携帯 iphone ではフォントが不ぞろい。このような場合、今まではタグ辞典を紐解いて、地道な勉強にて試行錯誤という手法だったが、今回は google gemini に問い合わせてみたら即答だった。・・これは主に、ブラウザやOSによるデフォルトのスタイルの違いが原因で発生することが多いです。特に、リストアイテムの内容（テキスト）と、リストマーカー（番号や点）の表示に関する設定が、環境によって異なるために起こります。・・と言う回答で
.custom-counter-list {
    /* デフォルトのマーカーを非表示 */
    list-style: none;
    /* リスト全体を対象にカウンターを初期化 */
    counter-reset: my-list-counter; 
    padding-left: 0; /* 必要に応じて調整 */
}

.custom-counter-list li {
    /* カウンターをインクリメント（1, 2, 3...と数える） */
    counter-increment: my-list-counter; 
    position: relative; /* ::beforeの位置決めの基準とする */
    padding-left: 2em; /* カスタムマーカーのスペースを確保 */
}

.custom-counter-list li::before {
    /* 疑似要素で番号を表示 */
    content: counter(my-list-counter) ".";
    
    /* ***** ここでフォントとスタイルを統一 ***** */
    font-family: 'Your Specified Font', sans-serif; 
    font-size: 16px; 
    font-weight: bold; /* 必要に応じて */
    /* *************************************** */
    
    position: absolute;
    left: 0;
    top: 0; /* 行の先頭に配置 */
    width: 1.5em; /* 番号の表示幅を調整 */
    text-align: right;
}
上記の CSS code をお使いください、この方法であれば、マーカー部分も完全にHTML要素のテキストとして扱われるため、指定した font-family や font-size がPC・iPhoneの区別なく、確実に適用されます、というお答えだった。実際にやってみたら三十秒で解決できた。人工知能が生まれて、人間の知性というものがゴミ同然になった気がする。とほほ
君:まあ、そんなに落ち込まなくてもいいわよ。つまりソースコードを深く理解しなくても、とりあえずは結果さえよければ良しという事ね。ただし本文だけは佐七君がしっかりと考えなきゃ駄目よ。 ほほほ

ページ先頭に戻る