何回かに分けて「複式簿記はいいよ」という話をしてきました。でも，複式簿記の帳票だけでは，十分に把握しきれないこともあります。

ぼくのしている仕事の場合，受注してからその報酬が入るまでに，ある程度の期間があります。だいたい，2ヶ月から4ヶ月。長いものだと半年，一年ということもあります。ふつう，納品・検収が終わり，請求書を出したところで売上を計上するための伝票を書きます。（例外もありますが）

伝票に書くまでは，それ以前にいくら仕事をしていても，帳簿上には現れてこないのです。

自転車操業的にやっているぼくとしては，ちょっと不便を感じることがありました。

制作中のお金の動きを表してみる

そこで，次の金額を常時把握できるようにしてみました。

• 見積額
• 受注額（受注時の見積額）
• 作業額（実際に作業した額）
• 請求額
• 入金額

ぼくの場合，作成したファイル，行った作業に対して課金するようにしています。index.html がいくら，common.css がいくら，MovableType インストールがいくら，というふうに。ファイルが出来上がったとき，作業が済んだとき，その内容と料金を明細書に書き足していきます。これを合計すると「作業額」が出せます。

そして，それぞれの金額の差を出します。

A ＝ 見積額 － 受注額 ＝ 未受注額

見積は出したが，まだ受注していないというもの。将来，売上になるかもしれない額です。

B ＝ 受注額 － 作業額 ＝ 未作業額

受注したもののうち，今から稼ぐ分です。収入が保証されているこれから先の仕事です。

C ＝ 作業額 － 請求額 ＝ 未請求額

まだ現金化できませんが，すでに稼いだ分です。

D ＝ 請求額 － 入金額 ＝ 売掛金

（ここからは複式簿記の帳票に現れる）

E ＝ 入金額

現金化された収入

仕事をすると順に動いていく

仕事をすることによって，お金はAからEに向かって，順に動いていくことになります。

大雑把に言うと，Aをとってくるのが営業，AをBに移すのが企画，BをCに移すのが制作，CをDに移すのが経理の仕事になります。（DをEに移すのは信用かな...）

ぼくが使っている表の一部を載せておきます。（支障がないようにあちこち書き換えたり削ったりしてありますが）

• レベルは，a:未受注，b:待機，c:制作中，d:売掛，e:入金，f:先払，g:貸倒。
• より現金に近いものが左上に来るようにソートしてあります。¥0 でないところを見ると，上のものほど左に来ていることがわかると思います。
• 下には，作業が残っているけれどすでに入金されたものと，貸倒しそうなものをまとめてあります。赤字になっているところは，先払でお金はもらってあるけれど，まだ残っている作業分です。貸倒分は伝票で「貸倒損失」の処理をするまで残しておきます。
• 実際には，この表のさらに右側に「見積額・受注済みの見積額・実際に作業した額・請求額・入金額 」とそれぞれ日付を入力する欄があり，それをもとにして，計算されるようになっています。

現在進行中の仕事の状況を示すA，B，Cあたりの金額が，会計の帳簿だけでは把握できない部分です。どこで取りこぼしがあったか，どこが遅れているか。それが分かると，営業の戦略決定や，受注済み案件の進行管理の参考資料にもなります。

また，このながれを見ると，将来（と言ってもせいぜい半年先までですが）の収入の予測が立てられます。「○月はいくらの収入がある」とか，「もっと仕事をとらないと○月はやばいぞ」とか。

実はこれ，発生主義をつきつめていったらこうなった，という表です。

関連

• 複式簿記で見えてきたこと | d-spica
• フリーランスの仕訳の豆知識 | d-spica
• 会計ソフト RingoKeiriTien | d-spica
• 複式簿記をするなら発生主義で | d-spica

複式簿記のつけ方に，現金主義と発生主義があります。現金が動かない取引まで記録するのが発生主義です。複式簿記をするなら，ぜひ発生主義で。

確定申告のために，発生主義で複式簿記を記帳し，貸借対照表と損益計算書を提出すれば，青色申告特別控除として65万円が控除されます（課税対象額から差し引かれる）。発生主義の複式簿記でないと控除額は10万円です。課税対象となる所得が900万円未満なら，税率は10％から16％くらいになりますから，発生主義の複式簿記をやることで55,000円から88,000円程度の節税になります。

いくら会計ソフトで複式簿記をやっていても，現金主義でやっていたのでは，65万円の控除は受けられません。というより，発生主義でやるために複式簿記が必要なのです。

現金主義と発生主義

現金の受け渡し（口座からの入出金も含めて）があった時点で伝票を作るのが「現金主義」です。基本的に 複式簿記で見えてきたこと で出てきた売掛金とか買掛金という考え方はなくなります。ASKULで事務用品を買ったのは，銀行振込をした日ということになります。未払いの買掛金があったとしても，帳簿上には現れません。

これに対して，現金の受け渡しだけに依らず，実際に取引がされた時点で伝票を切るのが「発生主義」です。ASKULで事務用品を買った例でいうと，事務用品を手に入れたときと，その支払いをしたとき，計2枚の伝票を作ることになります。事務用品を手に入れたときは現金は動いていませんが，これも記録するのです。

現金になっていないもの，現金以外のものまで見ようとするのが発生主義です。固定資産の減価償却などはそのよい例です。

複式簿記のキモ

たぶん，複式簿記のキモは，発生主義で経済活動を見るということだと思います。大雑把に「仕訳がむずかしい ≒ 現金主義では見えなかったところ」と言って間違いないでしょう。仕訳を覚えながら，見えなかったところが見えるようになる。もう一歩深く見る。

家計簿や小遣い帳などの金銭出納帳は，いわば現金主義で書かれたものです。そんな経験しかなかったぼくが，複式簿記をやるようになって発生主義に目覚めた，ということなのです。

ちなみに，科目を少々書き換えれば家計簿や小遣い帳も会計ソフトでできます。

関連

• 複式簿記で見えてきたこと | d-spica
• フリーランスの仕訳の豆知識 | d-spica
• 会計ソフト RingoKeiriTien | d-spica

複式簿記をするのに会計ソフト使うと便利です。伝票を入力していけば，いろいろな帳票が自動的に集計されて表示されます。経営状態を把握したり，確定申告の際にも役に立ちます。

ぼくの仕事は，仕入れもほとんどないし，売上も数万円，数十万円単位だし，1年間に取引のあるお客様も100に満たないですから，簿記をつけるのもそんなに大変ではありません。数万円も出して会計ソフトを購入しなくても，フリーのソフトで十分やっていけます。

ぼくが今使っているのは，Mac用の RingoKeiriTien というものです。大がかりではないし，勘定科目もいじれるので，快適に使わせてもらっています。補助科目を使うと，取引先ごとに分類もできます。

作成できる主な帳票は次の通り。

振替伝票

実際に仕訳をする伝票です。取引やお金にかかわることはすべて，この伝票に入力していきます。

出納帳

現金や預金口座ごとの出納帳です。選択したものが表示されます。
帳簿上の現金や預金の残高が実際と合っているかをチェックするときによく開きます。

合計残高試算表

貸借対照表（BS）と損益計算書（PL）が期間を指定して表示されます。
フリーランスの仕訳の豆知識 で説明したとおり，BSは現在お金がどのような形であるか，PLは期間内にお金がどのように動いたかがわかります。

年間推移試算表

貸借対照表（BS）と損益計算書（PL）が月毎に集計され，一覧表になって表示されます。
月ごとの比較や推移がわかりやすくなります。損益計算書（PL）で，売上はどれくらいあったか，経費として何に出費しているか，などを見ることは多いです。

補助残高試算表

売掛金・買掛金とそれにかかわる科目の残高が表示されます。
将来入るお金と出るお金です。収入や支出の予定を考えるときに開きます。自転車操業的にやっているぼくには，ここがかなり重要です。

仕訳日記帳・総勘定元帳／補助元帳

特定のものだけを見たいというときは，条件を指定してマッチするものを表示させます。

資産管理台帳

取得日，取得価額，耐用年数，定額率などを入力しておけば，減価償却費や簿価を自動的に算出してくれます。減少履歴に減価償却した分を記録できます。

「確定申告のため」という目的も大きいのですが，せっかくこうしたものが集計されるのですから，利用しない手はありません。これらの「数」を読んで，経営にうまく生かせるようにしたいのですが...。

確定申告

以前は，確定申告用の提出書類を手書きしていたので，よく計算ミスや記入ミスをして，新しいものを書き直したり，消し線を引いて訂正印を押したりしていました。18年度分からは，国税庁の 確定申告書等作成コーナー で入力して，プリントアウトしたものを提出しています。貸借対照表・損益計算書を含む青色申告決算書と，確定申告書が作成できます。基本的なところだけ入力すれば，後は計算してくれます。間違えても，入力し直して再度印刷すれば済みます。

伝票をちゃんと入力してあれば，確定申告はそれほど大変なことではありません。

関連

• 複式簿記で見えてきたこと | d-spica
• フリーランスの仕訳の豆知識 | d-spica
• 複式簿記をするなら発生主義で | d-spica

開業して間もないころ，複式簿記での「仕訳」のしかたがわからなくてちょっと困ったものをいくつか紹介してみます。個人事業主として確定申告する方むけです。

あちこちで少々かじった知識ですし，法改正なども行われていますので，不適切なところがありましたら，ご指摘ください。

事業主貸

帳簿上は，仕事をしている自分とそれ以外の自分は別ものです。預金口座も仕事用と個人用のものを持っています。仕事では「屋号」を名のり，領収書などにも屋号を書いてもらいます。で，仕事ではない自分，屋号のついていない自分，つまり私人たる自分を，会計上では「事業主」と言います。

「100,000円の制作費が入金された」というとき，入金されたのは仕事用の口座になります。これはまだ，ぼく個人が生活費や遊びに使えるお金ではありません。いわば給与のようにして，ぼくが受け取ったとき，初めてぼく個人のお金になります。

仕事用のお金を事業主のものにしたとき，仕訳では次のようになります。

「事業主貸」とは，事業主に貸す（渡す）ことです。

事業主借

事業主が，仕事のためのお金を補填するというふうなこともあります。この場合は「事業主借」，つまり事業主から借りる（もらう）ということになります。

ソフトウエア購入分を事業主が補填したことになります。

「事業主貸」の総計から「事業主借」の総計を差し引いた分が，実質的に事業主が受け取った給与ということになります。

仕事に合わせて科目を作る

固定資産の中に「ソフトウエア」「工具器具備品」という科目があります。ソフトウエアやハードウエアを購入した際，10万円以上のものは固定資産にします。ふつう，10万円未満のものは「消耗品費」として処理します。

が，ぼくの仕事の性質上，10万円未満のソフトウエアやハードウエアを購入することはよくあるので，この金額を把握しやすくするために，「ソフトウエア費」（「費」をつけておかないと固定資産の「ソフトウエア」と区別がつかなくなる）「ハードウエア費」という科目を設けました。

もうひとつ「システム使用費」という科目も作りました。レンタルサーバーやドメイン，インターネット接続，有料のWebサービスなどを利用するための費用です。

電気料等

SOHOでやっている場合，家賃・電気料・水道料・ガス代などは，仕事で使っている分と，個人で使っている分がある，ということになります。常識的に考えて妥当な割合で仕事分と個人分に分け，仕事分は経費にすることができます。

たとえば電気代の50％は仕事分というふうに。

貸方が「事業主借」となっているのは，事業主の個人の口座から，仕事分と個人分をまとめて引き落としてあるからです。

仕事用の口座から引き落とす場合は，次のようになります。

引き落とされた6,502円のうち3,251円が電気料，残りの3,251円は事業主の分ということです。

Suicaを使う

3,000円をチャージして往復の電車賃210円×2を使った，という場合。

と，チャージしたときに旅費交通費として処理することもできますが，実際に使ったのは420円で，まだ2,580円の残があることがわからなくなってしまいます。

Suicaにチャージした3,000円をとりあえず「仮払金」として処理します。（仮払金は流動資産の科目になります）　そこから往復の電車賃を支払います。こうしておくと，Suicaの残高も資産として扱えるようになります。

仮払金というのは，出張などに行く従業員に「とりあえずこれだけ渡しておくから」というふうなお金で，期間を置かずに，使途がはっきりしたところで処理しなければならないものです。長期間，仮払金のままだとよくありません。

そこで，仮払金でなく，流動資産のところに「電子マネー」というふうな科目を立てて処理するのもよいかもしれません。

電車賃を経費にするためには，どこに何の目的で行ったかが明確にできなければなりません。Suicaの利用明細をとっておくとよいでしょう。原則的には，仕事用のSuicaと私用のSuicaを使い分けるようにして，誤解を招かないようにしておくのがよいと思います。遊びに出かけたのだけれど，うっかり仕事用のSuicaを使ってしまったというふうなときは，

と処理します。

源泉徴収税の扱い

制作費の10％を源泉徴収税分として差し引かれる場合があります。このときの仕訳は次のようになります。

売掛金100,000円のうち10％差し引かれた90,000円が入金されて，10％は事業主貸となります。税金を納めるのは事業主です。この10,000円は事業主に渡った分が納税されていることになり，この手続を取引先で行ってもらったということです。

年末に取引先から「源泉徴収支払調書」（発行者によって名称は若干異なるかもしれません）というのが送られてきますので，これを保管しておきましょう。確定申告の際，納税すべき額からすでに納税済みの分を差し引くことができます。調書は納税済みの証明書の役割を果たします。

売掛金を回収できなかった

相手先の倒産などの理由で，売掛金が回収できなかった場合は「貸倒損失」として処理します。

元入金の算出

「元入金」というのは会社で言う「資本金」にあたります。事業主が仕事のために用意したお金で，毎年の利益が加算されていきます。期首（年度初め。個人事業主の場合1月1日）に計上して期末（年度末。個人事業主の場合12月31日）まで変動しません。

繰り越した資産と負債を元にして，

元入金 ＝ 資産総額 － 負債総額　...A

あるいは，前期末の決算を元にして，

今期元入金 ＝ 前期元入金 ＋ 前期青色申告特別控除前の所得金額
＋ 前期事業主借 － 前期事業主貸　...B

と計算します。

複式簿記で見えてきたこと にある「試算表」を上下に分けると「貸借対照表」（BS：Balance Sheet）と「損益計算書」（PL：Profit and Loss Statement）ができます。BSのほうはお金（証券・固定資産・債権・債務などを含めた）がどのような形であるかを表しています。PLのほうは期間内のお金の動き（出入り）を表しています。

Aの計算式はBSから算出するものです。Bの計算式は前期のPLから利益を算出し，元入金に加算するものです。収益から費用を差し引き（青色申告特別控除前の所得金額），さらに事業主に渡った分を差し引いたものが，事務所（店）に残った利益ということです。

会計ソフトを使っている場合，元入金は期首処理で金額だけ入力すればいいようになっています。または，前期からの繰越処理をすれば自動的に計算されます。

減価償却

147,000円で購入したパソコンは耐用年数4年の「固定資産」になります。 減価償却資産の耐用年数等に関する省令 で，耐用年数が定められています。

まず購入した時点で。

「工具器具備品」は固定資産の科目になります。費用（経費）にはなりません。そのかわり，毎期末ごとに使った分だけ費用として償却する処理をします。

減価償却費は次のように計算します。（個人事業主は特に申請しない限り「定額法」で算出する）

購入価格 ÷ 耐用年数 ＝ 147,000 ÷ 4 ＝ 36,750円

または

購入価格 × 償却率 ＝ 147,000 × 0.25 ＝ 36,750円

となります。定額法の償却率も 減価償却資産の耐用年数等に関する省令 に定められています。耐用年数の逆数になっています。

でも，パソコンを購入したのが4月だったので，今期は9ヶ月，つまり0.75年分（9ヶ月 ÷ 12ヶ月）しか使っていません。そこで，今期の減価償却費は

36,750 × 0.75 ＝ 27,562円

とします。

翌期，このパソコンの帳簿上の資産価値（簿価）は，購入価格から減価償却分を引いた 119,438円（＝ 147,000 － 27,562）になります。翌期の期末にまた，減価償却します。今度は丸一年使いますから，減価償却費は36,750円です。

購入から4年目の期首には簿価が9,188円になります。その期末に36,750円の減価償却はできませんから，1円だけ残して，9,187円を減価償却します。1円を残すところがポイントです。残存価額といって，耐用年数が過ぎてもまったく価値がなくなるわけではない，ということなのです。

この算出方法は，平成19年4月1日以降に購入したものに適用されます。（法改正によって計算方法が変わった）　それ以前に購入したものは，1年間の減価償却費を，

減価償却費 ＝ 購入価格 × 0.9 × 償却率

と計算します。購入価格の90％を減価償却していくということで，10％が残存価額となります。

今年の4月に開業したのだけれど，前から使っていたパソコンで仕事をしている。という場合も，購入から4年が過ぎていなければ，固定資産として減価償却できます。開業時の簿価を算出して，固定資産の工具器具備品として計上します。今期末には4月から12月の0.75年分を，翌期からは1年分を減価償却していきます。

開業費

4月に開業して仕事を始めたけれど，それ以前に準備のための出費をしているというときは「開業費」として計上できます。

「開業費」は繰延資産の扱いになります。費用（経費）にはなりません。そのかわり，5年以内の定額法で償却して経費とします。固定資産の場合と似ています。

この場合，期末に一括償却したことになります。

年度をまたいでいる場合も，前年度の出費を開業費とすることができます。

「独立して開業しようかな」とお考えの方は，仕事に関連しそうな出費をしたら，領収書などを保管しておくことをおすすめします。

固定資産や繰延資産の償却について

繰延資産には開業費の他に開発費や試験研究費などが含まれます。ある年度に大きな設備投資をしたとか，開発・研究に力を入れたとすると，その年度の出費はいつもより大きなものになります。通常の売上があり，今後収益を上げる可能性も十分あるのに，その出費のために，計上した利益が極端に少なくなるとか赤字になるということも起こります。これでは，経営の実態を正しく伝えられません。

設備投資の場合，購入した機械工具は数年にわたって利用され，売上を生みます。研究・開発の成果は徐々に現れ，数年にわたって活用されるものです。機械工具の生産性や研究・開発の成果を一度「資産」とし，その出費を数年に分けて経費とすることで，経営状態をできるだけ正しく伝えようとするのが「償却」という考え方です。

参考

• 独立開業[to-R]
• 勘定科目一覧表(個人事業主用)　－勘定科目を語句から検索！－

関連

• 複式簿記で見えてきたこと | d-spica
• 会計ソフト RingoKeiriTien | d-spica
• 複式簿記をするなら発生主義で | d-spica

フリーで仕事をするようになってから覚えたもののひとつに，「複式簿記」があります。と言っても，帳簿を付けたり確定申告をするために，独学でちょっとかじったという程度なのですが。

お金の流れを収入と支出とその残高という項目で記録しているときにはあまり意識していなかったことが，複式簿記では見えてきます。

複式簿記の基本はこうです。

左に借方（debit），右に貸方（credit）を置き，勘定科目と金額を書く。このとき，借方と貸方の金額は常に等しい。（貸借平均の原理）

右側は，いかにしてそのお金を得たか「資金の出所」が書かれ，左側は，どのような形で手元にあるか「資金の所在・用途」が書かれます。

これを取引ごとに記録していくのが「仕訳」です。

勘定科目は大きく5つに分類され，さらに細分化されていきます。

資産

要するに金目のもの。現金，預金から始まって，在庫品や固定資産，証券や債権など。

負債

借入金などの債務のほかに，まだ仕事はしていないけど先にお金をもらったときなども，仕事をして売上を計上するまでは負債となります。

資本

商売の元手。会社でいえば資本金，個人事業主の場合は「元入金」。

費用

仕事をするうえで必要な出費。いわゆる「経費」です。

収益

売上のほか，固定資産や証券を売った利益とか，利息などが含まれます。

上の図は「試算表」というものです。左側は借方，右側は貸方になり，これらを総計すると左右が等しくなります。

会計ソフトで仕訳をしていけば，

• 仕訳帳
• 勘定元帳
• 試算表
• 貸借対照表
• 損益計算書

などが自動的に集計されるので，とりあえず仕訳がきちっとできれば，実務はこなせるようになります。

具体的には

具体的な事例で，取引を仕訳してみましょう。

3,150円分の事務用品を現金で買った。

資金の出所はお店（事務所）の現金。これで事務用品を手に入れました。

現金は資産のひとつで，試算表では借方に入ります。これが反対の貸方に書いてあるときは，資産が減ったことを意味します。事務用品費は費用になります。

見方を変えると「現金3,150円が，同じ価値を持つ事務用品に形をかえて手もとにある」ともとらえられます。しかし事務用品は使うと減ったり，痛んだりして3,150円の価値はなくなります。「短期間で価値（サービスを受ける権利なども含めて）がなくなるもは費用」と考えて差し支えないと思います。

3,150円分の事務用品をASKULで買った。

買掛金というのは，所定の期日までに支払わなければならないお金（債務）で，負債になります。ツケで買ったということです。04-10，預金口座からの振込でその債務を果たしました。

試算表では負債は貸方のほうにありますが，反対の借方に書いたとき（04-10の行）は負債が減ったことを意味します。

振込手数料も費用（経費）になります。

制作費100,000円を現金で支払ってもらった。

売上は収益のひとつです。

制作費100,000円の請求書を送り，翌々月銀行振り込みしてもらった。

売掛金は所定の期日までに支払ってもらえるお金（債権）で，資産になります。05-31，それを回収したことになります。

売掛金と買掛金の相殺

ぼくがAさんの制作をお手伝いして，100,000円の請求をしました。
翌月，Aさんにぼくの制作50,000円分のお手伝いをしてもらいました。
翌々月，Aさんに差額の50,000円を振り込んでもらいました。

最後の行は，売掛金のうち50,000円を買掛金に充当して，相殺したことを表しています。

複式簿記で見えてきたこと

• 債権や債務も，資産・負債で，取引の対象になります。まだ入金されてないけれど100万円の売掛金（資産）があるとか，まだ支払っていないけれど20万円の買掛金（負債）がある，ということもわかるようになります。
• 「取引」というのは，等価なものに形を替えていくことです。制作という仕事が100,000円の売掛金に替わり，売掛金は100,000円の現金に替わる。
• 様々な取引でいろいろな人とかかわりながら形を替えていく。口座に100,000円の入金があったとする。これは一時，ぼくが口座預金という形で得た（借りた）に過ぎず，次は別の誰かが作った製品の対価として，その人の口座に渡す（貸す）ことになる。こうした営みが幾重にもつながった大きな循環が，世の中にはある。

財布や口座からいくら出た，いくら入ったということくらいしか見ていなかったぼくが，複式簿記をやってリアルに（数字として）見えるようになったことです。

関連

• 複式簿記で見えてきたこと | d-spica
• フリーランスの仕訳の豆知識 | d-spica
• 会計ソフト RingoKeiriTien | d-spica
• 複式簿記をするなら発生主義で | d-spica

CSS3で定義される nth-child() 疑似クラス。これが使えるようになると，HTMLファイル，CSSファイルのメンテナスが楽になるだろうな...と思うのです。

どんな具合か，ちょっと試してみました。

英文ですが，詳細は以下から。W3Cの Working Draft（草案）ですので，今後変更されることがあるかもしれません。

• Selectors - 6.6.5. Structural pseudo-classes - :nth-child() pseudo-class

その要素が何番目の子要素かによって，該当するものにだけ，CSSをあてることができます。

たとえば，セレクタにul li:nth-child(2n)，またはul li:nth-child(even)というふうに記述すると，リストの偶数番目のアイテムに対してCSSを適用できます。奇数番目ならul li:nth-child(2n+1)，またはul li:nth-child(odd)となります。

ul li:nth-child(4n+1)と書くと，4つおきに1, 5, 9, 13番目の li要素が該当することになります。ul li:nth-child(6)と書くと，6番目の li要素だけが該当します。

nth-child() 疑似クラスに対応しているブラウザも出てきました。

• Safari 3
• Opera 9.50β

（Firefox 3RCでは後述のCSSは効きませんでした。IE 8βは未確認）

使用例

Safari 3で表示したキャプチャを載せておきます。

カレンダー：土・日・祝日に色を

table.calendar tr th:nth-child(6) {
  background: #99F;
}

table.calendar tr th:nth-child(7) {
  background: #F99;
}

table.calendar tr td:nth-child(6) {
  color: #009;
}

table.calendar tr td:nth-child(7),
table.calendar tr:nth-child(5) td:nth-child(1) {
  color: #900;
}

1行目の曜日は th でマークアップしてあります。この6番目（土）と7番目（日）は，背景色を変えて指定しています。

日の数字は td でマークアップしてあります。6番目と7番目のテキスト色を指定しています。

祝日の「海の日」は7月の第3月曜です。tr:nth-child(5) td:nth-child(1)，つまり5番目の tr の中の1番目の td がこれにあたります。

カレンダー：休業日に背景色を

上のCSSに以下を追加します。

table.calendar tr td:nth-child(7),
table.calendar tr:nth-child(2n+1) td:nth-child(4) {
  background: #FCC;
}

table.calendar tr:nth-child(6) td:nth-child(7) {
  background: #FFF;
}

td:nth-child(7)は日曜日に該当します。tr:nth-child(2n+1) td:nth-child(4)は奇数番目の tr の中の4番目の td にあたり，隔週木曜日に背景色が入ります。

27日の下は空欄になっていますが，ここにも背景色が入ってしまうので，#FFFを指定しています。

floatを4つおきにclear

ul, li のリストでマークアップしてあります。li にはそれぞれ商品画像・商品名・価格が入っています。

<ul class="product-list">
  <li><a href="#"><img src="figure/dummy-100.gif" alt="ダミー" width="100" height="100" /><br />
    <em>商品名</em></a><br />
    <span class="price">価格 0,000円</span></li>
  ...

ul.product-list {
  overflow: hidden;
  width: 430px;
  border-top: solid 3px #666;
}

ul.product-list li {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  width: 100px;
}

ul.product-list li:nth-child(4n+1) {
  clear: left;
  margin-left: 0;
}

li:nth-child(4n+1)は4つずつ並べたときのいちばん最初の li にあたります。これを clear して，左の margin を 0 にしています。きれいに4つずつ並びます。

floatを3つおきにclear

HTMLはそのまま，CSSをちょっと書き換えるだけでこんなふうにもなります。

ul.product-list {
  overflow: hidden;
  width: 320px;
  border-top: solid 3px #666;
}

ul.product-list li {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  width: 100px;
}

ul.product-list li:nth-child(3n+1) {
  clear: left;
  margin-left: 0;
}

書き換えたのは，ul の width の値と nth-child の 3n+1 のところだけです。同じ要領で，540px，5n+1 と書き換えると5つずつ並べることができますね。

nth-child() が使いたい理由

floatさせて4つずつ並べる場合，1, 5, 9, ...番目の li に class="head-item" などと class をふり，これにCSSをあてる...という方法でもできないことはありません。

表に1行おきに背景色を入れるような場合も，奇数番目の tr に class="odd" を，偶数番目の tr に class="even" をふっておいたり...。

これらの方法だと，途中に商品を追加する（あるいは削除する）とか，表の途中のデータを1行そっくり抜く（あるいは挿入する）というとき，それ以降にある class を書き直さなくてはなりません。

nth-child() が使えるようになれば，こうした class をふる必要はなくなります。HTML上で追加しようと削除しようと順序を入れ替えようと，何番目になるかを気にすることはありません。

また，HTMLを固定したまま，見栄えをいろいろに変化させるときにも便利です。4つずつ並んでいたものを3つずつにする，1行おきに背景を入れていたものを3行ごとにする，ということもCSSの対応だけですみます。

参考

サンプルページを用意しましたので，あわせてご覧ください。

• CSS - nth-child()疑似クラス | Try | d-spica

関連

• Re: CSSによるデザインワークと相性のよいHTMLって？

IE との兼ね合いで，font-size は%で指定しておくのが，いちばん無難だと思うのですが，IE6, 7 にちょっと痛いバグがありました。

小さなサイズの文字が指定どおりの大きさにならないのです。

まず，font-size のページを IE6 または IE7 でご覧ください。

順にフォントサイズが小さくなっていくはずなのですが，74%から72%あたりの日本語のフォントサイズが一旦大きくなっています。その後71%から 60%のところまで，日本語フォントはサイズが変わっていません。

FIrefox の場合と比べると，よく分かるかもしれません。

%で指定された font-size は，最終的にpxに変換され，端数処理して整数値になったものが表示されます。IEの場合，11.5px以上12px未満になるところは，本来12pxで表示されるはずですが，13pxになっています。9.5px以上11.5px未満のところは，すべて12pxで表示されています。

emで指定した場合も同様の結果になりました。

フォントサイズを11px以下にすることの是非も少々気になりますが...。

解決法1：UTF-8にしない

まず，文字コードをUTF-8以外の日本語コード，Shift_JISやEUC-JPにすることで解決します。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

しかし，XHTMLでXML宣言を省略する場合（文字コードがUTF-8なら省略可）もあるし，最近はUTF-8が主流になりつつある状況を考えると，あまり好ましい方法とは言えません。

解決法2：日本語フォントを指定する

font-family で最初に日本語フォントを指定することでも解決します。（英字フォントの後に日本語フォントを指定した場合は解決しないようです）

個人的には，特別な事情がない限り，font-family に特定のフォントを指定するのは「余計なお世話」という感じもします。11px以下になるところにだけ，次のように指定するのがよいかもしれません。

div#footer ul.nav {
  font-size: 71%;
}

* html div#footer ul.nav {
  font-family: 'ＭＳ Ｐゴシック', sans-serif;
}

*:first-child+html div#footer ul.nav {
  font-family: 'メイリオ', sans-serif;
}

12pxで表示したいときは，pxに変換したとき12px以上12.5px未満になる値を指定しておけば大丈夫です。

参考

font-size指定については，以下も参考にしてください。

• font-size指定

margin にはマイナスの値を入れることができます。マイナスの値を持つ margin を「ネガティブマージン」と言ったりします。

あまりむずかしくなく，すぐに使えそうなネガティブマージンを紹介してみましょう。

本文の左に見出しよりも大きな余白をとりたいというとき。

<div class="section">
  <h3>見出し</h3>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p>
</div>

div.section {
  padding-left: 15px;
}

div.section h3 {
  margin-left: -15px;
  padding: 5px 10px;
  background: #999;
  color: #FFF;
}

通常は横方向の margin をとると，余白ができた分，ボックスが中に縮まるのですが，ネガティブマージをとると，外に広がったようになります。

まず親要素となる div.section に padding-left をとり，左側に余白をとります。h3 にネガティブマージンをとって左側に広げます。

見出しを除いた本文のところを改めて div で囲い margin-left や padding-left をとったり，p. ul, ol, dl, blockquote, pre, table, ...といったそれぞれの要素に margin-left や padding-left をとるということをしなくても，左に余白が入れられます。

上と同じXHTMLでこんなふうにもなります。

div.section {
  padding: 0 15px 10px;
  border: solid 1px #666;
}

div.section h3 {
  margin: 0 -15px;
  padding: 5px 10px;
  background: #999;
  border-bottom: solid 1px #666;
  color: #FFF;
}

こちらは，左右の padding をネガティブマージンで解消しています。

ネガティブマージンで前の要素の横に続ける

フッターなどで。

<div id="footer">
  <p><a href="http:www.d-spica.com/">d-spica home</a> | <a href="http:blog.d-spica.com/">d-spica blog</a></p>
  <p class="credit">Copyright&copy; d-spica.</p>
</div>

div#footer {
  border-top: solid 2px #999;
  padding: 20px 5px;
  line-height: 1.5;
}

div#footer p {
  margin: 0;
}

div#footer p.credit {
  margin-top: -1.5em;
  text-align: right;
}

縦方向の margin は，ボックスの上下の間隔を作りますが，ネガティブマージをとると，間隔が詰まることになります。

後のほうの p.credit を，ネガティブマージンでちょうど1行分上にあげて（詰めて）います。

前回，dtをfloatする場合の注意点 で紹介した，dt と dd を横並びにするのも，ネガティブマージンできます。

<dl>
  <dt>2008-05-12</dt>
  <dd>ページ5を更新しました。テキストテキストテキスト。</dd>
  <dt>2008-05-10</dt>
  <dd>ページ4を更新しました。テキストテキストテキスト。</dd>
  <dt>2008-05-07</dt>
  <dd>ページ3を更新しました。テキストテキストテキスト...。</dd>
  <dt>2008-05-06</dt>
  <dd>ページ2を更新しました。テキストテキストテキスト...。</dd>
  <dt>2008-05-04</dt>
  <dd>ページ1を更新しました。テキストテキストテキスト。</dd>
</dl>

dl {
  line-height: 1.5;
}

dl dt {
  width: 7em;
}

dl dd {
  margin: -1.5em 0 10px 7em;
  margin-bottom: 10px;
}

floatして横並びにするよりも便利な場合が多々あります。

IEでのネガティブマージン

本来なら，このように表示されるはずなのですが...。

<div class="section">
  <p class="first">12345678901234567890<br />
    12345678901234567890</p>
  <p class="second">12345678901234567890<br />
    12345678901234567890</p>
  <p class="third">12345678901234567890<br />
    12345678901234567890</p>
  <p class="fourth">12345678901234567890<br />
    12345678901234567890</p>
  </div>
</div>

div.section {
  margin: 10px;
  border: solid 10px #CCC;
  padding: 10px;
  width: 372px;
}

div.section p {
  padding: 5px;
  border: solid 1px #666;
  background: #F3F3F3;
}

div.section p.first {
  margin: 10px -10px;
}

div.section p.second {
  margin: 10px -20px;
}

div.section p.third {
  margin: 10px -30px;
}

div.section p.fourth {
  margin: 10px -40px;
}

IE6では，ネガティブマージンをとった要素を包含する祖先要素に width が明示的に指定してあると，その祖先要素の padding辺を越えた部分が表示されなくなります。

IE7では，左側は表示されますが，右側が表示されなくなります。

参考

各ブラウザでの表示を確認できるように，以下に同じ内容をまとめておきましたので，参考にしてください。

• CSS - ネガティブマージン | Try | d-spica