実践 Web Standard Design （ホップ本）

本日（11月29日）発売（再販）ということでずっと待っていた、
「実践 Web Standard Design Web標準の基本とCSSレイアウト&Tips」をようやく手に入れました。

ちまたではホップ本と呼ばれているらしいです。
おそらく、この本の表紙にホップの写真あるからのようです。
（最初は、再販本＝ホップ本だと思ってました。）

２日前くらいには書店にあるかもよ？という情報を胸に、わくわくしていたのですが見つからず。
本日４件目の本屋でようやく購入できました。

やはり再販本だと古い方の本ばかり見つかるうえ、
その再販前の本も販売停止しているので、在庫がなかったり。
本屋の店員さんにはいろいろ時間を割いていただいてありがたい限りです。

最終的に東京都下某駅ビル内の書店で購入したのですが、
店員さんには「12月1日発売ということになってますね。」と言われ。
（納品は今日との事だったので、届いたばかりの本を頂きました。
納品時ご丁寧にお電話をくださった店員さんには本当に感謝です。）

都内なのに、この時間差はいったい何なんだ。
Amazonではもう販売しているのに。
…じゃあAmazonで予約しとけって話なんですが。
（なんかこう、自分で手にとって持って帰りたかったんです。）

ということで、これからじっくり読みたいと思います。

DOMScripting標準ガイドブック

マイコミから出ている、DOMScripting標準ガイドブックを購入しました。

DOMの基礎部分や、Web標準とJavaScriptの使いどころを丁寧に解説していてかなり勉強になります。
「Web標準」におけるJavaScriptの立ち位置とか、JavaScriptの書き方入門とか、
JavaScriptに関する話は基礎のみで、どちらかというと概念の話が多かったように感じます。

今、お仕事を頼まれているWebサイトにJavaScriptでアコーディオンメニューをつけようと思っていたので、
この本を参考にプログラムを書こうと思っていたのですが、

無理でした。

どうも、IDを参照するまではいいのですがその先がうまくいっていないようです。
結局jQueryを使って何とかしましたが、（コードは非常に汚いですが）
勉強が必要だな・・・と痛感しました。

この書籍に関しては、
「JavaScriptがでしゃばってはいけない」
「JavaScriptが有効な環境でしか意味を成さないオブジェクトは、HTMLに書くのではなく、JavaScriptで生成する」
といった精神論が非常に参考になりました。

ただ、PrototypeとかjQueryなど、ライブラリの利用については一切書かれていなかったので、
ライブラリを利用しての作業関しては他の書籍を参照した方がいいと思います。

JavaScript、勉強します。

内定研修

本日、内定先の研修会が開かれました。

研修の内容は、アクセシビリティに関するものとWeb標準に関するもの。

アクセシビリティに関しても、かなり有意義なお話が聞けたのですが、
今回はあまりにもコア過ぎたWeb標準研修についての感想をば。

とりあえず、第一声として。
あまりに、専門的過ぎでした。
内定者研修でやる内容というよりは、もうCSSNiteとか（行ったことないけど）カンファレンスでやっておかしくないレベル。
本当に、これはお金払ってもいいくらい勉強になりました。

ただ、わかる人とわかんない人との差が激しすぎるのかなあと…。感じました。
個人的にはものすごく勉強になったし、嬉しかったし、感動しました。
実際に現場で働いている人が生でコーディングしてくださるのですから。
いわゆる、ライブコーディングというヤツです。

一番驚いたのが、グローバルナビゲーションに画像を使っていたこと。
SEOを考えると、画像よりもテキストの方がいいとか、いろいろ言われているのですが、
堂々とimgタグで画像を埋め込んでいらっしゃいました。
JavaScriptでロールオーバーするからimgタグで埋め込んだんだと思いますが、
SEOよりもユーザビリティ、アクセシビリティを重視してるんだなと感じました。

あとは、JavaScriptを毛嫌いしちゃいけないということです。
DOMの本も買ったし、本格的に勉強してみようかなと。

語ると長くなってしまうので、発見した要点だけおさえます。

• 定義リストのなかにナビゲーションを入れる。dtにはナビゲーションの概要、ddにはナビゲーション本体を入れる。
• コンテンツをhrタグで区切り、CSSでラインを非表示にする（おそらく、CSSが表示されない環境で見やすくするため）
• 画像の絶対配置。（画像だと、文字サイズが変わっても見え方が変わらないため、絶対配置でも問題なし。）
• まずFirefoxでコーディング。その後IEのレンダリングをみて再調整。
• ロールオーバーなどの「振る舞い」は、CSSの画像置換ではなくJavaScriptで。

とにかく情報量が多すぎて…頭が痛かったです。
正直、コーダーとしての自信はきれいさっぱり喪失しましたが、
ずっとWeb標準関連のことについては勉強したいと思っていたので、
今回の研修はほんとうに参考になりました。
感謝感謝です。

ブラウザ差異とリセットCSS

今さらの話題ではありますが、友人のブログに記述があったので。

どのブラウザでも同じレイアウトが約束されるテーブルと違い、
CSSによるレイアウトはブラウザ間でかなり表示に違いがでます。

widthにpadding分の数値が入るだの入らないだの、
floatで指定した方向にマージンを指定すると2倍になるだの、
互換モードになるとフォントのサイズがうまくいかないなどなど。

こういったブラウザによるバグのほかにも、
ブラウザにあらかじめ組み込まれている「デフォルトCSS」なるものもあり、
これもブラウザによってバラバラです。

そこで、俗に「リセットCSS」と呼ばれるものが使われます。
簡単に言うと、すべてのHTMLタグのpadding、marginをゼロに（リセット）するもの。

さすがにブラウザ間のバグをどうこうすることはできませんが、
デフォルトCSSをリセットすることで、ブラウザ間の差異をある程度無くすことができます。
（リセット　CSS　で検索するといろいろ出てきます。）

誰から聞いたか忘れてしまいましたが、
Webは、情報発信媒体で唯一、情報の表示方法が情報の受け手に依存してしまうものです。

テレビの画面はみんな同じ画面だし、雑誌のレイアウトも、見る側が自由に変えることはできません。
でも、Webだけはそうではなくて。
ブラウザによって差異はあるし、OSによっても違うし、画面サイズ、CSSが対応していないブラウザだったり、画像を表示しないブラウザなど、受け手によって見え方が違ってくる。
情報の送り手が、情報の見え方を制御できないのです。

それならあえて見え方を統一する必要もないんじゃないかなぁ、と個人的には思うんです。
見え方を固定できないっていうのがWebならではの個性だと思えば、そんなにイライラもしないし。

ただやっぱりデザイナーさんとしては、自分の作った渾身の、わが子同然の作品が、ブラウザによってずれてるのは許せないことだと思います。

私みたいなデザインに無頓着のコーダーとしては、ブラウザによる差異が新鮮で面白かったりします。
（これは異端かもしれませんが…。）

こればっかりはコーダーの一意で決めることはできません。
別にデフォルトCSSをリセットして大してソースが汚れることはないですから、
デザイナーさん、クライアントさんの意見を優先した方がいいかと。

divなしサイト２

前回のdivなしサイトという記事で、divを使わずにサイトが作れるんだよ。という紹介をしました。

いてもたってもいられなかったので、
ポートフォリオサイトをdivなしで制作してみました。
（影響されやすい人間です。）

• div（span）なしで作ったサイト。
• divありのサイト。

divなしのサイトでは数々の妥協点、手抜き工事が見受けられます。

別に、divつけないでサイトを作ると神だとか、そういうことが言いたいのではありません。
世の中には色々な盲点があって、「CSSでWebサイトを作るときにはdivを使わなければならない」というのも、そのひとつだと思っています。

divを使ったほうがサイトを作りやすいし、管理もしやすい。
だけど、なんとなくdivを連呼することに対して違和感もあり。
そんな葛藤があると、心のどこかで納得のいかないサイトになったり。

「divなんて本当は使いたくないけど、仕方なく使ってるんだ」という感情よりも、
「divを使わずにサイトは作れるよ。でも、こういうデザインはできないから、divを使うんだよ。」
のほうがポジティブな気がしません？
愛情を持ってdivを使える気がするのです。

だからdivなしサイトを作ってみました。

最近はそんな精神論ばかり書いている気がします。