コーディングコンテストに応募しました

遅くなりましたがコーディングコンテスト一人反省会。
特に受賞も何もしてませんよ。

ポイント

display:box

display:boxは指定した要素の子要素を横並びにしてくれて便利なんだけど、たとえばこんなHTMLでsectionを横並びにしたい場合、

<article>
<h1>見出し</h1>
<section>ほげ</section>
<section>はげ</section>
<section>ひげ</section>
</article>

articleに適用するとh1も横並びになってしまうので、別途sectionを囲う要素を作ってそれに指定しないといけないという罠。
そこでboxcaseというclassを作って、

.boxcase{
    display:box;
    display:-moz-box;
    display:-webkit-box;
    }

汎用的に使えるようにしてみたんだけど、どうだろう。なんか微妙かな。
素直にfloatとかinline-blockとかtable-cellとか使った方がいいかも。

あとFirefoxでなぜかdisplay:boxした子要素がwidthにmargin,paddingを含めたモードになってしまうので（バグ？）、-webkit-box-sizing:border-box;としてWebKitの方もFirefoxに合わせてます。

ページトップに戻るリンクをつけた

基本的に「このページのトップへ」リンクは要らない派なんだけど、今回のデザインではメニューがページ内リンクだったので必要かなーと。目立たない感じに、↑は面倒だったのでテキストで。

その他

あとはもっとid/class名をきちんと付けるべきだったかな。
headerとかemとか。
（中の人情報によると）HTMLは割ときれいに書けてたみたい。
HTML5は本も2冊出たし情報もそれなりにまとまってるんだけど、CSS3が全然勉強不足。なんとかせねば。

他の方のデータを見て

受賞した方の作品を中心にざっくりと見てみて気付いたところなど。

ページ最上部のボーダーとシャドウ

全部の要素の上にシャドウがかかってるので悩んだあげく自分は画像をbodyと#containerに適用したんだけど、

body::before {
    content: '';
    display: block;
    height: 6px;
    width: 100%;
    background-color: #152427;
    box-shadow: 0 1px 4px rgba(0,0,0,0.36);
    position: relative;
    z-index: 10;
    }

こんな感じにbodyの前に空白のcontentを作るのがスマートみたい。

画像拡大時のカーソル

a[href$=".gif"] img,
a[href$=".png"] img,
a[href$=".jpg"] img,
a[href$=".jpeg"] img,
a[href$=".bmp"] img {
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    }

おお、これでhover時に虫眼鏡カーソルになる。

「入力画面（キャプチャ）を拡大する」のテキスト

figure a::after {
    content:attr(title);
    }

figcaptionとかは使わないでa要素のtitle属性値を表示させる。まあ場合によるだろうけど面白いね。

お知らせ

「Movable Type ニュース」は普通にh3でマークアップして、それとは別にテーブルにcaptionと説明文をつけてそれはdisplay:none。アクセシビリティ的に素晴らしい感じ。

DOAS

今回初めて知った・・・と思ったら2年半前にクリップしてた＞＜

これは良さげですね。使ってみよう。

OOCSS

なんとなく好きになれなそうな気がするけど・・・一度試してみたい。

小さいアイコン

テキスト横のアイコンに背景画像ではなく::beforeや::afterを使うとか。

意外とここをSpriteにしてない人が多かったのと、スパナアイコンの上下が切れちゃってる人が多かったのが気になったなぁ。

とまあこのコンテストまでHTML5をあまり追ってなかったんで大変でしたが、ものすごく勉強になりました。これがなかったらやってなかっただろうしね。

Tags: , , ,

Additional comments powered by BackType