許容できないくらいHTMLのエラーが出ていますのでもろもろご注意ください。

CSS Nite LP9 連動 第2回コーディングコンテストが開催されています。僕も応募しましたのですが、取り組んだ際の反省などを。

いろいろデカイこと言ってすみません

えーっといきなり謝ってしまいますが、「賞を狙っているんですよー」などと大きなことを言ってしまいすみませんでした。何名かの、すでに応募作品を公開されているを見る限り「あー、ここはこうやれば良かったのか」などなど反省点がわんさかありまして、柄にもなく自信をなくしました。

残念な点

• ページ上部の影ですが、body:afterなんかでやるのが一番スマートっぽいですね。気づかずにbodyにたいしてbox-shadow: insetを使ってます。さらにそうするとページの左右にもぼかしたぶんだけ影が出てしまったので強引に消したりしています。さらにその強引さがゆえに思いもかけないことが起こったりします。
• rgbaを利用する部分ですが、どの色をどれくらいの透明度にしたら思い通りの色になるのか良くわからなかったので、実際のデザインと比べると微妙に（大幅な部分もありますが）色が違ってたりします。
• HTML5からはtime要素があるんですね。知りませんでした。
• 一応メディアクエってiPhone用とか用意しておきましたが、僕のMacのiPhoneyではスクリーンサイズが大きいのでメディアクエった感じにはなりません。とりあえずスクリーン用のものを取り外して普通にlink要素でiPhone用を読み込んで調整しましたが、最終的にiPhoneでメディアクエリーが適用されているのかは未確認です。
• グローバルナビの四隅が若干ジャギっていますね。背景はすべてa要素に一括で指定しているのですが、liとaに分けた方が良かったのかなー。でもこの辺ってブラウザが悪いよねと思ってそのままに。

その他、マイクロフォーマットとか全然指定しないんですね、とかもあると思いますが、その辺は僕の仕様です。

結構気に入っている箇所

• Non JavaScript！つっても僕があまり得意ではないので使用していないだけなのですが。
• 画像拡大部分の「target-box」。Non JavaScriptということで拡大画像表示はtarget擬似クラスを利用してdisplayの値を切り替えています。ブラウザウィンドウが小さい方ですと、画像下部に配置した画像間のリンクと画像を閉じるリンクが見きれてしまいますので、画像自体にも画像を閉じるリンクを指定しています。で、最初はもっと一意な感じのIDを指定していたのですが、なんだかthickboxなんかに対抗するという意味でも、ライブラリみたいなクラス名を指定しておいたというのが自分的には一番グッと来ている部分だったりします。
• クリック出来る範囲は広い方が良いですよね。ということで、HTML5からaの中にいろいろ要素を持てますので、hnとpとかをまとめてaでククッている箇所が結構あります。便利だなーと思う反面、最後にNVDAで読み上げてみると、都度都度「リンク」と読み上げてから段落なんかが読み上げられるので、これはどうしたものかと今でも悩みどころでもあります。
  あ、クリック出来る範囲は広い方が良いですよねの精神のもと、お知らせセクションの「重要」などのアイコンっぽいのもaに入れてしまっているので、アイコンと後続の文字の間にもunderlineが引かれてたりしますが、デザイナーさんからダメだよ！って言われたらすぐに直します。
• Operaのスモールスクリーンモードが結構良い感じかなーと。ご確認ください。
• あ、あとIE用のCSSファイル名とか。IEさん、ごめんなさい。

こんな感じでしょう。最後に僕が応募したものを以下に置いておきます。

応募したもの

http://maboroshi.biz/clearskysource/cssnite-lp9-contest2/

注釈

サイト内検索を利用するとそのままsix apartさんのものを利用できるようになっていますのでご注意ください。

アクセス解析は当ブログのものを仕込んでいますが、応募したものではsix apartさんが利用しているサイトカタリストのものになっています。