今回は高橋さんのテンプレートの補足解説です。
アイデアはたいへん面白いのですが、いろいろな要素をまとめあげる段階で何か間違ったか勘違いされたのではないでしょうか。素案としてはいいので、完成度を高めていただきたいところ。
感想集には上記の通り書いたのですが、文中の間違い
という表現が誤解を招いたようで、文法ミスがあったらダウンロードしたユーザに申し訳ないので詳細な説明をくださいといったメールをいただきました。じつは、文法ミスはあります。たしかにある。ただ、それは致命的なものではないし、私は文法ミスを指して間違い
といったわけでもないので、「お気になさらず」と返事をしたかと思います。
ただまあミスはミスなので気になるでしょうから、簡単に解説いたします。目立つ文法ミスは、XHTML における空要素の扱いです。HTML なら <br> でよいのですが、XHTML では空要素もきちんと / で閉じる必要があります。したがって、<br /> と書くわけです。meta 要素や link 要素も同様に <meta 中略 /> や <link 中略 /> と記述しなければなりません。他は Another HTML-lint でご確認ください。
結局のところ、ミスを全部きちんと潰すには HTML について相当多くのことを学ばねばなりません。テンプレート作者がみなそこまで頑張る必要があるかというと、私は疑問に思います。適当なところで見切りをつけてもよいのではないでしょうか。meta、link、br、img の4要素をきちんと閉じるだけで、問題の過半は解決されます。
さて、ugetsu-green はかなり挑戦的なアイデアを持ったテンプレートです。紫と緑という強い色を2つも導入した配色、夜の都会と水玉という関連性のよくわからないモチーフの選択……。角丸幅固定2段組中央寄せのレイアウトはベーシックですが、中に詰め込もうとしているものがなかなか厄介です。
まずレイアウトから。固定幅角丸の処理はバッチリなのですが、ちょっと惜しいのが上端と下端の処理。せっかく角丸にしたのに窮屈に見えるのは何故でしょうか? それは、上辺と下辺を表示領域の上端と下端にくっつけてしまっているからです。角丸を使う場合の常識として知っておいていただきたいのですが、上下左右を問わず、角丸を使ったら周囲に余白を設けてください。本の少しでよいのです。3px とか 5px だって構わない。とにかく隙間を作らないと、窒息します。
今回は角の部分をグレーで塗って角を丸めたように見せているのでしょうから、ヘッダーを 5px くらい縦長にし、背景画像の上端に 5px のグレーの帯を追加してください。それで上端に 5px の隙間ができたように見えます。フッターも同様に処理しましょう。
配色ですが、今あらためて見てみると、決して悪くないですね。緑色をもう少し、夜の雰囲気に合わせて暗くしてみてもよさそうだとは思いますけれども、試しにやってみたらかなり難しかったです。だから今のままでいいのかなあ。一方、オレンジの使い方はうまいですね。地平線近くの月はオレンジ色に見えますし、夜の街の明かりはやはりオレンジ色に見えます。そこから展開してリンク色をオレンジとし、記事領域の背景に薄い黄色を持ってくるあたり、素晴らしいセンスです。
そしてじつはオレンジと緑は相性がよくて、だから緑の水玉模様と薄黄の記事領域の取り合わせがきれいに見える。緑色を暗くしていくと、どうもそのあたりがうまくない。それで悩んでしまったのですね。
「月・夜の街・灯り→グレーと紫とオレンジ」そして「紫とオレンジに調和する色としての緑」この組み合わせはバッチリなので、となると水玉模様さえモチーフに合致する形で処理できれば完璧なのですが。石材の表面のようなテクスチャとか、あるいは地図のようなテクスチャなら、いけるかもしれないですね。ただし水平・垂直では水玉模様のやわらかさに明らかに劣るのでうまくいかないでしょう。斜めを活かした都会風の模様を作るか見つけるかできれば……。
最近の作品も拝見しました。文法ミス以外は、いうことないです。躍動感にあふれており、文句なくカッコいい。きれいに、よくまとまっています。背景画像とスタイルシートでしている各部の配色の対応も完璧。