Firefoxと他のブラウザを比較すると、Firefoxだけ若干縦に間延びしているように
感じる場合がある。特に文章のところが。

これは、行と行の間にデフォルトで若干間隔が設定されているからだ。

これを他のブラウザと合わせてなくすには以下の指定をすればよい。
┌──────────────────────────────────────┐
│* {                                                                         │
│    line-height:100%;                                                       │
│}                                                                           │
└──────────────────────────────────────┘
もちろん、局地的(divタグ単位など)に設定することも可能。

また、以下のように指定する方法もある。
┌──────────────────────────────────────┐
│* {                                                                         │
│    line-height:1em;                                                        │
│}                                                                           │
└──────────────────────────────────────┘
(こちらはフォントサイズが16pxの場合限定)
┌──────────────────────────────────────┐
│* {                                                                         │
│    line-height:16px;                                                       │
│}                                                                           │
└──────────────────────────────────────┘

【可変】
  (1) テーブルタグを使うパターン(段組としては忌嫌われるが便利)
┌──────────────────────────────────────┐
│<table><tr>                                                                 │
│  <td>列一</td>                                                             │
│  <td>列二</td>                                                             │
│</tr></table>                                                               │
└──────────────────────────────────────┘
  (2) divタグを二階層にするパターン(階層が深くなる点が難だがわかりやすい)
┌──────────────────────────────────────┐
│<div style="height:16px;">                                                  │
│  <div style="float:left;">列一</div>                                       │
│  <div style="float:left;">列二</div>                                       │
│</div>                                                                      │
└──────────────────────────────────────┘
  (3) 「clear:both;」を使うパターン(階層は浅いが列幅指定に難あり(後述))
┌──────────────────────────────────────┐
│<div style="float:left;">列一</div>                                         │
│<div style="float:left;">列二</div>                                         │
│<div style="clear:both;"></div>                                             │
└──────────────────────────────────────┘
【固定】
  (4) 「position:absolute」で位置固定で前面に乗せる感じにする
┌──────────────────────────────────────┐
│<div style="position:relative;">                                            │
│  <div style="position:absolute;left:0;width:■px;">列一</div>              │
│  <div style="margin-left:■px;">列二</div>                                 │
│</div>                                                                      │
└──────────────────────────────────────┘
  (5) 「float:left」で前面に乗せる感じにする
┌──────────────────────────────────────┐
│<div style="float:left;width:■px;">列一</div>                              │
│<div style="margin-left:■px;">列二</div>                                   │
└──────────────────────────────────────┘
【画面全体を縮小した場合の挙動】
  (1)→左列、右列とも同じ幅となり、それぞれ改行される
  (2)→右列全体が改行されて次行に回り込む形となる
  (3)→右列全体が改行されて次行に回り込む形となる
  (4)→左列は列幅指定されているので固定となる、右列がその割をくらって改行に
  (5)→左列は列幅指定されているので固定となる、右列がその割をくらって改行に
  それぞれに列幅を固定で指定すれば、改行や回り込みは発生しない
  但し、(3)は全体を統括する幅が指定できないので、
  おのおの(左列、右列)の幅を指定しても回り込みとなってしまう

┌──────────────────────────────────────┐
│<table><tr><td style="border:1px solid #000000;">                           │
│<img src="画像.jpg" alt=""/></td></tr></table>                              │
└──────────────────────────────────────┘
画像imgタグをtdタグの中に入れると、下の方に隙間ができてしまう。
tdの縦幅(height、padding、border、margin)を調整しても隙間を解消できない。
Firebugで調査しても、不思議な余白分、縦幅が追加されている。

これを解消するには、以下のスタイルを適用させればよい。
┌──────────────────────────────────────┐
│img {                                                                       │
│    vertical-align  :bottom;                                                │
│}                                                                           │
└──────────────────────────────────────┘
「g」とか「j」のような、下に若干出ている文字向けに、若干下に隙間があり
その分、隙間があいてしまうので、下端に合わせるように指定してやれば
隙間がなくなるといった感じだ。

「tdタグ」中に「inputタグ」による入力欄を設置し、
その入力欄を如何なる時も「tdタグ」いっぱいに広げて表示させたいケースがあった。

なので、「inputタグ」の「width」指定を「100%」とし、
「tdタグ」の「width」指定に「px」単位や「em」単位で横幅を指定して
自由に制御するように企てた。

たいていのブラウザは意図した通りに「inputタグ」入力欄が追従したのだが、
「Chrome」だけは違った。

「tdタグ」の「width」を狭くしても効かないのだ。
「tdタグ」が広がってしまう。
これでは間延びしていけない。

どうしたものかと途方に暮れていたところ
「tdタグ」の「width」指定を「max-width」指定に代えたらうまくいった。

でも、弊害が怖い。。。。。

IE8で画面が小さいと「width」が効かない。

：
：
：

「min-width」だと効いた。

う～ん。。。。

tdタグとかに適当に文字を出力して、いい感じに改行して欲しい場合、
その指定が結構ややこしいことに気づいた。

結論から言えば、以下の通り。
┌──────────────────────────────────────┐
│td {                                                                        │
│    white-space         :normal;                                            │
│    word-break          :break-all;                                         │
│}                                                                           │
└──────────────────────────────────────┘
Firefox向けに「word-break:break-all;」も付けてやんないとダメみたい。

HTML側で、影→本体の順に同じ文言を定義する。
┌──────────────────────────────────────┐
│<div id="titleShadow">タイトル</div>                                        │
│<div id="title">タイトル</div>                                              │
└──────────────────────────────────────┘

本体と影を以下のような感じに定義すればOK。
┌──────────────────────────────────────┐
│div#title,                                                                  │
│div#titleShadow {                                                           │
│    position            :absolute;                                          │
│    top                 :2em;                                               │
│    font-size           :4.0em;                                             │
│    text-align          :center;                                            │
│}                                                                           │
├──────────────────────────────────────┤
│div#title {                                                                 │
│    width               :1000px;                                            │
│    color               :#FFFFFF;                                           │
│}                                                                           │
├──────────────────────────────────────┤
│div#titleShadow {                                                           │
│    width               :997px;                                             │
│    padding-top         :3px;                                               │
│    padding-left        :3px;                                               │
│    color               :#000000;                                           │
│}                                                                           │
└──────────────────────────────────────┘
これは、画面サイズが全体で1000pxの例。

「z-index:1」には「position:relative」を忘れずに。
＃他に「position:absolute」でも「position:fixed」でもいいけど。

これらがないと「z-index」はいくら指定しても効きません。

はまりました。。。

色の指定は「black」や「red」のようなカラーネームで指定する場合と
「#000000」や「#FF0000」のような16進で指定する場合がある。

で、その中間っぽい、16進だけどカラーネームっぽいのを探している。

例えば「#C0FFEE」とか。

「abcdef」と「ilo」(110)といった文字を組み合わせて
6文字以内の単語ができればよい。

今、思いつくのは以下のとおり。

「#aba」   …ダンシングクイーン♪
「#abe」   …阿部さん
「#ac」    …直流電源
「#bad」   …悪い
「#bee」   …蜂
「#cafe」  …コーヒー
「#cd」    …コンパクトディスク
「#C0FFEE」…コーヒー
「#dc」    …交流電源
「#ec」    …欧州共同体
「#EC0」   …地球にやさしく
「#ed」    …カリーナEDですよ
「#fee」   …報酬

他にもいろいろあるだろうけど…。

┌──┬───────────┬───────────────────────┐
│    │*                     │すべて                                        │
├──┼───────────┼───────────────────────┤
│    │.クラス               │クラス                                        │
├──┼───────────┼───────────────────────┤
│    │#ID                   │ID                                            │
├──┼───────────┼───────────────────────┤
│    │先祖 自身             │子孫                                          │
├──┼───────────┼───────────────────────┤
│    │親 > 自身             │子(直子)                                      │
├──┼───────────┼───────────────────────┤
│    │隣 + 自身             │隣接している要素                              │
├──┼───────────┼───────────────────────┤
│CSS3│前 ~ 自身             │後にある要素                                  │
├──┼───────────┼───────────────────────┤
│    │:first-letter         │最初に現れる文字だけ                          │
├──┼───────────┼───────────────────────┤
│    │:first-line           │最初の行だけ                                  │
├──┼───────────┼───────────────────────┤
│    │:first-child          │最初に現れる要素だけ                          │
├──┼───────────┼───────────────────────┤
│CSS3│:nth-of-type(■)      │■番目に現れる要素                            │
├──┼───────────┼───────────────────────┤
│CSS3│:nth-last-of-type(■) │後ろから■番目に現れる要素                    │
├──┼───────────┼───────────────────────┤
│    │:hover                │マウスがのっている場合                        │
├──┼───────────┼───────────────────────┤
│CSS3│:not                  │否定                                          │
├──┼───────────┼───────────────────────┤
│CSS3│:checked              │チェックされている場合                        │
├──┼───────────┼───────────────────────┤
│    │タグ[属性]            │属性を持つ                                    │
├──┼───────────┼───────────────────────┤
│    │タグ[属性="値"]       │特定の属性値を持つ                            │
├──┼───────────┼───────────────────────┤
│CSS3│タグ[属性^="値"]      │特定の属性値を持つ(先頭から部分一致)          │
├──┼───────────┼───────────────────────┤
│CSS3│タグ[属性$="値"]      │特定の属性値を持つ(末尾から部分一致)          │
├──┼───────────┼───────────────────────┤
│CSS3│タグ[属性*="値"]      │特定の属性値を持つ(部分一致)                  │
└──┴───────────┴───────────────────────┘
  ※CSS3はIEで動作しないものがあるので注意