hamashun.com

どんなはてブコメントでもポジティブに受け取れるユーザーCSSを作ってみました！
昼食のたらもピザパンを食べながら！

この辺で試してみるとわかりやすかもしれません！

IEは未対応です！
苦情は受け付けません！ もちろん良い意味で。

CSS HappyLifeさんで、ちょっと前から告知されていたコーディングコンテスト。 ついに正式に開催が告知されました！
これはもうコーダーのみならず、全Webクリエイターが注目ですね！

ちなみにこのコンテスト、CSS Niteのコーダー特集とも言うべきCSS Nite LP, Vol.3 "Coder's High"との連動企画という事で、審査員の方々も超豪華なメンバーとなっています。
そう、告知ページをクルクルーッと下に降りていくと超豪華な審査員の名前が･･････。 名前が･･････。
（わかりやすいように画像で引用します）

　　　(　ﾟдﾟ)
　＿(__つ/￣￣￣/＿
　　　＼/　　　　 /
　　　　￣￣￣￣

　　　( ﾟдﾟ )ミ
　＿(__つ/￣￣￣/＿
　　　＼/　　　　 /
　　　　￣￣￣￣

えーゴホン。 余りの衝撃に思わずAAを探してきてしまいました。
という訳で、僭越ながら（全くだ！）ワタクシ浜 俊太朗、コーディングコンテストの審査役を務めさせて頂く事になりました！

事のきっかけはCSS Nite Vol.18での事。
その日のプレゼントでドリーの本を貰った僕は、一言お礼を言おうと主催の鷹野さんに話しかけたんです。

（中略）

それから色々あって、こんな大役を頂く事になりました。
自分なりの目線でもって、みなさんの作品を拝見させて頂こうと思います。 よろしくお願いします。

以下はオマケ。

Twitter始めました。
全然使いこなせてないですけど、ユルい感じがいいですねコレ。

まだまだ友達登録も少ないので、ユルーい感覚でどなたでもモリモリ登録しちゃってください。

あちこちで話題になってる、rusicaさんの正しくHTMLを書こうと心がけている人に5つの質問に答えてみます。
100問とかだと読むのも大変ですけど、5問だと簡潔で嬉しいですね！

HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む）

何度か記事にもしているez-htmlです。
外部exe呼び出し機能が激しく便利です。 ブラウザ遠隔更新ラブ。

採用しているDTDとその理由をお答えください。

このサイトはXHTML 1.0 Strictで、仕事だとXHTML 1.0 Transitionalです。
このサイトがStrictな理由は、当初の目的が就職活動の為だったので、現実的でありながら技術を見せられると判断したStrictにしました。
その役目は無事終えたので、そろそろXHTML 1.1でリニューアルしたいかも。

何故正しくHTMLを書いているのですか？

うーん、そういえば何でだろう･･････。
最初は「スゴーイ」って言われたいからだったかも。
実際は「キモーイ」って言われる事が多かったです。

W3CとWHATWG、どちらに期待してますか？

英語力とか何それおいしいの？ って感じなので、海の向こうの状況はよく分かりません。
でも、どっちでもいいので統一して欲しいとは思ってます（仕様戦争とかまっぴらごめん！）。

あなたにとってHTMLとは何ですか？

誤解を恐れずに言うと、遊び道具です。
更に誤解を恐れずに言うと、毎日遊んで暮らせて超ハッピーです。

Shunさんが働いているlivedoorは、「デザイン」、「マークアップ＆CSS」、「プログラム」がほぼ完全に分業されているので、それぞれの作業に集中する事ができます。
ただ、それにはデメリットもあると感じています。 他者の分野について触れる機会が少なくなってしまうんですよね。

コーダー改めマークアップエンジニア通称MEの視点からちょっと思ったのは、Blogのデザインを、もうちょっと遊んだら面白そうだなー、とか。
CSSだけでできるちょっとしたデザイン要素とか、CSSを使う立場じゃないと逆に思いつかなかったりするのかも？ と思ったりも。
なので今日は、そんなちょっとしたTipsをご紹介します。

リンクの下線をデザインする

サンプル
リンクの下線と言えば、良く見る直線が一般的ですけど、実は点線なんかも使えます。
これの仕組みはデフォルトの下線を消して、新たにborderプロパティで点線を指定するというもの。

もちろん、点線以外の線も使えますし、そもそも線以外のデザインもできます。 画像や背景色を使っても面白いかも。
その辺りの詳細は、実際にCSSを書く人と相談してみるのが良いと思います。 やっぱり良いモノって、良いコミュニケーショから生まれますよねｗ

フォームをフォーカスした時のデザイン

サンプル
このBlogのコメントフォームでもそうなんですけど、入力欄をクリックすると色が付きます。
このサイトはIEにも対応させるために（へっぽこな）JavaScriptを使っているんですけど、すみません使ってませんでしたorzIEを無視していいならCSSだけでもできます。

使うのは:focus擬似クラス。 コレをIE様は無視されあそばす訳ですね。
input要素やtextarea要素に、:focus擬似クラスでデザインを指定すればOKです。
これを工夫すれば、MacのSafari風のデザインを真似する事もできます。

ちなみに、Safariは「デフォルトのデザインが最も美しい」という自負があるからか（？）フォームパーツのデザインが効かない事が多いです。
これはこれで困ったちゃんですけど、確かにフォームに関しては、ユーザーが使い慣れたデザインがベストではあります。 デザインしすぎもよく無いんですね。

あとがき

今回はこの二つをご紹介しました。 タイトルに「その1」と付いていますけど、その2は思いついたり思い出したら、また書きますｗ

何やら偉そうにデザイナーさんへ提案のようなモノをしてしまいましたけど、逆に僕も他の分野の勉強もしないとなー、と思います。
IAやUIにも興味ありますし、簡単なJavaScriptを書けるようになったり単純なBBSを作れるようにはなりたい･･････。
うーん、1日が48時間あればいいんですけれどｗ

CSS Nite shuffleに行ってきました！
このイベントは、CSSという名前が付いているにも関わらず、CSSだけでなくデザインだとかディレクション的な事もやっちゃおう！ といった目的があるそうです。　shuffleだけに。

エコなデザイナーになろう

長谷川泰久さんのこの講演は、CSS Nite in 大阪の時から聞いてみたいと思っていたので、個人的にラッキーでした。
地球環境問題とWeb制作の問題を、からめて話すという進め方が新鮮でした。

アウトプットするという事を特に強調されていたと思うんですけど、僕もそう思います。
やっぱり人間、本を読んだだけじゃあ中々身につきませんよね。

ちなみに、「すごい病院」で検索すると、本当にすごかったです。

Apollo、インストールから向かうビジョンまで

Apolloに関しては、これまでは何となく分かったような分からないような感じだったのですけど、この講演で大分理解する事ができました。
Apolloを一言で表すなら、Flashプレーヤーのおばけなんだそうです。 HTMLやPDFもできるFlash、みたいな。

ブラウザを使わずにWebと関わると言えばiTunesが代表だと思うんですけど、あれってOSごとに違う作りらしいんですよね（ソフトウェアに詳しくないんでアレですけど）。
でも、ApolloならFlashやHTML、JavaScriptで開発ができるので、結果的にクロスOSが簡単に実現できるというのも利点だとか。
うーん、なんだかちょっと、楽しそうです。

そもそもWPFとは？ WPFで何ができるのか？

すみません。 今日までWPFって知りませんでした。
何やらApolloとライバル関係になりそうですけど、こちらは3Dに強いんだとか。 なんだかプレステとセガサターンを彷彿とさせますｗ

僕個人としては、WPFよりはApolloの方がとっつきやすいかな、と思いました。 3Dは敷居が高いような感じが。

リッチコンテンツ制作に求められるセンスとスキル

驚いたのは、A BATHING APEがこれまでWebサイトを持っていなかったという事。 そうだったのかー。
このサイトが、普段Webに関わっている立場からするとかなり驚きなつくりで、トップページにはexeをDLするボタンがあるのみ。 それを実行する事で、コンテンツが見られるという仕組み。

Webの常識ではかなり型破りで危険な作りですけど、BAPEのファン層を考えると、その心配は余りないような気もします。
多分、雑誌で見たり友達からの口コミで利用する人が多いんじゃないかなあ。

感想みたいの

shuffleは、最初にサプライズコンテンツとして弦楽コンサートがあったり、途中でお客さん同士のコミニュケーションを取りやすくするしかけがあったりと、普段のCSS Niteとはちょっと違った雰囲気でした。 そもそも会場もクラブですしｗ
次回開催も楽しみです。

CSS Nite LP, Disc 3 -Coder's High-の連動企画、コーディングコンテストが開催中です。
応募すると-Coder's High-の参加費が2.000円引きになる特典付き！ 締め切りは今週末22日（日）の24時ジャスト！
しかも今から参加すれば、普段の業務のようにコーダーに仕事が回ってきた時点で納期が直前という、よりリアルな状況で参加できます！ もちろん良い意味で。

「えー、でもPSDデータしか公開されてないしー。 私Fireworks使いなのよねー」というあなたも大丈夫。
hxxk.jpの真琴さんが、PNGデータを作成してくれました！
2007-04-08T17:06:26+09:00 でページ内検索するとわかりやすいです。

審査基準

さて。
色々とあって僕も審査役として参加させて頂いているんですが、ここで僕なりの審査基準を書いておきたいと思います。

審査基準を満たす

とりあえず基本という事で。 審査基準に関しては平澤さんの告知ページを参照してください。

お客様の事を考えている

デザインを見ると、どう見ても企業サイトな訳です。 なので、お客様の目的を叶えるために作られたサイトが良いと思います。
その辺りで提案力が重要になってくると思います。

CSSハックの使い方

CSSハックは使われているのか。 使われているならどのハックを使っているのか。
使っていないなら、不自然なHTMLになっていないのか、という点を見たいと思います。

こんな感じでしょうか。
ちなみに賞品にある、各審査員ごとのプラスアルファは、「コーディングがしやすくなるグッズ」にしようかなあとか思っています。
皆様のご参加をお待ちしています！

livedoor Authが公開になりました。 「Authって何？」という人は、プレスリリースを見てもらった方が分かりやすいかも。

ShunさんはマークアップとCSSを担当しました。
サービス自体がわりとGeekな人向けなので、コーディングもちょいとトンがった感じを意識してみました。 ちょっとMOSeってみたり。

実を言うとStrictにしたかったんですけど、更新性とtarget="_blank"を使う必要があったのでTransitionalに。
まあ、この辺りはお仕事なのでアレですアレ。 でも多分、Strictでもバリデータはほぼ通るんじゃないかなー。

納期の関係もあって、いくつかやりたい事も残っていたり。 その辺りは時間を見てアップデートしていきます。
link要素のナビゲとか入れたいなあ。

関連リンク

ITmedia News：ライブドア、認証APIを外部に開放

CodeZine：livedoorの認証システム一般提供開始 Perlライブラリの公開も（Web API, ライブドア）

ライブドア、ユーザー認証APIを公開--ライブドアIDを使ったサービスが開発可能に - CNET Japan

Qlogue: 認証APIのlivedoor Auth

ライブドアの新サービス-ないときにはない:イザ！

ICHINOHE Blog: livedoor IDの認証機能を外部に提供するAPI「livedoor Auth」公開

認証 API と 匿名 Twitter - にぽたん研究所

livedoor Auth - しろログ

オピニオン: ライブドア、ユーザー認証APIを公開

本日はTips記事でございます。
Blogなんかで、コメントに番号が付くのってありますよね。
あれをCSSだけで実現してみます。

サンプル
見ての通り、何の変哲もないh3要素に、番号が振られています。
これを指定しているのが、あまり見慣れないcounter()関数 です。
ソースを解説すると、

「h3要素の直前（before）にcontentプロパティで次の値を生成する。
『counter関数でchapterと文字列 .』 」

となります。
ただし、これだけでは数字は増えていきません。
これを増やしていくには、counter-incrementプロパティを使用します。
counter関数の引数chapterと、counter-incrementプロパティの値chapterが対になっているのがポイントです。

counter-increment。 インクリメントと聞くとプログラムのインクリメントが連想されますけど、正にそれです。
counterをインクリメント、つまり1つ増やします。 これにより、h3要素が登場するたびに数字が一つづつ増えていきます。
また、chapter 2 などとする事で、上げ幅を指定する事もできます。

counter()関数の後の "." は、単純に文字列を生成しているだけです。

応用

サンプルの下部には、応用版を載せてみました。
counter()関数の引数だったchapterには仲間がいて、その名を section と subsection と言います。
これらは別々にカウントする事ができて、おカタイ文書でよく使われている風の見出しが作れたりします。

数字が増えていく一方だと困る場合には、counter-resetプロパティでリセットする対象（chapterとかsectionとか）を指定します。

ただ、このテクニックはIE様はもちろんなんですけど、ちょっと前のFirefoxも未対応なようです（NN7はダメでした）。
使う際には、ターゲットブラウザをよく考えて使いたいですね。

以下、追記にて蛇足。