シングル・カラムをベースに、ある程度ブラウザーの描画領域が広い場合は記号をぶら下げたりとかfigcaptionの飛び出しとか少し余白を有効活用する感じに少し前から変更している。当初は3:9でカラム分けていて、これだと右に寄り過ぎかなーという感じだったので、試しに2:9:1として右に少し余白を取るようにしたら少し安定した感じだけど、もっとガッと右に寄せた方が良いのかもしれない。ロゴも2:9:1のカラム分けに合わせてサイズをデザインを変更した。
3:9でやってた頃に試していた、コード・ブロックだけ12カラムをフルに使うように飛び出させる奴はついに「読みづらい」とはっきり言われたのでお蔵入りにした。飛び出るというデザイン自体は悪くないと思うんだけど、一気に視線を左に動かさないとならないのでやはり読みづらい。画像などの場合は多分その限りではなくて、飛び出したりしてても普通にかっこ良く見やすい。読ませることを目的としたコード・ブロックでやるのが間違いということだと思う。今は背景を変えるのも止めて少しインデントするだけという形にしている。有名所だとA List Apartとかと同じ……というかMarkdownみたいなもんだ。
一番上の三色使った線はborderとbox-shadowプロパティーの組み合わせで作った。
body {
border-top: 0.25em solid #1c5263;
box-shadow: inset 0 0.25em 0 #589,
inset 0 0.5em 0 #9ac0cc;
}borderプロパティーと違いbox-shadowプロパティーはwidthやheightプロパティーに影響を与えない上、内側にも外側にも引け、更に多色展開も可能となっております。まぁ最近は「* { box-sizing: border-box }最強じゃね？」みたいな感じで、widthプロパティーへの影響とかはそれで解消するのが良いんじゃないかみたいな感じですけど。
他で一番大きな変更点は小見出しのmargin-bottomを大幅に減らしたとこ。本ではよく見かけるレイアウト。例えばCSS3 For Web Designersではこういう感じになっている。
見出しの下の余白が少ないレイアウトでは段落間のマージンを省きインデントすると詰まり過ぎてて読みづらい感じになったので、段落間のマージンは普通な感じに戻した。日本語にはやっぱり合っていないのかも。
not printはまだ直してない。