2016年12月3日 : してログ

Google Chrome だけレイアウトがおかしいので調べてみると、どうやら最小フォントサイズという設定で 10px 以上に制限されているようです。わざわざこれを変更して見てくれる人はいないので、サイトデザインの時点でフォントサイズは 10px 以上に制限しておいた方が良さそうですね。

この設定は「設定 → 詳細設定を表示 →(ウェブ コンテンツ)フォントをカスタマイズ」にあります。こういう設定は無いほうがいいと思うけど、それをサイト閲覧者に求めるのも違うと思います。社内ウェブアプリケーションなら設定してもらうのもアリだけど、そもそもその用途じゃ余計 10px なんていらないし、やっぱり変な制限は付けなくていい。Google Chrome のほうがおかしいと思います。

このブログのランキングページを作るのに、1st、2nd、3rd などと序数標識の付いたリストスタイルを(ネットに落ちていなかったので)作成してみました。説明が面倒なので定義を見て欲しいのですが、before 疑似要素と nth-child 疑似クラスをうまく組み合わせて実現しています。今まで、1~3だけ特別なのかと思っていましたが、その後は同様に下1桁が1~3のとき(11~13を除く)以外は「th」になります。

CSS コード
ol.ranking {
	counter-reset:	number;
	list-style:	none;
	margin:		0;
	padding:	0;
}
ol.ranking li {
	padding-left:	3em;
	text-indent:	-3em;
}

ol.ranking > li::before {
	counter-increment:number;
	display:	inline-block;
	width:		2.5em;
	text-align:	right;
	margin-right:	0.5em;
}

ol.ranking > li:nth-child(n)::before { content:counter(number)"th"; }
ol.ranking > li:nth-child(1)::before,
ol.ranking > li:nth-child(10n+21)::before { content:counter(number)"st"; }
ol.ranking > li:nth-child(2)::before,
ol.ranking > li:nth-child(10n+22)::before { content:counter(number)"nd"; }
ol.ranking > li:nth-child(3)::before,
ol.ranking > li:nth-child(10n+23)::before { content:counter(number)"rd"; }

まだ、数字の位置が揃っていないのが気になりますが、この辺りが CSS の限界のようです。もし、content を二重にしたり、その中にタグを入れられたりできれば、もう少しマシにできると思います。数字の位置で縦を揃える方法、序数標識を上付き数字にする方法、これらが分かる人はコメントください(タグでゴリゴリ書くのはナシで)。

使用例

以下に使用例(Wikipedia より)を示しますが、このブログのオリジナルサイトでしか表示されないと思います。

  1. ウェスタールンド1-26
  2. はくちょう座V1489星
  3. いっかくじゅう座V838星
  4. WOH G64
  5. いて座VX星
  6. ケフェウス座V354星
  7. いて座KW星
  8. はくちょう座KY星
  9. おおいぬ座VY星
  10. ガーネット・スター(ケフェウス座μ星)
  11. さそり座AH星
  12. ケフェウス座RW星
  13. カシオペヤ座PZ星
  14. IRC-10414
  15. りゅうこつ座EV星
  16. りゅうこつ座RT星
  17. ケフェウス座VV星A
  18. りゅうこつ座V602星
  19. ペルセウス座S星
  20. ベテルギウス(オリオン座α星)
  21. カシオペヤ座V509星
  22. いっかくじゅう座V838星 (en)
  23. カシオペヤ座TZ星
  24. ペルセウス座RS星
  25. りゅうこつ座V382星
  26. アンタレス(さそり座α星)
  27. ぎょしゃ座NO星
  28. おおいぬ座VY星
  29. (Massey-Levesque-Plez Model)
  30. ペガスス座S星
  31. ケフェウス座T星
  32. オリオン座S星
  33. うみへび座W星
  34. おうし座CE星
  35. カシオペヤ座R星
  36. ペルセウス座T星
  37. おおいぬ座δ星
  38. はくちょう座χ星
  39. ヘルクレス座α星
  40. カシオペヤ座ρ星
  41. ミラ(くじら座ο星)A
  42. りゅうこつ座η星
  43. かじき座S星
  44. かじき座R星 (en)
  45. りゅうこつ座HR星 (en)
  46. しし座R星
  47. ピストル星
  48. りょうけん座Y星
  49. はくちょう座γ星
  50. デネブ(はくちょう座α星)
  51. カシオペヤ座6番星
  52. LBV 1806-20
  53. ぎょしゃ座ε星A
  54. ぎょしゃ座ζ星
  55. ペガスス座ε星
  56. みなみじゅうじ座γ星
  57. アンドロメダ座γ星
  58. うさぎ座α星
  59. リゲル(オリオン座β星)
  60. りゅうこつ座ε星
  61. かんむり座R星
  62. カノープス(りゅうこつ座α星)
  63. オリオン座δ星
  64. オリオン座ζ星
  65. ペルセウス座α星
  66. ふたご座ζ星 (en)
  67. わし座η星
  68. りゅう座γ星
  69. アルデバラン(おうし座α星)
  70. こぐま座β星
  71. アルビレオ(はくちょう座β星)A1