第2回コーディングコンテスト（#lp9cc）に応募しようとして挫折したので晒してみる

web html5 css3

おおよそ2週間くらいかけて、仕事の合間チマチマやってたら結局間に合わなかったので、どんな感じになったか、今回の問題点、実現可能な手法の考察をまとめてみた。今さら感満載でお送りしますｗ

スクリーンショット

オリジナル

作ったページ

第2回コーディングコンテストで書いたページのスクリーンショット
実際のページはこれ

不足点

出来てるところより出来てないところを挙げた方が早いので。

  1. 一番上の黒いバーみたいなところ
  2. 右上の「Movable Type ドキュメントプラグイン」ボタン画像の :hover,:active の実装
  3. キャプチャの拡大（フツーに画像ファイルにリンクする予定だった）
  4. 「個人ライセンス」のダウンロードボタン（2番目と同じ理由）
  5. 「関連製品・ソリューション」の画像が違う（ミスですｗ）

上記5点さえクリアされてれば提出できたけど、なんだかめんどくさかったのを後回しにしてたら間に合わなかったｗ
「Movable Type ドキュメントプラグイン」画像の :hover,:active の実装方法が思いつかなかった。jQuery で出来ると踏んでたが、なんとなく思った通りに書いたら出来なくて、ここが一番悩んでまだ答えが見つかってない。いやただ単に自分の jQuery 力が低いだけなんですがorz
他に考えた手段として、テキスト部分を透過 PNG にしてしまい、背景のグラデーションやら影やらを全て CSS で実現する方法もあった。けど CSS オフの時には可読性が極端に下がる（テキスト部分の色が白に近いので）から却下した。現実的だけど、その辺考えると画像置換も却下。そうなると JavaScript でやるしかないんだけど、ヌルいオレには出来なかったと言うわけですｗ
あと一番上の黒いバーみたいなのは画像化させようかと思って最後まで手付かずだった。スマートな解決策として、id:tacamy さんがやった content プロパティで生成する方法がいいかもしれない。
フォントがメイリオなんだけど、どこからどこまでがテキストなのか画像なのかわかんねーｗ
ナビゲーションや大見出し（ウェブサイト管理の新標準。）とか。デザイン上ではテキストにアンチエイリアスがかかってて、完全にこっちで判断しなければならないのがどうなんだろうと思った。だから、全部画像にしてイメージマップガンガン使っても問題ないはず。キチンと構造化されていて、代替テキストが入っていればだけど。そこを否定する材料はこのデザインから読み取れないのでアリだと思いますｗ

HTML5 の構造

ソース参照でｗ
アウトラインは id:amachang の作ってくれたアウトラインを生成するブックマークレットを使うと分かりやすいです。
個人的にどうしようか悩んだのが、ページ下部にある「プラグインディレクトリ」や「Movable Type ドキュメント」などの括り。section 要素にするか div 要素にするかでモヤモヤしたけど、見出しがあるから必ずしも section 要素を使わなければならないわけではないし、もっと言ってしまえば section 要素である必要性がないブロックだと認識したので div 要素にしました。ただ article 要素に内包されている（厳密には div 要素の直接の親要素は aside 要素ですが）ので、section 要素である方が無難な気もします。

画像の取り扱い

今回、MT の画面やウェブサイトのキャプチャ画像があるけど、本当は一部の画像を除いて全部 alt 属性値を空にするか、背景画像にしてもいいと思ってた。実際、「導入事例」と「関連製品・ソリューション」の画像は背景画像にした。「MT5 の新機能」とか画像いらない。なくても成立する。逆にページ上部のキャプションが付いた画像に関してはそれぞれ代替テキスト入れた。ないと成立しないので。そーゆー基準でやりました。異論はあるだろうなぁ。

「FREE!!」と「NEW!」の方法

Firebug で見ると分かりづらいので、この部分だけ抜き出します。

「個人ライセンス」の部分
<hgroup>
  <h2><strong>無償</strong>個人ライセンス</h2>
  <h3>ブロガー向け</h3>
</hgroup>
「導入事例」の部分
<hgroup>
  <h2>新着事例</h2>
  <h3><a href="https://www.sixapart.jp/business/12843.html">森ビル</a></h3>
</hgroup>

で、何をやっているかと言うとこんな感じ。

$(function () {
  $("section.personalLisence hgroup h2 strong").text("FREE!!");
  $("section.introduction section hgroup h2,section.relatedProduct-solution section hgroup h2").text("NEW!");
});

jQuery でテキストを差し替えて、

section.lisence div section.personalLisence hgroup h2 strong {
    display: block;    /* インライン要素なのでまずはブロック化 */
    -moz-transform: rotate(-14.6deg);    /* transform プロパティで回転（傾け？） */
    -webkit-transform: rotate(-14.6deg);    /* 同様に webkit 用 */
    transform: rotate(-14.6deg);    /* きちんと仕様が勧告されたらこっちを使われるようになる */
    position: absolute;    /* 絶対配置で置く */
    top: -6px;
    right: -6px;
    width: 4em;    /* 幅指定 */
    height: 4em;    /* 高さ指定 */
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);    /* box-shadow プロパティで影を付ける */
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);    /* 同様に webkit 用 */
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);    /* 勧告仕様 */
    -moz-border-radius: 4em;    /* border-radius プロパティで円にする */
    -webkit-border-radius: 4em;    /* webkit 用 */
    border-radiut: 4em;    /* 勧告仕様 */
    background: #ffde00;
    line-height: 4;
    text-align: center;
    text-shadow: 1px 2px 1px white;
    font-size: 12px;    /* px 指定ウマーｗ */
    color: #da0f00;
}

CSS で配置とかなんとか。
別に画像でやってもいいけど「じゃあその画像をどうやってマークアップするのよ」って考えると、まあ結局同じようなマークアップになるし、CSS3 だったら別に画像使わなくてもいけるし、じゃあ遊びでこれにしようって感じです。
最初は content プロパティでやろうかと思ったけど、きちんと文書の中に「無償」や「新着事例」と言うのを明示した方がいいと思ったのでこうしました。jQuery の間違った使い方の例。

CSS3 がめっちゃダルい件（主に linear-gradient 値）

前々から思ってたけど、実装に差があるからそれを吸収するのが面倒で仕方がなかった。最初に Firefox 向けに全部書いて、最後に Safari 用に追加しながら書いたけど、linear-gradient 値の書き方が違ったり、上手く書けなかったり、仕様と全然違うところで何度も「死ね。氏ねじゃなくて死ね」と思ってた。やっぱりまだ使うには早すぎる技術。面白いけどね。
あと RGBA の扱いが正直めんどくさい。基本的に色指定は16進数でやってたから、それを慣れない RGB で書かなきゃならなかったのが苦痛。どうにかならんのかね。#ffffff,0.5 みたいな感じにしてくれないかなぁ。
全体の背景は全て一括で書いてしまった。面倒だったけど要素追加したりするよりスマートだと思う。

html {
    background: url(../image/backgroundPattern.png),  /* 背景画像の指定 */
    -moz-linear-gradient(  /* Firefox でグラデーション */
    rgba(137,163,180,1),  /* 開始の RGBA 指定 */
    rgba(137,163,180,0)  /* 終了の RGBA 指定 */
    517px),  /* 実数値でグラデーションの範囲指定 */
    #dbe6ec;
    background: url(../image/backgroundPattern.png),  /* リセットされるので再度ここで webkit 用に背景画像を指定 */
    -webkit-gradient(  /* Safari でグラデーション */
    linear,  /* グラデーションのスタイルを指定 */
    left top,  /* 開始位置を指定 */
    left bottom,  /* 終了位置を指定 */
    from(rgba(137,163,180,1)),  /* 開始の RGBA 指定 */
    to(rgba(137,163,180,0))  /* 終了の RGBA 指定 */
    ),
    #dbe6ec;
}

なぜか webkit だとグラデーションの範囲を実数値で指定できない。書き方が悪いのか、実装されていないのかよく分からん。実装されてるはずなんだけどなぁ。使える単位がパーセントだけとか？よく分からん。
ちなみに linear-gradient 値に関してはCSS3 グラデーション（gradient）の指定方法 | CSS Lectureが分かりやすくまとまってていい感じです。

まとめ

HTML5 は思考実験としては最良の材料。CSS3 はまだ使うには早すぎる。その前に CSS2.1 を勧告しろ。早くしろ。今回 IE 切り捨てでやったから、擬似セレクタが大量に使えて楽しかった。だから早く CSS2.1 をガチで使えるようにして欲しい。おかげで普段は jQuery でやんややんやしないといけないんだから。IE6 が消える時は CSS2.1 が勧告された時かなぁ。先は長そうだ。