CSS : してログ

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

画像の幅を 100% にすると、親要素いっぱいにストレッチされますが、元画像の解像度以上に拡大したくないときがあります。そんなときは、width と max-width を使い分けると良いです。

拡大もさせたいときは width
width: 100%;
拡大させたくないときは max-width
max-width: 100%;

サンプル

画像の原寸サイズはどちらも 600x400 になっています。ウィンドウサイズを変化させてみると分かりますが、max-width の場合は原寸サイズ以上に拡大されることはありません。

width: 100%
max-width: 100%

改行など余計な文字を取り除いても、ボックス要素の下側に余白が生じる場合があります。これが問題になることはあまり無いのですが、どうしても枠ピッタリに入れたい場合もあります。そんな時は、下記のように line-height を指定すると解消されるかもしれません。

line-height: 1px;

アイコンとテキストを並べた時、縦位置のずれが気になることがあります。画像に vertical-align:middle などと指定しても、どうしてもしっくりした位置に来ないと思いませんか? ちょっと冗長ですが、テーブルタグで囲んで、それぞれの td に vertical-align:middle を指定したときがいちばん自然な位置に来ます。が、やっぱり冗長過ぎるでしょってことで、試行錯誤してみました。

画像とテキストを並べただけ
にゃんこ
<img src="/image/icon/16x16/cat.png" />にゃんこ
画像に vertical-align:middle を指定
にゃんこ
<img style="vertical-align:middle;" src="/image/icon/16x16/cat.png" />にゃんこ
テーブルの td に vertical-align:middle を指定
にゃんこ
<table><tr>
  <td style="vertical-align:middle;"><img src="/image/icon/32x32/cat.png" /></td>
  <td style="vertical-align:middle;">にゃんこ</td>
</tr></table>
span で囲み display:inline-block、vertical-align:middle を指定
にゃんこ
<span style="display:inline-block;vertical-align:middle;"><img src="/image/icon/32x32/cat.png" /></span><span style="display:inline-block;vertical-align:middle;">にゃんこ</span>

という訳で、最後の inline-block を使用したものが最適という解を導きだしました。これを CSS で汎用的なクラスを定義しておけば、かなりスッキリとしたコードを書けると思います。

追記(2016-12-02)

アクセス解析から、久しぶりに見直していたら、どれも横に並んでいないことに気づきました。HTML5 / CSS3 にしたからなのか何なのか分かりませんが、これはマズイということで、改めて試行錯誤してみました。まだ、改良の余地があるかもしれません(画像の縦サイズをテキストの line-height に入れないといけないのが気に入らない)。

今のところの最適版
にゃんこ
<img style="vertical-align:top;" src="/image/icon/32x32/cat.png" /><span style="display:inline-block;line-height:32px;">にゃんこ</span>

メインコンテンツが少ないときに、不恰好になってしまうサイトデザインになってしまうこと、ありませんか? このサイトもそうでした。メインコンテンツが長く詰まっているページだとイメージどおりでも、数行程度の短いコンテンツでは、広告ばかりが目立ち、コンテンツの終わりの枠が、赤ちゃんの“よだれかけ”のように捲れ上がってしまいます。

そんなときに便利なのが、min-height です。これを div などに指定すると内容が少なくてもそれ以下のサイズにはなりません。これを使えば、フッタにゴテゴテ入れた広告が必要以上にせり上がることも無くなり、非常に見た目がよろしくなります。マージン取るのに <br /> たくさん入れるのは止しましょう。

<div class="contents_outer" style="min-height:100em;">
  <div class="contents" style="min-height:40em;">
    ... メインコンテンツ ...
  </div>
  <div class="ad"> ... 広告のコード ...</div>
</div>

この例は、広告がトップから 40em 以下に上らないようにし、コンテンツの枠自体も 100em を切らないように制限した、当サイトの CSS の指定です。

YUI reset した後の CSS でいつもネックだったフォーム要素のデザインについて少し調べてみました。ここで言うデザインとは、グラフィックを使ったリッチなやつではなく、標準の要素の文字サイズのばらつきや、ボタンの高さについてです。文字サイズについては CSS で単に font-size 指定すれば揃えられます。

ボタンの高さ指定はなぜか無視されます。結論から言うと、ボタンが inline 要素として定義されているためのようです(インライン要素は高さ指定が無視されます)。これは、下記のように display: inline-block として定義しなおして解決できました。

input[type="button"],
input[type="submit"],
input[type="clear"],
input[type="file"] {
	display:		inline-block;
	height:			2.5em;
	padding:		0.2em;
}

ただし、file タイプだけは残念な表示(ブラウザによっても異なる)になってしまいました。また、Firefox のみ半角英数字だけのボタンと、全角文字入りのボタンで1ドット違っています。これは半角英数字を日本語フォントで表示させてみても解決できず、課題として残ってしまいました。しかし、遠目で見れば、その違いは分からず違和感がある程度です。今のところ、ボタンの中に全角文字を入れる、くらいしか解決方法は無いようです。

CSS3で追加された :empty 擬似クラスを使うと、最終出力で空になった要素を非表示にできます。

最終出力で結果的に空になって、その要素のマージンだけスペースが無駄になるような場合に有効かと思います。

div.info:empty {
  display: none;
}