If you’re looking for the more honest, truthful answer to pretty much any question on web design and usability, here it is:
It depends.
カテゴリー: WebDesign
献本いただきました「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック」
会社の同僚（と言うか先輩！）が執筆した新しいレスポンシブWebデザイン（以下、RWD)の本が先日発売されました。献本として1冊いただいたので簡単に紹介。
追記（2012-12-27）：著者本人による「5分で分かる！本書の見どころ・読みどころ」のスライドを追加しました。
僕がウェブマスターとして働いている大学のサイトを2011年10月頃にリニューアルしたのですが、その際にRWDを採用しました。その時の経験を、もう1人のウェブマスターが個人ブログに記事として投稿し、その後もいくつかRWDに関連する記事を投稿しています。そんなことがきっかけとなり、今回「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック」として刊行されることになりました。
内容はというと、基本編、準備編、実践編の3部立てで、RWD全般をぐるっとまるっとカバーしている感じです。基礎編は基礎知識に関することで（そのまんまw）、RWDを取り巻く状況や概念について書かれています。準備編はワークフローや制作体制、必要なスキル、パターンライブラリ、フレームワーク、ブラウザ・実機チェック等々。実践編ではメディアクエリやViewport、グリッド・システム、パフォーマンスの最適化、CSSスプライト、IE対応などの解説に続き、最後に簡単なサンプルサイトを作っていく章があります。
319ページ！分厚い！
より詳しくは目次をチェックしてみてください。
300ページ超えの盛りだくさん（？）な内容ですので、気になる方は手にとってみてください。RWDに対する個々のスタンスは別として、このあたりでガッツリと学んでおきたい方にはこの冬休みの読書として良いかもしれませんね。
発売日はつい先日だったので（12月20日）、もしかしたら大きめの書店にしかまだ並んでいないかもしれません。
※なお、まだ読み始めたばかりなので具体的なレビューはまた別の機会に。
著者本人による「5分で分かる！本書の見どころ・読みどころ」のスライドを追加しました。
レスポンシブWebデザイン 制作の実践的ワークフローとテクニック
posted with amazlet at 12.12.21
渡辺 竜
ソシム
売り上げランキング: 13,477
ソシム
売り上げランキング: 13,477
Amazon.co.jp で詳細を見る
ブログのデザインを少し変更 – ver.7
ブログのデザインをちょこっと変えました。これで少しすっきりしたかと。右側の黄色を取っ払おうかどうか考えましたが、結局は以前よりもちょっとだけ細くして、メインコンテンツとの間のホワイト・スペースを増やしました。
その他には、コメントやコメント周りや…
Continue reading
W3C Tenth Anniversary in Asia
W3C’s 10th anniversary symposium is coming to Japan. Speakers include Tim Berners-Lee.
W3C10 Asia is the celebration of the tenth anniversary of the founding of W3C’s Asian host at Keio University in Japan in September 1996. The event will be held on Tuesday, 28 November 2006, at the Hotel Nikko Tokyo, Japan. W3C10 Asia is open to the public, W3C Members, the W3C Team, the international media, and invited speakers and dignitaries. Registration is required for all attendees. There is a small fee for members of the public. W3C10 Asia includes a symposium and exhibition, a press briefing, and a reception. Simultaneous interpretation between English and Japanese will be provided at all symposium sessions.
Something completely different … I just realise how this venue “Hotel Nikko Tokyo” is very confusing when written in English. I first thought its at Nikko, but this “Nikko” is actually “Nihon-kouku” a.k.a Japan Airlines, and its in Tokyo …
他言語止めます
突然ですが、Waviaei開設当初から続けてきた、英語と日本語での多言語ブロギングを止めることにしました。これからは英語でのみ記事を書いていくことにしました。
理由は幾つかあるのですが、中途半端になってきた、日本語と英語の文化に違いの大きさを改めて気づかされた、当初の目的、目標からずれてきた、等です。
英語を選択した事についてはまず、ブログを開設使用と思ったきっかけです。日本のことや、日本で起きている事などを英語で、個人ブログの視点から書こうと思ったのが動機でした。そこに戻ろうと思ったのが１つです。それから、やっぱり自分は英語の方がダァーっと気持ちよく書けるのです。日本語向上の努力が足りないと言えばそれまでですが・・・。あと、英語の方がレスポンスを多くもらった印象があります。やはり日本人には一言でも良いから「気軽に直接本人へコメント」は向かないのでしょうか？
もちろん、たどたどしい日本語も含めて、僕の書き手としての能力が低いのは否めませんが。
と言うことで、一応日本語の記事を書くのはこれで最後となります。英語でもいいよ、と言う方はこれからもよろしくお願いします。主に日本関係の記事がメインとなるはずですが、所々WordPressの事とかも書くはずです。今までの記事（英語も日本語も）は消えませんので、アーカイブスからアクセスできますし、パーマリンクも変わりません。
日本語は別のブログとしても良いのですが、そこら辺はおいおい。さくらのサーバーは１つしかＤＢを作れないので、今ちょっと混雑してます。なので、ＷＰをインストールして日本語で、と言うのはおそらくしないと思います。ＭＴ+Sqliteとかサインアップするやつとかはありかな？ WordPress.comとかVoxとか、あとは、うーん。あっでも招待必要だっけ？そう言えば、はてなのアカウントはまだリングでしか使ってないな・・・。
東京でのＷＰオフ会行きたいなぁ。でも行けるかなぁ。。。
IE７はDoubled Float-Margin Bugが修正されているのとIEハック
今回の新しいデザインを作成した際に、IE固有のバグ「IE Doubled Float-Margin Bugに悩まされました。
このバグは、floatするとmarginが２倍となる、IEのみの原因不明バグ。今回でのデザインでもそうだったし、おそらく一番起こりやすいケースが、divをfloat: leftで回り込ませて、同じdivにmargin-left: 20pxと同じ左方向へマージンを指定するケース。20pxがなぜか２倍の40pxに表示されてしまう。Waviaeiのフッタのように、複数のdivを全てfloat: leftさせると、一番左端のdivのマージンが２倍になる。
解決方法はpositioniseverything.netで示されているように、display: inlineを指定するか、CSSプロフェッショナル・スタイルのp.248に書かれている、マージンの代わりにパディングで指定する。
リ・デザイ・・・ン？
Waviaeiのデザインをまた変えました。今回も全て一から作ったんですが、ゴメンナサイ。IEのチェックが甘かったです。IEは、最近入れたIE7betaでチェックすると問題なかったので、IE6だとPNGだけを入れ替えるとOKなんじゃないかと思ってた。でもサイトのトップやでっかいフッタの部分の「ブロック」が１つずれる。原因がいまいちわかりません。Widthのトータルを親divのwidthよりも少なくしても変わらない。う～ん。
早急に原因を解明して直します。また、良い機会なのでIE7でも使えるCSSのブラウザ振り分けとハックを実践してみようかと。
WaviaeiへのアクセスはIEとFirefoxが同じくらいですが、わずかの差でIEがトップ。以外にも（失礼！）Safariからのアクセスも結構あります。でもMac持っていないので、Safariでもおかしかったら教えてください。
Internationalization Primer
プログラミング寄りで、全て理解できたわけではありませんが、i18n 関連の記事メモ。Digital Web Magazine にて Jonathan Snook 氏が書かれた「Internationalization Primer」。
i18n の段階で l10n に対応できるウェブサイトをプログラミングする。小文字２文字（ISO639-1）で言語を、大文字２文字（ISO3166）で国を表す。訳す言葉を「key/value」のペアにしてテキスト・ファイルにする。もしくはデータベースに。
似たような記事を最近どこかで読んだ気がするなぁ・・・。
CSSよりもHTMLの方が大事
CSS does not make a site accessible. CSS does not make your site rank higher in search engines. Good CSS does not make you an elite web programmer. I don’t code CSS. CSS is misunderstood.
訳すと、「CSSはサイトをアクセシブルにはしない。CSSはサイトをサーチエンジンに最適化しない。良いCSSが書けても、優れたウェブ・プログラマにはなれない。私はCSSのコーディングはしない。CSSは誤解されている。」
題名の「ＣＳＳに価値は無い」と共にセンセーショナルな見出しと始まりですが、要するにCSSよりもHTMLの方が重要だと Mike Stenhouse 氏は書いてます。CSSを用いるのは、セマンティックなHTMLを書いているから。そのセマンティックなHTMLの見た目を整える為にCSSを用いている。
ふと思った。世界一のインターネット環境が整っている日本。でもなかなかテーブルレイアウトを抜け出せない事も含め、セマンティックな方向に進まない。セマンティック・ウェブの可能性を自ら閉じているようにおもえるのだが・・・。世界一に環境がもったいない。
（セマンティック・ウェブについてはメタ情報とセマンティック・ウェブが詳しいです。）
言語選択の表示に国旗は使うな（パート２）
（・・・パート１から続く）
ではどのようにするのが一番よいのか？
Technique 15: Using hreflang with CSS のやり方が W3C で書かれています。しかし先日、と言っても１ヶ月ほど前ですが、456 Berea Street に書かれた Indicating language choice: flags, text, both, neither? （言語選択の表示： 旗、テキスト、両方、別の方法？）と言う記事の方が面白い。コメントも沢山書かれていて、読んでいてすごく興味深いので、ちょっとそちらの方をまとめてみます。
言語選択の表示に国旗は使うな（パート１）
ブログなどでもよく国旗を言語選択の表示に使うとをよく見かけます。しかしこれは「Authoring Techniques for XHTML & HTML Internationalization: Specifying the language of content 1.0」： Technique 16: Don’t use flags to indicate languages でも書かれている通り、良い方法では有りません。理由は Technique 16 のディスカッションに書かれている説明が非常にわかりやすいです。
Flags represent countries, not languages. There are many countries that use the same language, and numerous countries that have more than one official language.
（国旗は国を表す旗であり、言語を表す物ではない。同じ言語を使用する国は数多く有り、また１つ以上の言語を公用語として定めている国も数多くある。）
Throw tables out the window … not in Japan
This recent research into the company websites of those listed in the Nikkei 225 index of the Tokyo Stock Exchange, has shown that 68.9%(155 out of 255) still uses table layout. Those with CSS layout are only 12.4% (28 out of 255). A hybrid of table and CSS layout are 14.2% (32 out of 255). A rather dissapointing 4.4% (10 out of 255) are Flash only.
More than 50% of the sites are constructedin HTML4.01 transitional, less than 10% are XHTML1.0 strict or transitional. 79.1% do not specify the DTDs. 51.6% of the site uses flash in some way, and 6.2% uses frames.
(The percentage figures are taken from the attached pdf file.)
This does not mean that the rest of the company and corporations in Japan are also uses table layout. Also, in most cases the websites are developed by the developers and creators outside, ie as a client.
Its been nearly two years since Douglas Bowman wrote an article “Throwing Tables Out the Window”. Together with past research into the website layouts of prefectural concils, major city councils, governmental, and portal sites in Japan, looks like the table layout is still the way to go in Japan.