Blog

コーディングコンテストの個人的復習

Posted on 2007-05-31T22:44+09:00

コンテストの結果発表後に公開されたデータを拝見して自分のデータを修正したのでアップします。

追記

  • 2007-06-02: idとclass付けに少しミスがあったので修正。
  • 2007-06-04: CSSファイルに目次を追加。

修正前のデータは浜賞☆コーディングコンテストVol.1 | CSS HappyLifeに掲載されています。

以下は今回の修正についてですが、長いです...。

目次

  1. 全体的なこと
    1. ディレクトリ構成
    2. XHTML
    3. CSS
    4. イメージファイル
    5. 多様な閲覧環境を考慮する
  2. ヘッダー
    1. ロゴとタグライン
    2. グローバルナビ
  3. メインコンテンツ部分
    1. RSSのalt属性
    2. 最新情報の日付
    3. 最新製品情報のコンテンツの高さを揃える
    4. パンくずリンク
    5. Happy Lifeマシン概要
    6. 製品詳細
    7. お客様の声
    8. その他オススメ製品
    9. 製品に関するお問い合わせフォーム
  4. サイドバー
    1. ホームページの「関連サービス」タイトルの上の余白
    2. 画像を非表示にした場合の可読性・視認性の向上
  5. 課題

全体的なこと

ディレクトリ構成

[ ] はフォルダを意味しています。

変更前のディレクトリ構成
  • index.html
  • [css]
    • default.css
    • styles.css
    • print.css
    • print_styles.css
    • lightbox.css
  • [images]
    • [lightbox]
  • [js]
    • effects.js
    • lightbox.js
    • minmax.js
    • prototype.js
    • rollover.js
    • scriptaculous.js
  • [product]
    • index.html
    • [images]
    • [happylife_machine]
      • index.html
      • [images]
変更後のディレクトリ構成
  • index.html
  • [css]
    • default.css
    • elastic.css
    • liquid.css
    • print.css
    • right-sidebar.css
    • simpler.css
    • [import]
      • base.css
      • elastic_styles.css
      • liquid_styles.css
      • print_styles.css
      • reset.css
      • right-sidebar_styles.css
      • simpler_styles.css
  • [images]
    • [shared]
  • [js]
    • effects.js
    • minmax.js
    • prototype.js
    • rollover.js
    • scriptaculous.js
    • switcher.js
    • [lightbox]
      • lightbox.css
      • lightbox.js
  • [images]
  • [product]
    • (index.html)
    • [happylife_machine]
      • index.html
      • [images]
    • [images]
      • [shared]
変更したところ
  1. CSSファイルの構成を変えた。
  2. 共用する画像をsharedフォルダに置くことにした。
  3. lightbox.js関連のファイルをまとめた。

XHTML

なるべく余計なdivやspan要素は記述しないようにと思ったが丸角やなんやで結局多くなってしまっていた...。リベンジの今回は<div class="section">形式でマークアップした。また、セクションの階層を示すlevelx（h2要素の前のdiv要素はlevel2）というclassも与えてみた。 

<body>
<div id="top" class="container">
  <div class="header"> ～ </div>
  <div class="content">
    <div class="main-content">
      <div class="section level2">
      <h2> ～ </h2>
        <div class="section level3 first-child">
        <h3> ～ </h3>
        <p> ～ </p>
      </div>
      <div class="section level3">
        <h3> ～ </h3>
        <p> ～ </p>
      </div>
      <div class="section level3 last-child">
        <h3> ～ </h3>
        <p> ～ </p>
      </div>
    </div>
  </div>
  <div class="sub-content"> ～ </div>
</div>
<div class="footer"> ～ </div>
<body>

CSS

スクリーン用とプリント用のそれぞれ1つずつで構成していたが、今回はちょっぴり分割管理。

cssフォルダ直下はXHTMLファイルから直接読み込むファイルのみで、実際にスタイルを記述しているファイルはimportフォルダにおいた。

reset.cssはブラウザの各要素のデフォルトスタイルをサイトデザインに合ったものに再設定した。 そしてbase.cssでデザインを再現するのに必要な設定をしており、default.cssではreset.css、base.css（とlightbox.css）を読み込んでいる。

今回はCYBER@GARDENにならってデフォルトスタイル以外のCSSも用意してみた。

  • 右サイドバー
  • リキッド
  • エラスティック
  • シンプル

関連サービスメニューの下のリンクからスタイルを変更できるけど、styleswicher.jsというものを使っているのでJavaScriptは有効にしてください。FirefoxやOperaを利用しているかたはJavaScriptを無効にしていてもブラウザのメニュー「表示>スタイル（シート）」から変更できます。ただし、ページを移動するとデフォルトスタイルに戻ってしまうのであしからず。

styleswicher.jsはA List ApartのAlternative Style: Working With Alternate Style Sheetsからダウンロードできます。また、MdNから出ている2007年7月号の『web creators』（p.110）にも関連記事がちょっと載っています。

プリント用CSSはそのまま印刷するとレイアウトが崩れたり不要な要素を印刷することになるので、 ロゴとタグライン、メインコンテンツ（一部除く）とフッターのみを印刷するような設定にした。

このCSSではreset.cssやbase.cssを読み込まず、print_styles.cssに全てを記述している。 ちょくちょくソースを見に行くCYBER@GARDENのprint用CSSをみたところ、はじめの方で印刷しないものをdisplay: none;にしてからその他の設定をしていた。その理由を考えたところブラウザの処理時間がちょっとでも減るのかなぁと。

イメージファイル

ルート直下のimagesフォルダ直下はhome（index.html）で使用する画像のみで、その下のsharedフォルダは全ページで共用する画像ファイルを置く。

product直下のimagesフォルダはproduct/index.htmlで使用する画像のみで、その下のsharedフォルダはproductカテゴリでのみ共用する画像ファイルを置く。

今回はファイル名の略語（頭文字など）に以下のルールを適用。

  • gnav: グローバルナビ（global navigation）
  • unav: ユーティリティナビ（utility navigation）
  • lnav: ローカルナビ（local navigation）
  • fnav: フッターナビ（？）(footer navigation）
  • cnav: パンくずナビ(crumbs navigation）
  • bnr: バナー（banner）
  • hdg: タイトル（heading）
  • btn: クリッカブルボタン（button）
  • icon: アイコン
  • thumb: サムネイル（thumbnail）
  • photo: 写真
  • bcg: 背景画像（background-image）

画像のロールオーバー

XHTMLのimg要素のロールオーバーにはrollover.jsを使用した。他の手法はCSSが有効で画像を無効化した場合に閲覧に支障が出たりするので。

忘れてしまっていたのはCSSで矢印アイコンなどの1枚画像の位置をずらして、通常時とオンマウス時で切り替えるようにする方法。縦横の幅が変わった時に別の状態用の画像が見えないように注意。

多様な閲覧環境を考慮する

今回も以下の場合の配慮したつもり。

  • 一般的な環境（CSS・画像・JavaScriptが有効）での閲覧
  • 音声ブラウザでの閲覧（CSSを無効にした場合の閲覧を含む）
  • 画像を無効にした場合の閲覧
  • CSSを有効、画像を無効にした場合の閲覧
  • JavaScriptを無効にした場合の閲覧
  • 多様なウィンドウサイズでの閲覧

フォントサイズ

デザインカンプでは全体的に小さめのフォントサイズだったので可読性が低いと感じた。少し大きめに変更して行間も広い方が読みやすそうなところは広げた。フォントサイズの%指定の値に関してはfont-size指定 | d-spicaを参考にしました。

しかし、、、いまだにスマートな方法が分からない。

音声ブラウザ用のテキスト

「ここから本文です」「ここからサイト内共通メニューです」「ページの終わりです」といったテキストを記述した方がいいみたいなので付けてみた。

音声ブラウザへ用のスキップナビ

とりあえずといった感じだけど、メインコンテンツとサブコンテンツにジャンプするリンクを設けました。

設置場所についてはユニバーサルワークスのコラム「スキップのテクニック」を参考にしました。「本文へジャンプ」のリンク先をパンくずリンクにしたのも、同サイトのコラム「とんちんかんなスキップ」を読んだ結果です。

しかし、スキップのリンクテキストがちょっと良くなかったので変更した。

変更前のテキスト
  • メインコンテンツへジャンプ
  • サブコンテンツ（サイドバー）へジャンプ
変更後のテキスト
  • 本文へジャンプ
  • カテゴリ内共通メニューへジャンプ

hr要素でコンテンツを大枠で区切る

hr要素でヘッダー、メインコンテンツ、サブコンテンツ、フッター、その他（lightbox.jsで使用される画像など）を分けた。CSSを無効にした場合にナビ、本文、サイドバーなどの区別がしやすいかなと。

JavaScriptが無効の場合のテキスト

noscript要素でテキストをメインビジュアルの中ほどに表示させるようにしたが、2xupのnoscript要素が元ネタというかそのまま...すみません。テキストを書き替えようにも他の表現が思いつかず、赤枠＆背景というのも注釈には打ってつけの色だったもので。

コンテストに応募した時はロゴの前に記述したのだが、音声ブラウザで毎回最初に読み上げてしまうのでこれはまずかった。body要素を閉じる前あたりに記述しなおした。

あと、User Centered Designさんへの益子さんの審査コメントを読んだところ、説明文は改善する必要があるようだ。「JavaScript」と「スタイルシート」といった専門用語が一般の人に理解できるかどうかという点。

「JavaScript」とはという説明ページにリンクさせてもなぁ...。Canonのように「JavaScriptを有効にする設定方法」や「スタイルシートを有効にする設定方法」というページにリンクさせればいいのかな？

ヘッダー

ロゴとタグライン

左に飛び出ている部分をどうするかだが、低解像度（800×600など）のディスプレイで閲覧する際にはジャマになると判断して、飛び出ている部分をロゴ画像から切り離し、背景画像として設定。ウィンドウサイズを小さくした場合には表示されないようにした。

ロゴはホームページだけh1要素で定義して、それ以外ではdl要素を使用し、ロゴ（会社名）をdt要素、タグラインをdd要素で定義した。

ただ1つ疑問というか心配なのは、全ページにタグラインがあるので、スクリーンリーダーではページ遷移するたびに読まれると思うのですが、それにイラっときていないのかということ。タグラインはホームページにだけあればよくて、全ページには必要ない気がする。

グローバルナビ

画像が無効化の対応だが、応募時は各項目がくっついてしまうので余白を作るために&nbsp;を両側に追加した。今回は上位要素にwidthを設定したので&nbsp;は削除した。

現在地以外は通常はボーダー非表示で、オンマウス時に白のボーダーが表示される設定だが、画像非表示状態では背景に同化してしまう。回避するためにオンマウス時の背景色も設定した。

ただ、現在地を示すものは益子賞を受賞されたUser Centered Designさんの「デザイナーへ提案」にもあるように、現在地を示すものが画像の下のボーダーだけというのはこのサイトデザインでは分かりにくい。画像自体にも何かしらの変化があった方がいいと思う。

メインコンテンツ

RSSのalt属性

画像のテキストをそのまま表示すれば「RSS」で、それでも伝わると思うのだが、より分かりやすくするために「RSSを購読する」にした。

最新情報の日付

1桁の月と2桁の月が同時に掲載された時にも右端をそろえるためYY形式にした。

各製品コンテンツの高さを揃える

応募時はちょっと安易にminmax.jsを使ってしまったが、ほかの人たちがしているようにデカイ画像1枚を背景画像に設定しなおした。

パンくずリンク

応募時は角丸デザインと文字を拡大しても崩れないようにするために余計なdiv要素を記述したが、今回は下記のようにdl要素で定義した。

<dl>
    <dt>現在地</dt>
    <dd><a>ホーム</a> > <a>製品情報</a> > <em>HappyLifeマシン</em></dd>
</dl>

HappyLifeマシン概要

サムネイル写真の拡大にはlightbox.jsを使用した。

デフォルトでは写真の周りが黒くなるがこのサイトには合わない気がしたので白系に設定した。また、lightbox.cssのclearfixハックを削除した。

小久保賞を受賞されたOK computerさんへの審査コメントにあるように、サムネイルと「画像を拡大する」ボタンを同じa要素で括った。しかしながら同じように不完全...サムネイルにカーソルを置いた時にボタン画像に切り替えられない。

「注文する」ボタンは新ゴのフォントをもっていれば「カートに入れる」に変更したかったところ。

製品詳細

dl要素かtable要素のどちらでもOKだと思うけど、やっぱりtable要素の方が良かったかなと思った。

ここは製品のスペック一覧表だし、項目数が増加した場合にはtable要素のほうが適切だと思う。今回のデザインでは項目ラベルの高さと横幅が一定だが、それらが揃っていない場合にdl要素でマークアップするのはキツい。

また、罫線付きの表組みデザインに変更することになってしまった場合にtable要素の方が対処しやすい。

さらに、列の背景色を交互に設定するデザインになった場合の対処も容易（JavaScriptを使用して、classも追加しますけど）。オンマウスされた列の背景色・画像を変えるというのもdl要素より対処が容易です。

100,000（税別）のマークアップはデザインカンプでは太字なのでstrong要素で囲めばなのだが、strong要素は製品名の下の説明文テキストに使いたかったのでclassを追加して太字にした。ただ、構文上でも他のテキストより強調してもいいと思うのでem要素も定義すればよかった。

今回は以下のようにマークアップして、値段のところだけ太字にしてフォントサイズもちょっと大きくした。

<tr class="price">
  <th> ～ </th>
  <td><em>100,000円</em>（税別）</td>
</tr>

100,000円（税別）をem要素で括ってしまえば早いのだけれども、「値段だけ赤色にしてよ」とか「（税別）のところはもっと小さいフォントでいいよ」って言わることがありそうなので...。

お客様の声

応募時はコメントのタイトルをh要素とし、ほかをp要素で定義しただけだったが、河内賞を受賞した小山田晃浩さんのようにblockquote要素とcite要素も使用した。

その他オススメ製品

応募時は製品名をh要素とし、説明文とサムネイルにそれぞれp要素を定義したが、今回は製品名とサムネイルをh要素として両方を1つのa要素で括った。

ただやっぱり応募時と同様に文字を小さくした時に2番目のサムネイルが1番目のものに重なってしまう。 今回は使わないですむかと思われたminmax.jsをここで利用して、div.other-recommend divにmin-height: 110px;を指定した。

製品に関するお問い合わせフォーム

リード文の「この製品に関するお問い合わせは～」の「この製品」の部分を「HappyLifeマシン」に変更した。理由はprofile.txtにも書いたが、このページにはHappyLifeマシン以外の製品も掲載されており、リード文の「この製品」が指すものが曖昧になると判断したから。

ただ、もっとも良い方法はお問い合わせカテゴリに集約させることだと思う。

メールアドレスの記入例を消した理由もprofile.txtに書いたが、この場合の説明は不要だと判断した。

（全角）（半角）などの入力書式だが、本当はinput要素の前に記述させるべきだが（理由については富士通ウェブ・アクセシビリティ指針を参照してください）、応募時はちょっとパスしてしまった（テキストエリアの右側に表示させようとして失敗...）。今回はちゃんとinput要素の前に記述している。

ただ、CSS Nite LP3で講師をされた河内さんのブログのエントリー「LP3で使用したコーディングデータ」の「フォーム」の節に入力書式について書かれているところがある。サーバ側で全て変換できればフォームの項目まわりがすっきりするのになぁ。

サイドバー

ホームページの「関連サービス」タイトルの上の余白

デザインカンプでは10pxほどの余白でしたが、メインコンテンツの「最新情報」と高さを揃えた。僕にはこちらの方がしっくりきたので。

画像を非表示にした場合の可読性・視認性の向上

  • メインコンテンツとサブコンテンツがはっきりと区別できるように背景色を設定した。
  • ローカルナビのタイトルに横幅可変デザイン用に黒系の背景色を指定しているので文字の色を白に変更した。
  • 関連サービスバナーのalt属性に「バナー:」というテキストをつけたが、ここでは不要だったと思い直して今回は削除した。
  • 応募時は関連サービスのline-heigtを1に設定したが画像非表示状態での可読性が低かったので今回は1.5に設定した。
  • バナーの白枠をバナー自体のものからCSSでの設定にすることによって、画像非表示状態でも各アイテムがはっきりと区別できるようになったと思う。
  • さらにオンマウス時のリンクテキストの背景色も設定した。

課題

課題はhead要素内の内容を充実させること、目次やコメントの記述やハイコントラスト用のCSSなど...まだありそう。

Prev. Entry:
コーディングコンテストで浜賞を受賞
Next Entry:
ショートカットキーでFirefoxのウィンドウを指定サイズに変更する

Comment

1. ulceveaveda Posted on 2008-12-11T16:16+09:00

creampies porn

Post a comment

Personal Information




Your Comment


 

TrackBack

TrackBack URI:

http://www.culture27.com/mt/mt-tb.cgi/272