11月発売予定ですが、ビックカメラでは298,000円（税込）みたい。待ってたんで欲しいけど、安くなったとはいえ、さすがに許されないか…そうだよね。
欲し。
]]>11月発売予定ですが、ビックカメラでは298,000円（税込）みたい。待ってたんで欲しいけど、安くなったとはいえ、さすがに許されないか…そうだよね。
欲し。
]]>撮影してすぐに感じた。体感でGR Digitalの半分以上、いや、もっと早くなった感じがした。あとで調べてみるとGR Digitalが約11秒かかっていたのに対して、GR Digital IIは約4秒。
GR DigitalだとRAWでの撮影はほんとに一発勝負だったけど、これなら普通に使えそう。
GR Digitalでもカメラ設定を2種類保存しておけるのだが、起動時にどちらの設定を使うかを選択しておかなければいけなかった。セット1の状態からセット2の状態にするには、一度セット2で起動するようにしてからパワーオフ→オンとする必要があった。
GR Digital IIではそれがモードダイヤルで瞬時に切り替えることができるようになった。
他にも小さな変更点がありました。
GRは確実に“深化”している。そう感じたし、まだまだ深化すると思った。余裕があれば「GR Digital II」に買い換えたいところだけどそうもいかない...。40mmのテレコンバージョンレンズ、早くでないかな。
]]>撮影してすぐに感じた。体感でGR Digitalの半分以上、いや、もっと早くなった感じがした。あとで調べてみるとGR Digitalが約11秒かかっていたのに対して、GR Digital IIは約4秒。
GR DigitalだとRAWでの撮影はほんとに一発勝負だったけど、これなら普通に使えそう。
GR Digitalでもカメラ設定を2種類保存しておけるのだが、起動時にどちらの設定を使うかを選択しておかなければいけなかった。セット1の状態からセット2の状態にするには、一度セット2で起動するようにしてからパワーオフ→オンとする必要があった。
GR Digital IIではそれがモードダイヤルで瞬時に切り替えることができるようになった。
他にも小さな変更点がありました。
GRは確実に“深化”している。そう感じたし、まだまだ深化すると思った。余裕があれば「GR Digital II」に買い換えたいところだけどそうもいかない...。40mmのテレコンバージョンレンズ、早くでないかな。
]]>使っていたのはレキサー プロフェッショナルシリーズの1GB80倍速WAのCFカード。修理に出すと1週間ほどで返ってきた。明細をみると初期化して工場出荷時に戻したようだ。ふ～ん、それでOKなのか？と疑いつつ散歩中に撮影してみたのだが、約30枚のうち1枚がやっぱり壊れていた...。
さよならレキサー。
]]>使っていたのはレキサー プロフェッショナルシリーズの1GB80倍速WAのCFカード。修理に出すと1週間ほどで返ってきた。明細をみると初期化して工場出荷時に戻したようだ。ふ～ん、それでOKなのか？と疑いつつ散歩中に撮影してみたのだが、約30枚のうち1枚がやっぱり壊れていた...。
さよならレキサー。
]]>用途としては、Webサイトを制作中にいろいろなウインドウサイズで閲覧・確認したり、サイト制作者の意図によって最大サイズに広げられたウィンドウをすぐに好みのサイズに戻したり、後ろに人の気配を感じたら極小サイズに縮めたり...といった感じ。
2つの拡張機能のインストールが必要ですがKeyconfigだけ設定します。
「/* CODE */」と書かれているところ（「名前」の下の欄）に次のJavascriptのメソッドを記述して「OK」をクリック。
webdeveloper_resizeWindow('800','600',null)
引数の1番目がウィンドウの横幅、2番目が高さ。3番目はウィンドウサイズにメニューやツールバーを含める場合はnullを、含めない場合はtrueを記述する。
「適用」の左の入力エリアにカーソルを合わせ、希望するショートカットキーを実際に押す。
すでに他の機能に割り当てられている場合は警告ダイアログが出る。別のショートカットキーにするか、競合する機能のショートカットキーを変更する。
webdeveloper_customResizeWindow()webdeveloper_displayWindowSize()window.moveTo(50,30)用途としては、Webサイトを制作中にいろいろなウインドウサイズで閲覧・確認したり、サイト制作者の意図によって最大サイズに広げられたウィンドウをすぐに好みのサイズに戻したり、後ろに人の気配を感じたら極小サイズに縮めたり...といった感じ。
2つの拡張機能のインストールが必要ですがKeyconfigだけ設定します。
「/* CODE */」と書かれているところ（「名前」の下の欄）に次のJavascriptのメソッドを記述して「OK」をクリック。
webdeveloper_resizeWindow('800','600',null)
引数の1番目がウィンドウの横幅、2番目が高さ。3番目はウィンドウサイズにメニューやツールバーを含める場合はnullを、含めない場合はtrueを記述する。
「適用」の左の入力エリアにカーソルを合わせ、希望するショートカットキーを実際に押す。
すでに他の機能に割り当てられている場合は警告ダイアログが出る。別のショートカットキーにするか、競合する機能のショートカットキーを変更する。
webdeveloper_customResizeWindow()webdeveloper_displayWindowSize()window.moveTo(50,30)追記
idとclass付けに少しミスがあったので修正。修正前のデータは浜賞☆コーディングコンテストVol.1 | CSS HappyLifeに掲載されています。
以下は今回の修正についてですが、長いです...。
alt属性[ ] はフォルダを意味しています。
なるべく余計な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>
スクリーン用とプリント用のそれぞれ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カテゴリでのみ共用する画像ファイルを置く。
今回はファイル名の略語（頭文字など）に以下のルールを適用。
XHTMLのimg要素のロールオーバーにはrollover.jsを使用した。他の手法はCSSが有効で画像を無効化した場合に閲覧に支障が出たりするので。
忘れてしまっていたのはCSSで矢印アイコンなどの1枚画像の位置をずらして、通常時とオンマウス時で切り替えるようにする方法。縦横の幅が変わった時に別の状態用の画像が見えないように注意。
今回も以下の場合の配慮したつもり。
デザインカンプでは全体的に小さめのフォントサイズだったので可読性が低いと感じた。少し大きめに変更して行間も広い方が読みやすそうなところは広げた。フォントサイズの%指定の値に関してはfont-size指定 | d-spicaを参考にしました。
しかし、、、いまだにスマートな方法が分からない。
「ここから本文です」「ここからサイト内共通メニューです」「ページの終わりです」といったテキストを記述した方がいいみたいなので付けてみた。
とりあえずといった感じだけど、メインコンテンツとサブコンテンツにジャンプするリンクを設けました。
設置場所についてはユニバーサルワークスのコラム「スキップのテクニック」を参考にしました。「本文へジャンプ」のリンク先をパンくずリンクにしたのも、同サイトのコラム「とんちんかんなスキップ」を読んだ結果です。
しかし、スキップのリンクテキストがちょっと良くなかったので変更した。
hr要素でコンテンツを大枠で区切るhr要素でヘッダー、メインコンテンツ、サブコンテンツ、フッター、その他（lightbox.jsで使用される画像など）を分けた。CSSを無効にした場合にナビ、本文、サイドバーなどの区別がしやすいかなと。
noscript要素でテキストをメインビジュアルの中ほどに表示させるようにしたが、2xupのnoscript要素が元ネタというかそのまま...すみません。テキストを書き替えようにも他の表現が思いつかず、赤枠＆背景というのも注釈には打ってつけの色だったもので。
コンテストに応募した時はロゴの前に記述したのだが、音声ブラウザで毎回最初に読み上げてしまうのでこれはまずかった。body要素を閉じる前あたりに記述しなおした。
あと、User Centered Designさんへの益子さんの審査コメントを読んだところ、説明文は改善する必要があるようだ。「JavaScript」と「スタイルシート」といった専門用語が一般の人に理解できるかどうかという点。
「JavaScript」とはという説明ページにリンクさせてもなぁ...。Canonのように「JavaScriptを有効にする設定方法」や「スタイルシートを有効にする設定方法」というページにリンクさせればいいのかな？
左に飛び出ている部分をどうするかだが、低解像度（800×600など）のディスプレイで閲覧する際にはジャマになると判断して、飛び出ている部分をロゴ画像から切り離し、背景画像として設定。ウィンドウサイズを小さくした場合には表示されないようにした。
ロゴはホームページだけh1要素で定義して、それ以外ではdl要素を使用し、ロゴ（会社名）をdt要素、タグラインをdd要素で定義した。
ただ1つ疑問というか心配なのは、全ページにタグラインがあるので、スクリーンリーダーではページ遷移するたびに読まれると思うのですが、それにイラっときていないのかということ。タグラインはホームページにだけあればよくて、全ページには必要ない気がする。
画像が無効化の対応だが、応募時は各項目がくっついてしまうので余白を作るために を両側に追加した。今回は上位要素にwidthを設定したので は削除した。
現在地以外は通常はボーダー非表示で、オンマウス時に白のボーダーが表示される設定だが、画像非表示状態では背景に同化してしまう。回避するためにオンマウス時の背景色も設定した。
ただ、現在地を示すものは益子賞を受賞されたUser Centered Designさんの「デザイナーへ提案」にもあるように、現在地を示すものが画像の下のボーダーだけというのはこのサイトデザインでは分かりにくい。画像自体にも何かしらの変化があった方がいいと思う。
alt属性画像のテキストをそのまま表示すれば「RSS」で、それでも伝わると思うのだが、より分かりやすくするために「RSSを購読する」にした。
1桁の月と2桁の月が同時に掲載された時にも右端をそろえるためYY形式にした。
応募時はちょっと安易にminmax.jsを使ってしまったが、ほかの人たちがしているようにデカイ画像1枚を背景画像に設定しなおした。
応募時は角丸デザインと文字を拡大しても崩れないようにするために余計なdiv要素を記述したが、今回は下記のようにdl要素で定義した。
<dl>
<dt>現在地</dt>
<dd><a>ホーム</a> > <a>製品情報</a> > <em>HappyLifeマシン</em></dd>
</dl>
サムネイル写真の拡大には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に設定した。課題はhead要素内の内容を充実させること、目次やコメントの記述やハイコントラスト用のCSSなど...まだありそう。
追記
idとclass付けに少しミスがあったので修正。修正前のデータは浜賞☆コーディングコンテストVol.1 | CSS HappyLifeに掲載されています。
以下は今回の修正についてですが、長いです...。
alt属性[ ] はフォルダを意味しています。
なるべく余計な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>
スクリーン用とプリント用のそれぞれ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カテゴリでのみ共用する画像ファイルを置く。
今回はファイル名の略語（頭文字など）に以下のルールを適用。
XHTMLのimg要素のロールオーバーにはrollover.jsを使用した。他の手法はCSSが有効で画像を無効化した場合に閲覧に支障が出たりするので。
忘れてしまっていたのはCSSで矢印アイコンなどの1枚画像の位置をずらして、通常時とオンマウス時で切り替えるようにする方法。縦横の幅が変わった時に別の状態用の画像が見えないように注意。
今回も以下の場合の配慮したつもり。
デザインカンプでは全体的に小さめのフォントサイズだったので可読性が低いと感じた。少し大きめに変更して行間も広い方が読みやすそうなところは広げた。フォントサイズの%指定の値に関してはfont-size指定 | d-spicaを参考にしました。
しかし、、、いまだにスマートな方法が分からない。
「ここから本文です」「ここからサイト内共通メニューです」「ページの終わりです」といったテキストを記述した方がいいみたいなので付けてみた。
とりあえずといった感じだけど、メインコンテンツとサブコンテンツにジャンプするリンクを設けました。
設置場所についてはユニバーサルワークスのコラム「スキップのテクニック」を参考にしました。「本文へジャンプ」のリンク先をパンくずリンクにしたのも、同サイトのコラム「とんちんかんなスキップ」を読んだ結果です。
しかし、スキップのリンクテキストがちょっと良くなかったので変更した。
hr要素でコンテンツを大枠で区切るhr要素でヘッダー、メインコンテンツ、サブコンテンツ、フッター、その他（lightbox.jsで使用される画像など）を分けた。CSSを無効にした場合にナビ、本文、サイドバーなどの区別がしやすいかなと。
noscript要素でテキストをメインビジュアルの中ほどに表示させるようにしたが、2xupのnoscript要素が元ネタというかそのまま...すみません。テキストを書き替えようにも他の表現が思いつかず、赤枠＆背景というのも注釈には打ってつけの色だったもので。
コンテストに応募した時はロゴの前に記述したのだが、音声ブラウザで毎回最初に読み上げてしまうのでこれはまずかった。body要素を閉じる前あたりに記述しなおした。
あと、User Centered Designさんへの益子さんの審査コメントを読んだところ、説明文は改善する必要があるようだ。「JavaScript」と「スタイルシート」といった専門用語が一般の人に理解できるかどうかという点。
「JavaScript」とはという説明ページにリンクさせてもなぁ...。Canonのように「JavaScriptを有効にする設定方法」や「スタイルシートを有効にする設定方法」というページにリンクさせればいいのかな？
左に飛び出ている部分をどうするかだが、低解像度（800×600など）のディスプレイで閲覧する際にはジャマになると判断して、飛び出ている部分をロゴ画像から切り離し、背景画像として設定。ウィンドウサイズを小さくした場合には表示されないようにした。
ロゴはホームページだけh1要素で定義して、それ以外ではdl要素を使用し、ロゴ（会社名）をdt要素、タグラインをdd要素で定義した。
ただ1つ疑問というか心配なのは、全ページにタグラインがあるので、スクリーンリーダーではページ遷移するたびに読まれると思うのですが、それにイラっときていないのかということ。タグラインはホームページにだけあればよくて、全ページには必要ない気がする。
画像が無効化の対応だが、応募時は各項目がくっついてしまうので余白を作るために を両側に追加した。今回は上位要素にwidthを設定したので は削除した。
現在地以外は通常はボーダー非表示で、オンマウス時に白のボーダーが表示される設定だが、画像非表示状態では背景に同化してしまう。回避するためにオンマウス時の背景色も設定した。
ただ、現在地を示すものは益子賞を受賞されたUser Centered Designさんの「デザイナーへ提案」にもあるように、現在地を示すものが画像の下のボーダーだけというのはこのサイトデザインでは分かりにくい。画像自体にも何かしらの変化があった方がいいと思う。
alt属性画像のテキストをそのまま表示すれば「RSS」で、それでも伝わると思うのだが、より分かりやすくするために「RSSを購読する」にした。
1桁の月と2桁の月が同時に掲載された時にも右端をそろえるためYY形式にした。
応募時はちょっと安易にminmax.jsを使ってしまったが、ほかの人たちがしているようにデカイ画像1枚を背景画像に設定しなおした。
応募時は角丸デザインと文字を拡大しても崩れないようにするために余計なdiv要素を記述したが、今回は下記のようにdl要素で定義した。
<dl>
<dt>現在地</dt>
<dd><a>ホーム</a> > <a>製品情報</a> > <em>HappyLifeマシン</em></dd>
</dl>
サムネイル写真の拡大には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に設定した。課題はhead要素内の内容を充実させること、目次やコメントの記述やハイコントラスト用のCSSなど...まだありそう。
賞のことはまったく考えてなかったので驚きました。関係者のみなさん、いろいろとありがとうございました。そしてサイトを訪れていただいた皆さん、Web関連の記事がなくてすみません...。
現在、作業中にメモしておけばよかったことや反省点などをまとめ中...。ほかの人たちの作品も参考にしたあとで課題サイトの改良版もつくろうと思いました。
それではまた後日。
]]>賞のことはまったく考えてなかったので驚きました。関係者のみなさん、いろいろとありがとうございました。そしてサイトを訪れていただいた皆さん、Web関連の記事がなくてすみません...。
現在、作業中にメモしておけばよかったことや反省点などをまとめ中...。ほかの人たちの作品も参考にしたあとで課題サイトの改良版もつくろうと思いました。
それではまた後日。
]]>勘違いとわかったのは巣鴨のとあるお店に置いてあった小冊子「巣鴨百選」。読んでみると本堂の外にあるのは「洗い観音」と呼ばれるもので、「とげぬき地蔵尊」は本堂の奥に安置されていて誰も直接拝んだことはないという。
そうとは知らずに初詣に行っていた僕にご利益があったかどうか...。みなさんも参拝の前にはちゃんと確認しておこう。
ちなみに「とげぬき地蔵尊」「洗い観音」の正確な名称はそれぞれ「延命地蔵菩薩（えんめいじぞうぼさつ）」「聖観世音菩薩（しょうかんぜおんぼさつ）」。
]]>勘違いとわかったのは巣鴨のとあるお店に置いてあった小冊子「巣鴨百選」。読んでみると本堂の外にあるのは「洗い観音」と呼ばれるもので、「とげぬき地蔵尊」は本堂の奥に安置されていて誰も直接拝んだことはないという。
そうとは知らずに初詣に行っていた僕にご利益があったかどうか...。みなさんも参拝の前にはちゃんと確認しておこう。
ちなみに「とげぬき地蔵尊」「洗い観音」の正確な名称はそれぞれ「延命地蔵菩薩（えんめいじぞうぼさつ）」「聖観世音菩薩（しょうかんぜおんぼさつ）」。
]]>1年ほど語学留学をしたことがあるのだが、帰国して数か月も使わないと信じられないスピードでどこかへ行ってしまった。特にひどいのはスピーキングで、留学しに行く前と大差ないんじゃ？というくらい。
さてさてレッスンを受けていくうちに英語は帰ってくるのだろうか。
]]>1年ほど語学留学をしたことがあるのだが、帰国して数か月も使わないと信じられないスピードでどこかへ行ってしまった。特にひどいのはスピーキングで、留学しに行く前と大差ないんじゃ？というくらい。
さてさてレッスンを受けていくうちに英語は帰ってくるのだろうか。
]]>何だろう？と前の方をのぞいてみると、先頭には杖をついたお婆ちゃんが立っていた。エスカレータの運転速度が速すぎてタイミングが合わせられず足が出せないでいるようだ。
このエスカレータはごく一般的な運転速度だと思うが、それでもお年寄り（もしくは足の不自由な方）には速すぎるのだ。
このときは前の方にいた2人の女性がお婆ちゃんに声を掛け、両脇を抱えてエスカレータに乗せてあげ、無事に下まで降りることができた。お年寄りがひとりでも安心して乗れるようにはならないのだろうかと思う。
全てのエスカレータの速度を遅くすると、乗り場前の列が長くなってしまうのが目に見えるからもちろんダメだと思う。「速度を維持しつつ乗りやすく」となると、乗り口と降り口の水平部分が長いエスカレータがいいんじゃないかと思う。歩行の延長といった感じでステップに乗れるから。ただ、設置スペースの問題なのかたまにしか見ない。
西友巣鴨店のエスカレータの運転速度はお年寄り仕様となっていて、体感で他のエスカレータの半分くらいのスピードだ。いまは慣れたが最初に乗ったときは「遅っ！」と口に出してしまった。巣鴨に立ち寄った際はぜひお試しあれ。
]]>何だろう？と前の方をのぞいてみると、先頭には杖をついたお婆ちゃんが立っていた。エスカレータの運転速度が速すぎてタイミングが合わせられず足が出せないでいるようだ。
このエスカレータはごく一般的な運転速度だと思うが、それでもお年寄り（もしくは足の不自由な方）には速すぎるのだ。
このときは前の方にいた2人の女性がお婆ちゃんに声を掛け、両脇を抱えてエスカレータに乗せてあげ、無事に下まで降りることができた。お年寄りがひとりでも安心して乗れるようにはならないのだろうかと思う。
全てのエスカレータの速度を遅くすると、乗り場前の列が長くなってしまうのが目に見えるからもちろんダメだと思う。「速度を維持しつつ乗りやすく」となると、乗り口と降り口の水平部分が長いエスカレータがいいんじゃないかと思う。歩行の延長といった感じでステップに乗れるから。ただ、設置スペースの問題なのかたまにしか見ない。
西友巣鴨店のエスカレータの運転速度はお年寄り仕様となっていて、体感で他のエスカレータの半分くらいのスピードだ。いまは慣れたが最初に乗ったときは「遅っ！」と口に出してしまった。巣鴨に立ち寄った際はぜひお試しあれ。
]]>天井から30cmくらいが煙で真っ白になっているお店が目につきました。ちょっと撮ろうかなとカメラを構えようとした瞬間目に飛び込んできたのは「撮影禁止」の張り紙が...うーん、残念。
谷中を一通りブラブラと歩き回った帰り道、谷中銀座を抜けたところにちょっとした人だかりができてました。何だろうとのぞいてみるとのら猫が5匹も丸くなってるじゃないですか。
一番上に写っている猫はぺろっと舌がでてました...。
ブラブラしに行きたいところがまた増えました。
]]>天井から30cmくらいが煙で真っ白になっているお店が目につきました。ちょっと撮ろうかなとカメラを構えようとした瞬間目に飛び込んできたのは「撮影禁止」の張り紙が...うーん、残念。
谷中を一通りブラブラと歩き回った帰り道、谷中銀座を抜けたところにちょっとした人だかりができてました。何だろうとのぞいてみるとのら猫が5匹も丸くなってるじゃないですか。
一番上に写っている猫はぺろっと舌がでてました...。
ブラブラしに行きたいところがまた増えました。
]]>境港市は漫画家の水木しげる氏の故郷で、町全体に水木ワールドが広がっているそうです。
境港駅から商店街まで（約800mm！）は妖怪のブロンズ像120体が設置された「水木しげるロード」になってて、その終点には「水木しげる記念館」があるとのこと。境港市観光協会のサイトをみると面白そうなことがまだまだありそう。うーん、ぜひ行ってみたい。
]]>境港市は漫画家の水木しげる氏の故郷で、町全体に水木ワールドが広がっているそうです。
境港駅から商店街まで（約800mm！）は妖怪のブロンズ像120体が設置された「水木しげるロード」になってて、その終点には「水木しげる記念館」があるとのこと。境港市観光協会のサイトをみると面白そうなことがまだまだありそう。うーん、ぜひ行ってみたい。
]]>価格は約50万円ということですが、なにやらDIGIC IIIを2個搭載しています。デジタルカメラもついにデュアルコア時代に突入といったところでしょうか。
処理速度がどのくらい速くなっているのか気になるところだけど、EOS 30Dなどのエントリー機に2個は搭載されないだろうから（コスト面やボディサイズなどを考えると）、まぁ関係ないっちゃ関係ないか...。
それよりも防滴・防塵処理＆ゴミ対策を施されたEOS 5D後継機が発売されることを待ち望んでいます。EOS 30Dはいいカメラだけど、やっぱり35mmフルサイズCMOS搭載機が欲しい。
とりあえず、1D Mark IIIの特長を以下に掲載。
価格は約50万円ということですが、なにやらDIGIC IIIを2個搭載しています。デジタルカメラもついにデュアルコア時代に突入といったところでしょうか。
処理速度がどのくらい速くなっているのか気になるところだけど、EOS 30Dなどのエントリー機に2個は搭載されないだろうから（コスト面やボディサイズなどを考えると）、まぁ関係ないっちゃ関係ないか...。
それよりも防滴・防塵処理＆ゴミ対策を施されたEOS 5D後継機が発売されることを待ち望んでいます。EOS 30Dはいいカメラだけど、やっぱり35mmフルサイズCMOS搭載機が欲しい。
とりあえず、1D Mark IIIの特長を以下に掲載。
「猫の日制定委員会」が1987年に制定。ペットフード工業会が主催。となっています。
最近、たまに窓の下あたりで猫が何度もくしゃみしています。とても苦しそうなのですが、猫も花粉症になったりするのだろうか...？
]]>「猫の日制定委員会」が1987年に制定。ペットフード工業会が主催。となっています。
最近、たまに窓の下あたりで猫が何度もくしゃみしています。とても苦しそうなのですが、猫も花粉症になったりするのだろうか...？
]]>カラダに良いのは分かっていたんですけど、小学校の給食で出た時の、あの強烈なにおいがトラウマとなって今まで避けてきました。
そんな僕がなぜ食べてみようと思ったのかというと、別に某テレビ番組を観たからではなく、友人の強いススメ「納豆食べときゃ大丈夫」
と味覚と同じように嗅覚も変化するからひょっとしたら...ということです。
食べてみようとスーパーに行ったものの、売り場の前に立つと「やっぱりくさいもんはくさいんじゃ？」とちょっと弱気になり、においの薄いものを手にしました。そう、ミツカンのにおわなっとう™です。
全くにおわない！というわけではありませんでしたが食べることはできました。感想としては、まぁ、すごくおいしいとは思いませんでしたが前ほど抵抗はなくなりました。
徐々に他の納豆にも挑戦して健康に一歩ずつ近づいていこうと思います。
]]>カラダに良いのは分かっていたんですけど、小学校の給食で出た時の、あの強烈なにおいがトラウマとなって今まで避けてきました。
そんな僕がなぜ食べてみようと思ったのかというと、別に某テレビ番組を観たからではなく、友人の強いススメ「納豆食べときゃ大丈夫」
と味覚と同じように嗅覚も変化するからひょっとしたら...ということです。
食べてみようとスーパーに行ったものの、売り場の前に立つと「やっぱりくさいもんはくさいんじゃ？」とちょっと弱気になり、においの薄いものを手にしました。そう、ミツカンのにおわなっとう™です。
全くにおわない！というわけではありませんでしたが食べることはできました。感想としては、まぁ、すごくおいしいとは思いませんでしたが前ほど抵抗はなくなりました。
徐々に他の納豆にも挑戦して健康に一歩ずつ近づいていこうと思います。
]]>![[写真: 谷中にいた5匹ののら猫たち]](/blog/images/2007/03/five_cats_in_yanaka)
![[写真: 目玉の親父と猫娘の人形焼]](/blog/images/2007/02/tiny_sweet_buns)