コーディングコンテストの種明かし
2007年5月15日
CSS Nite連動企画コーディングコンテストで鬼頭賞をいただきました。受賞できるなんて思っていなかったのでびっくりです。本当にありがとうございます。
このコンテストに参加しようと決めたとき「どうせやるなら何か挑戦的なことをやろう」と思いました。「他の人はやらないだろうな」ということをあえてやってみました。
終わってから振り返れば「こうすればよかったなー」という部分はいろいろあります。ブラウザによっては角丸部分がずれていたり、印刷用スタイルシートも最低限の指定だけだったり・・・。時間との闘いで妥協した部分もあります。反省材料も多々あるのですが、それも自分の糧として今後に活かしていこうと思います。
さて、折角データが公開されたので自分の手の内(といってもそんなにないですけど･･･)を明かしてみようと思います。
作る前にやったこと
自分はいつも作る前に必ずデザインを見ながら設計を考えます。CSSを用いてレイアウトをする際にどのように組んでいくかということを頭の中、もしくは紙に書きながらシュミレーションします。その際に難しそうな部分や、ポイントとなる部分をメモしておきます。トップページと下層のページを見比べて、どこが共通の部分でどこが異なるのかということもしっかり考えておきます。これをやるとやらないのでは実際の作業スピードがかなり変わってくると思います。
角丸の実現方法
今回他のみなさんも同じだと思うのですが、苦労したのはやっぱり「角丸」。普通にやるならばdivやspanなどを用いて背景画像で指定してあげるのが最も一般的なやり方だと思います。しかし、それはHTMLに余分なタグを追加することになりますし、手間も時間もかかります。（curvyCornersを使用した場合もJavaScriptによるDOM操作で不要なdivが生成されます）そこで今回はjQueryのライブラリであるcurvyCornersを使ってみました。指定方法はいたって簡単。角丸にしたい部分を下記のように指定するだけ。
$(function(){
$('#topicpath').curvy("3px");
}firefox,IE7などではかなりキレイな角丸を作ることができます。IE6だと若干ずれます。
ロゴ画像のでっぱりは絶対配置で
いやらしいことに、今回のデザインはロゴ画像がはみ出している部分があります。コーダー泣かせのデザインですね(苦笑)これをうまく表示させるにはいくつかやりかたがあると思うのですが、今回僕が使ったのは絶対配置を使う方法。position:absoluteで通常フローからはずし、かつ位置を調整します。外枠のdivを広げたりする必要がないので楽だと思います。
この他にも絶対配置を各所に使っています。floatだけでは難しい部分も、絶対配置と組み合わせればかなり柔軟にレイアウトを組みやすくなると思います。絶対配置は基点となる祖先ボックスをposition:relativeでコントロールすることができます。このあたりは実践Web Standards Design Web標準の基本とCSSレイアウト&Tipsに詳しく解説されていますので、興味のあるかたは是非。(第2版が出たそうです)
アクセシビリティへの配慮
profile.txtには「アクセシビリティに配慮しました」と書いたのですが特別なことはしていません。普通にマークアップしただけです。あえて挙げるなら画像のaltをどうするか考えたくらいでしょうか。
音声ブラウザ用に「ここからメニューです」というようなテキストを入れてあげた方がより親切だと思います。しかしそういった特別なテキストを入れずとも、音声ブラウザには見出しに飛ぶ機能があるので、文章構造と画像のaltを適切にマークアップしてやれば「最低限のアクセシビリティ」は確保できます。そのため今回は音声ブラウザ用に特別なテキストを入れることはしませんでした。
Web上にある有用なリソースを使う
鬼頭さんから頂いたコメントにもありますように、今回YUIやjQueryといったWeb上に転がっている有用なリソースを用いました。速く、便利にできるのであれば積極的に使ってみる。個人的にjQuery推進派(？)なのでjQueryとかもっと使われても良いと思うのですが･･･。
終わってからの感想
自分自身とても勉強になりました。改めてコーディングというものに対して考えるきっかけにもなりました。自分なんかまだまだ技術的にも至らぬ点が多々あり、日々勉強の毎日です。今回評価されたのもプラスアルファの「挑戦した部分」なのかなぁと思っています。
他の受賞者の方のデータなどを参考にしつつさらに精進していこうと思います。今後コーディングコンテストが第2弾、第3弾といったように続いていってくれたら良いですね。
最後に平澤さん、鬼頭さん、審査員の皆様、本当にありがとうございました。
この場を借りて御礼の挨拶とかえさせていただきます。
- このエントリーのトラックバックURL
- http://www.lllcolor.com/web/71.html/trackback
- スーパー肩パッド - 2007.05.15 -PM 8:01
はじめまして。blogいつもみています。
僕もjQueryのcurvyを使って角丸やろうと思ってたのですが、ズレズレでゲバゲバでした。しかし、あれだけ苦労したレイアウトだったので、みなさんの苦労話や秘策を見れるとニヤニヤしてしまいますね。詳しい解説ありがとうございました！
- iwaim - 2007.05.16 -AM 2:44
鬼頭賞おめでとうございます。
> しかし、それはHTMLに余分なタグを追加することになりますし、
細かい話ですが、curvyCornersでもレンダリングするHTMLには余分な要素が追加されてしまうのではないでしょうか。
curvyCornersのポイントは、やはり鬼頭さんのコメントにもあるようにライブラリ活用による速さと確実性なのではないかと。後は、元のソースが煩雑にならない点かな。
JavaScriptでDOMツリーを操作した後もHTML文書であるということは留意した方がいいと思う。- A.Kawashima - 2007.05.16 -AM 9:29
＞スーパー肩パッドさん
はじめまして
いやはや、なんだか自分の部屋を他人に見せるようで恥ずかしいですね(苦笑)
反省点をいかしつつ、今後に繋げていこうと思います。コメントありがとうございました。＞iwaimさん
コメントありがとうございます。
おっしゃる通りcurvyCornersは不要なdivを生成するので「余分な要素が追加される」ことになりますね。記事を修正しておきます。JavaScriptでDOMツリーを操作した後もHTML文書であるということは留意した方がいいと思う。
なるほど、勉強になります。DOMツリー操作後のHTMLについても注意を払う必要があるということですね。
私が不勉強なだけかもしれませんが、あまりこの手の議論はみかけたことがありません。DOMによるHTMLの操作はどの程度まで許容されるんでしょうか？
細かい事を言えばLightBoxを使ったり、DOMでCSSを操作すること自体style属性で操作しているので「HTML文章」として見たときにどうなんだろうと疑問がわきます。- iwaim - 2007.05.16 -PM 12:34
> 私が不勉強なだけかもしれませんが、あまりこの手の議論はみかけたことがありません。DOMによるHTMLの操作はどの程度まで許容されるんでしょうか？
仕様的には、DOMツリー操作前も操作後もValidなHTML文書であれば良いというだけですね。
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.4
> HTML documents are constrained to conform to the HTML DTD both before and after processing any SCRIPT elements.これに関する議論だとtarget属性の追加が有名かな。
http://loadaveragezero.com/app/s9y/index.php?/archives/95-Serving-Valid-XHTML-Strict-with-target_blank.html
こんなやつ。いずれにせよ、どのようなHTML文書になるのかも考えるという視点があれば、あとは自ずから許容できる範囲と許容できない範囲がでてくるだろうとは思います。
- A.Kawashima - 2007.05.16 -PM 11:10
＞iwaimさん
大変参考になりました。情報ありがとうございます
- にん - 2007.05.17 -AM 12:29
鬼頭賞の受賞おめでとうございます。
jQueryのエントリーがきっかけでフィードを読み始めたサイトの方だと
分かってちょっとびっくりしています。世間（？）って狭いですねー。Emotional Web さんはのjQuery関連記事は分かりやすくて
貴重な情報源です。これからも参考にさせていただきますね！- A.Kawashima - 2007.05.17 -PM 11:44
＞にんさん
コメントありがとうございます
そう言って頂けると嬉しいです。今後とも是非ご贔屓に(笑)それはそうと、最優秀賞受賞おめでとうございます！
にんさんのデータが公開されるのが待ち遠しいですね。
勉強させてもらいます。- みの - 2007.07.4 -PM 12:30
こんにちは。
いつもブログを拝見させていて、同時に勉強もさせていただいています。こちらの記事のコメント欄からの質問でよいのかわからないですが、コーディングコンテストのコーディングについて質問させていただけますでしょうか。
base.css中で「zoom:1」をところどころ使用されているようなのですが、これはどのような意味なのでしょうか。
具体的な箇所を挙げさせていただくと、
———————-
/* 2-6. detail */
#colMain .section div.detail{
clear:both;
zoom:1; }
———————-
上記のような指定がどのような結果を表しているのかが解読できませんでした。
突然で恐縮ですが、ご教示いただければ幸いです。- A.Kawashima - 2007.07.4 -PM 1:17
＞みのさん
はじめまして。コメントありがとうございます。
ご質問に関してですが、zoom:1が指定してある箇所はほぼ全てIE向けの指定として書いています。zoom:1を指定するとIEではhasLayoutプロパティがtrueになります
(レイアウト情報があると判断される)
IEのCSS絡みのバグはこのhasLayoutをtrueにしてあげると解消されることが多いです。下記にhasLayoutに関して解説してあるサイトを挙げておきますので、そちらも参考にしてみてください。
- みの - 2007.07.5 -PM 2:57
回答していただきありがとうございます。
昨日から悩んでいたことがやっと解決しました。また、参考に挙げていただいたコリスさんページなどからも、
色々学ぶことができました。
僕もreset.cssなどでhtml,body,div…に「zoom:1」を指定をしておこうと思います。遅くなってしまいましたが、あらためて鬼頭賞の受賞おめでとうございます。
今後もよろしくお願いします。- A.Kawashima - 2007.07.6 -PM 4:14
<p>＞みのさん</p>
<p>参考になったようで良かったです。<br />
今後もWeb制作にTipsとか役立つ情報を書いていきますんで、見にきてくださいねー :-)</p>
- Links
