Fet-Fe

2024年11月8日 (金)に参加
>Fet-Fe
>Fet-Fe
712行目: 712行目:
利用できる番号の一覧はMozillaの[https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type list-style-type]のページから確認できる。
利用できる番号の一覧はMozillaの[https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type list-style-type]のページから確認できる。


以下の例では、<code>&lt;ol style="list-style-type: tibetan; column-count: 2;"&gt;</code>によって、チベット文字の数字を設定している。
以下の例では、<code>&lt;ol style="list-style-type: tibetan; column-count: 2;"&gt;</code>によって、チベット文字の数字を設定している。各リスト項目を記載する<code>li</code>タグには何のプロパティも指定していない。


<div lang="sa-Tibt">
<div lang="sa-Tibt">
739行目: 739行目:
<li>ཨཱི་དཱུ་ཏཽ་ཙ་སཔྟམྱརྠེ།</li>
<li>ཨཱི་དཱུ་ཏཽ་ཙ་སཔྟམྱརྠེ།</li>
<li>དཱ་དྷཱ་གྷྭ་དཱཔ།</li>
<li>དཱ་དྷཱ་གྷྭ་དཱཔ།</li>
</ol>
</div>
[https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type list-style-type]のページに存在しない数字などについては、自分で番号を書く必要がある。
以下の例では、バイクシュキー文字の数字をリスト番号とするために、<code>ol</code>タグには<code>style="list-style-type: none; column-count: 2;"</code>を設定し、デフォルトで表示される番号を非表示にしている。
更に各<code>li</code>タグは<code>&lt;li style="position: relative;"&gt;&lt;span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;"&gt;𑱚.&lt;/span&gt;𑰪𑰴𑰟𑰿𑰠𑰰𑰨𑰯𑰟𑰹𑰓𑰿𑱁&lt;/li&gt;</code>のように記載している。
<code>user-select</code>は2024年8月4日現在Safariに対応していないため、ベンダープレフィックスも指定している。
<div lang="sa-Bhks">
𑰀𑰬𑰿𑰘𑰯𑰠𑰿𑰧𑰯𑰧𑰱
𑰀𑰞𑱃𑰢𑰿𑰨𑰝𑰦𑰺𑱀𑰠𑰿𑰧𑰯𑰧𑰾𑱁 𑰢𑰿𑰨𑰝𑰦𑰾𑱃𑰢𑰯𑰟𑰾𑱁
<ol style="list-style-type: none; column-count: 2;">
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱚.</span>𑰪𑰴𑰟𑰿𑰠𑰰𑰨𑰯𑰟𑰹𑰓𑰿𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱛.</span>𑰀𑰟𑰸𑰒𑰿𑱃𑰐𑰲𑰜𑰾𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱜.</span>𑰂𑰎𑰺𑱃𑰐𑰲𑰜𑰪𑰴𑰟𑰿𑰠𑰱𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱝.</span>𑰡𑱃𑰠𑰯𑰝𑰲𑰩𑰺𑰢𑱃𑰁𑰨𑰿𑰠𑰠𑰯𑰝𑰲𑰎𑰸𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱞.</span>𑰎𑰿𑰒𑰰𑰝𑰰𑱃𑰓𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱟.</span>𑰟𑰱𑰠𑰱𑰪𑰸𑰪𑰱𑰘𑰯𑰦𑰿𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱠.</span>𑰮𑰩𑰺𑱀𑰡𑰡𑰿𑰝𑰨𑰯𑰾𑱃𑰭𑰽𑰧𑰺𑰐𑰾𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱡.</span>𑰦𑰲𑰏𑰡𑰯𑰭𑰰𑰎𑰯𑰪𑰓𑰡𑰺𑱀𑰡𑰲𑰡𑰯𑰭𑰰𑰎𑰾𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱢.</span>𑰝𑰲𑰩𑰿𑰧𑰯𑰭𑰿𑰧𑰢𑰿𑰨𑰧𑰝𑰿𑰡𑰽𑱃𑰭𑰪𑰨𑰿𑰜𑰦𑰿𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣.</span>𑰡𑰯𑰕𑰿𑰖𑰩𑰻𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱚.</span>𑰃𑰟𑰳𑰟𑰸𑰟𑰿𑰟𑰿𑰪𑰰𑰪𑰓𑰡𑰽𑱃𑰢𑰿𑰨𑰐𑰴𑰮𑰿𑰧𑰦𑰿𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱛.</span>𑰀𑰟𑰭𑰺𑱃𑰦𑰯𑰝𑰿𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱜.</span>𑰫𑰸𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱝.</span>𑰡𑰰𑰢𑰯𑰝𑱃𑰊𑰎𑰯𑰕𑰡𑰯𑰒𑰿𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱞.</span>𑰌𑰝𑰿𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱟.</span>𑰭𑰦𑰿𑰤𑰲𑰟𑰿𑰠𑰻𑱃𑰫𑰯𑰎𑰩𑰿𑰧𑰭𑰿𑰧𑰸𑰝𑰯𑰪𑰡𑰯𑰨𑰿𑰬𑰸𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱠.</span>𑰄𑰗𑰾𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱡.</span>𑰅𑰼𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱢.</span>𑰃𑰟𑰳𑰝𑰻𑱃𑰓𑱃𑰭𑰢𑰿𑰝𑰦𑰿𑰧𑰨𑰿𑰞𑰸𑱁</li>
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱤.</span>𑰅𑰼𑱁</li>
</ol>
</ol>
</div>
</div>
匿名利用者