コーディングコンテストの結果が発表されたようです。応募された作品や、入賞した作品へのコメントも掲載されているので、見てみると面白いかもしれません。
前回の記事の CSS Nite LP9 第2回コーディングコンテストに応募しました で応募したコンテストで、見事入賞することができました！（結果発表はこちら）
時間があまり取れず、最後の方は急ぎ足で作ったのと、HTML5.JP を運営している羽田野さんの 書籍：徹底解説HTML5マークアップガイドブック 
ただ、今回のコンテストでは最優秀賞はいなかったとのこと。
次回（もしあれば）は最優秀賞をもらえるよう、がんばりたいと思います。
今回のコンテスト参加で、賞以前に、とても勉強させてもらいました。
一度、がっつりとコーディングをしてみることで色々なものが見えてきます。
まだ上記の結果発表ページの下から、デザインデータなどがダウンロードできるのでコンテストに関係なく、コーディングルールを意識して制作してみると色々と勉強になっていいと思います。時間があるかたはぜひ、チャレンジしてみてください。
いちおう、CSS Nite LP9 にも参加してきたんですが、あいにくお通夜と重なってしまい、一番見たかった最後の 3 セッションは結局断念・・(´；ω；｀) とりあえずそのセッションに関しては公開されているスライドを見て気を紛らわせることにしますｗ
以前 CSS Nite LP9にて、第2回コーディングコンテスト開催決定。 で書いたコーディングコンテストに応募しました！
なかなか時間が取れず、結局最後の 3 連休で時間を作って大慌てで作成しました。作業時間としては大体 13 時間くらいかな？
だからというのでもないですが、今見直すと色々と直したいところがちらほら・・。
しかし、実際に作ってみてとても勉強になったいい課題だったと思います。
CSS3 を前提としているからか、「あ、きっとこれはこれを使うことを考えてるんだろうな」みたいなところが見え隠れして、細部まで考えられてるなーというのが印象に残ってます。
ということで、とりあえず応募したのはこんな感じになりました↓
表題通り、4/17に開催される CSS Nite LP9 にて、コーディングコンテスト が開催されることになりました。
あらかじめ用意されている PSD データを基に、自分の考えに基づいてコーディングを行い、テクニック、デザイン再現性、メンテナンス性の高さを競うものです。
さらに今回のコンテストはなんと、HTML5+CSS3 でのコーディングとなります。
HTML5 とか CSS3 まだ使ったことないんだよなーという人も、この機会に参加してみてはいかがでしょうか。いちおう自分も参加するつもりでおります。
しかも発表は、CSS Nite LP9 イベント当日に行われるそうです。いくつかの賞が用意されているようで、最優秀賞作品はシックス・アパート公式サイトで公開されるようです。（デザインサンプルの提供がシックス・アパートで、コンテスト対象のデザインも MT5 のページ 1 ページをコーディングする、というものです）
対象ブラウザも Firefox3.6 と Safari4 と、かなり思い切ったものなので、思う様 CSS3 を書くチャンスですｗ
なかなか実務で使うことが難しい CSS3 ですが、たまに CSS3 のサンプルを書くとあまりにも楽なセレクタや表現の幅の広がりに涙が出そうになります。
そういった CSS3 の素晴らしさを知る、という意味でも参加してみると面白いと思います。
スピーカーである KAYAC の山田さんに招待いただいて参加してきました。
今回の主題は「HTML5」。最近よく耳にするようになりました。実際自分も、HTML5で組んでみた で HTML5 を使ってテスト的に組んだりもしたのでとても興味のある回でした。
CSS Nite Vol.40 reprise のセッションは以下でした。
Vol.40 reprise に参加したことで、HTML5 に対する理解がより一層深まりました。
手書きメモベースなので細かい抜けや勘違いなどもあるかもしれませんが、内容をざっくりおさらいをしながらまとめたいと思います。
以前の記事の HTML5で組んでみた に続いてサンプルがまったく一緒ですがｗ
タイトルの通り、HTML5+CSS3 を使ってできるだけ無駄な HTML 要素（主に div）を使わずにどこまで思い通りのデザインが実現できるか実験してみました。⇒[DEMO]
結果、使用した div はわずかに 3 つ。ちなみに実際のブログトップで使用している div を数えたところ、54 個も使ってました。（一概に減らせばいい、というものでもありませんが）n
※ただし、今回の実験はまだ草案の段階のものなどを多く含んでいるため、またそれらに対応しているブラウザが webkit 系（Safari や Google Chrome など）のみということもあり、正常に表示されるのは webkit 系だけとなってます。n
CSS3 の草案で定義されているプロパティなどについては、各ブラウザで先行実装しているCSS3プロパティまとめ でまとめています。n
簡単に説明すると、n
まず、header 要素や footer 要素、nav 要素など、今までは<div id="header">などとして定義していた箇所が、そのまま要素名として使えるようになったため、div を使う必要がなくなりました。n
ひとつの画像を指定した値で区切って上下左右、それからボックス四隅へ適用するプロパティです。これのおかげで、ひとつのボックス要素にこれを指定するだけで、角丸などの複雑な囲みでも簡単に実装することができます。n
つまり、これを ul 要素などに使えば、装飾用に新しく div を追加する必要がなくなる、というわけです。n
こちらはプロパティではありませんが、CSS3 で新しく定義されている display プロパティの新しい値です。
display: box を指定された要素の子要素であるブロック要素は、自動的にカラム配置となり、さらにどのカラムも最大の高さを持つカラムに追従して高さが確保される、という特徴があります。n
そのため、メイン・サブカラムの高さを揃える JS を使ったり、はたまた背景を使ったトリッキーな方法で高さを揃える、という必要がなくなるため、これもまた div 要素を削る要因となります。n
それのおかげで、div をほとんど使わずにサンプルの左右のカラムの高さがそろっている、というわけです。n
現在策定中の CSS3 では、背景画像を複数指定することができるようになりました。
指定したい数だけ、カンマ区切りでそれぞれ指定します。n
上のようにカンマ区切りで指定すると、それぞれの配置や繰り返し内容を列挙することができます。n
これにより、アイコンと画像ボーダー、のように複数の画像を指定することが可能なため、余計な div などの要素を追加する必要がなくなります。n
ここの気づきも、div を減らす要因になりました。
以下の HTML と CSS を見ていただくと分かりますが、heade 要素は横幅 100% に設定されているにも関わらず、内包している h1 などの要素がメインのコンテンツと同じ 830px の幅に収まっています。n
このテクニックの肝は、float,position,marginの 3 つです。n
設定する値は上記を参考にしてもらうとして、なにをやっているか、を説明すると、float させた要素に対し、position: relative を指定します。n
こうすることで、続く left などの値が反映されるようになります。
そしてこの left に 50% を指定すると、指定された要素の左端は画面中央に来ます。n
最後に、margin にマイナス値を設定し、数値をコンテンツ幅の半分に指定することで、まるでコンテンツ幅が固定されているような位置に配置される、というわけです。n
つまり、いったんコンテンツを画面中央に移動させたのち、マイナス方向に要素を移動することで、意図した固定幅の範囲にコンテンツが収まるようになる、というわけです。n
今回のサンプルでは、RSS feed のアイコンが右側にあるので、同じように左右を入れ替えて値を設定すれば、右寄せにコンテンツが表示される、というわけです。n
以上の、border-image,background,display: boxと、HTML5 の新要素、および上記のテクニックを使うことによって 54 個も使っていた div を、3 つまでに抑えることができました。n
まだ CSS3 の草案段階のプロパティだったりしますが、早くすべてのブラウザに実装してもらいたいものですね。n
合わせて読むと役に立つかもなエントリー
昨日(06/18)は "CSS Nite in Ginza, Vol.36" に行ってきました。CSS Nite in Ginza, Vol.36 の詳細はこちら
今回のテーマは "インフォメーションアーキテクトの過去、現在、そして未来" というものでした。講師は "佐藤 伸哉" さん。n
セミナーで使用されたスライドは後日公開されるようですが、セミナーのスライドで紹介されたリスト化された項目をピックアップ。n
セミナーの後、懇親会という感じでアフターパーティがあります。そこに参加してきました。
なかなか同じ立場の人と会ったり話したり、という機会がないのでとても楽しかったです。n
そこで色々な人と名刺交換してきました。が。
名刺をたくさん持っていこうと思って用意しておいたのに、忘れてきたことに気づき・・。ほとんどの人に名刺を渡せませんでした(;´Д｀)（もらうばっかり・・）n
次回参加するときはそれを肝に銘じてしっかりと名刺を持って行こうと思います(´･ω･｀)
アフターパーティでは、サイバーガーデンの 益子さん もいらしていたんですが、話すきっかけが掴めず、結局一度も話せず・・orz
ちなみに、いまだにこれ以上の本を見たことがないのですが、自分のバイブルにしている "Web標準の教科書─XHTMLとCSSで作る“正しい”Webサイト" の著者です。n
アフターパーティでは、Sugamo.css の主催者の Sig. さん とお知り合いになりました。
今度やるから参加しない？ と誘われたんですが、時間的に都合がつくか怪しい・・。
でもなかなか興味深いイベントです。
月 1 回くらいの頻度でやっているみたいなので、いずれは参加したいな。（第 4 回 Sugamo.css の様子）n
ちなみに、こういったセミナーというか、イベントみたいのやるよーって言ったら参加したい人とかいたりするのかな・・ｗn
タイトル通り、HTML5 の勉強、ってことでこのブログのトップを HTML5 でテスト的に組んでみた。n
組んだ感想。すげーやりやすい。n
section など、div よりも より意味のあるタグが追加されたことで、視覚的にも分かりやすいし、section section {}のように入れ子を表現しても div のように変になりづらいというのも利点。n
そして全然関係ないけど、今回の HTML5 で組むことで、なんだかかなり色々なことに気づけたｗ（コーディングのノウハウ的なので）n
IE は正式に HTML5 には対応していないので、そのまま使用すると、CSS が反映されない。（section { display: block; }などとしても無視される）n
なので IE 向けに HTML5 を使うにはちょっとした工夫が必要です。といっても大したことしないけどｗ
以下のように JavaScript を使用して、該当の（section などの）要素を生成することで CSS が反映されるよーになります。n
上記以外で使えそうなのとしては
なんかがメインで使うものかなーなんて思ってます。
ただどれも、現在はまだ草案の段階なので仕様や実装が変わる恐れもあるので注意です。
HTML5 についてはこちらのサイト が詳しいです。n
まず大きな違いは DOCTYPE 宣言。HTML5 では<!DOCTYPE html>と書きます。システム識別子、公開識別子が取り払われてとてもシンプルになってますｗn
次に、今までは文字コードの設定は<meta http-equiv="content-type" content="text/html; charset="utf-8">を使っていましたが、HTML5 からは<meta charset="utf-8">となります。n
ちなみに上記のサンプルページ、IE6 で見るとちょっと面白いことに・・ｗn
さて、タイトル通り、このブログの TOP を iPhone に最適化してみました。
このブログの性質上、あまり iPhone から見ることってほとんどないと思いますが、さすがにそろそろ iPhone 向けサイトの作り方とかを知らないとなぁってのもあってとりあえず TOP だけ最適化してみました。（といってもかなりやっつけ）n
ただやってみて思ったのは、ほんと、Safari は優秀だな、ということ。
iPhone 向けサイトを作る利点というか、うれしいところは、Mobile Safari だけを意識して作ればいい、ということ。（つまりブラウザ間の誤差を気にしなくていい）n
さらに、Safari はかなり CSS の実装が進んでいるため、とにかく class や ID がなくてもスタイルが指定しやすいしやすい。n
はてなブックマーク数のリンクだけを消したいなーって思ったらa[href*="hatena"] { display: none; }とか指定すればいいだけ。とにかく楽です。n
まだ TOP だけですが、他のページも随時最適化予定です。
そこで iPhone 関連の部分でなにか Tips 的なのを見つけたらそれをネタにするかもｗn
前回はさっぱりめだったので、次は黒かな、ってことで黒ベースでシックな感じにリニューアルしてみました。
まだ微妙にアイコンとか修正しきれてないけど、そこらへんはおいおいってことで・・。
どうやら今日は CSS Naked Day という日らしいです。
詳しくはこちら→CSS Naked Day
ちなみに日本語で説明されてるのはこのサイトみたいです→今年の「CSS Naked Day」は4月9日に開催 at ブログヘラルド
趣旨は、「ウェブ標準を称賛することが目的」とのこと。
確かに、きれいにコーディングされたサイトは、CSS を切ってもしっかりと意味が読み取れますよね。
（このブログがどうかは分からないけど・・）n
去年は終わってから気づいたので、ちょっとやってみましたｗn
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
