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.
ウェブサイトの国際化、ローカル化、多言語
ウェブサイトの国際化、ローカル化、多言語に興味が有ります。とは言うものの、これらに関して１つも記事を書いていませんでした。とりあえず、まずは言葉の定義を簡単にまとめて整理。
- Internationalization（国際化）
- Internationalization（インターナショナライゼーション）は国際化と言う意味。i18Nと略されることもある。i18nとは、ウェブサイト、アプリケーション、ドキュメント、等々のプロダクツをローカル化しやすい用に設計、デザインする事。
- Localization（ローカル化）
- Localization（ローカライゼーション）はローカル化、つまりその国や地域に合わせて表示言語等を変更する事。l10nとも略される。
- Monolingual（モノリンガル）
- Monolingual（モノリンガル）とは１つの言語で構成されていること。
- Multilingual（マルチリンガル）
- Multilingual（マルチリンガル）とは１つ以上の言語で構成されていること。２つの言語を意味するbilingual（バイリンガル）もマルチリンガルに入る。
i18nとl10nは似ているように思えるが、意味は明確に違う。i18nは大きな枠組みで、方向性のようなもの。l10nがそのプロセス。i18nの中にl10nがあると考えたら良い。i18nはウェブ制作よりも以前からソフトウェア開発でよく使われていた概念のようですね。
l10nはモノリンガルなサイトだ。サイト全体がその国、もしくは地域に考慮して、言語やデザインなどを変えている。
高槻市ウェブサイトに見る、行政ウェブサイトの評価のされ方
今朝の朝日新聞の朝刊。地域（大阪）の面に写真付きでこんな見出しが出ていた。
高槻市ＨＰが特選に
全国広報コンクール
職員ブログ「発信の姿勢」評価
同ＨＰは０４年に入選しており、今回は総務大臣賞（なんで総務大臣なんですかね）に輝いた。審査会は、市民や職員によるブログを「市役所みんな、市民みんなで情報発信していく姿勢がうかがえる」、地図情報や天気のリンクを「使われ。見られる情報に向けた試行錯誤が感じられる」と評価。（朝日新聞より一部抜粋）
そこでチェックしてみました：–Takatsuki City 高槻市–。ＣＳＳでは無くテーブルレイアウトです。フォント等にもほとんどＣＳＳは使われていません。W3C Markup Validatorでエラーが無ければ良いと言うわけではないのですが、エラーが出る箇所が li が ul に囲まれていないと言うのが気になる。ＨＴＭＬタグがすべて大文字なのも。文字を大きくする方法の説明にNNとOperaが有るのになんでFirefox無いん？ 「–Takatsuki City 高槻市–」がtitleに記述されていますが、日本語を先にすべきでは？
以前、益子貴寛さんが「都道府県の脱テーブル状況」を調べられ、おさんぽさんぽさんも県庁所在地及び政令指定都市のWebサイト脱テーブル状況を調べられましたが、高槻市もまだまだ脱テーブルレイアウトができていないですね。ちなもに受賞したほかの行政サイトもすべてテーブルレイアウト。
じゃあなぜ総務大臣賞を受賞したんだ？
BBC Web API
報道、ジャーナリズム、番組制作、そしてこれらのオンラインでの試み。すべての面で世界をリードしているメディア、ＢＢＣですが、以前から「to follow」になっていたAPIがベータ版として公開されたようです。APIのサイトはbackstage.bbc.co.ukの外にあるのでほんとにまだまだテスト中って事かな。
技術的な事は僕にはまだわからないのですが、BBCの番組に関するいろいろな情報がTV-Anytimeフォーマットで提供されるそうです。「TV-Anytimeって何やねん？」ですが、ホームサーバを前提としたコンテンツ配信の国際標準フォーマットなんだとか。BBC Web API で何ができるかは、僕が説明するより百聞は一見に如かず。Exampleを見た方が早い。
「想像力働かせてマッシュアップ！」なので、どんなのが生まれるのか興味あるなぁ。
CSS Reboot 2006
CSS Reboot Spring 2006 は、５月１日に皆で一斉にリ・デザインしようと言うイベントで、去年も行われ今年は２回目だそうです。僕が知ったのは２日ほど前ですが・・・。目にとまったサイトとか、気になったサイトを幾つかピックアップしてみました。Waviaei のデザインも僕の中ではヴァージョン０．５くらいなので、色々と参考にしたいと思います。
faviconを設置しました
Favicon（ファビコン）を作りました。デザインはヘッダーのイメージから「W」を取って四角にしただけの簡単なものです。以下は作り方の簡単なメモです。
Waviaei ver. 0.5 ・・・ くらい
WordPressでは初めて一からテーマを作ってみました。テストブログの方でテストしてみたけど、やっぱりこっち（Waviaei）にインストールすると色々と不具合がでてきますね。コーディング周りをチェックしてたら出るわ出るわ、記事本文中のコーディングミス。記事を書く時にリッチ・エディタを使っていないので、時々手打ちでタグを入れます。そのときにプロパティのクォーテーション・マークが抜け落ちていたり、>が抜けてたり:oops:
この変はハックしたり、プラグイン探したりして解決したいと思います。記事書くときの手間は、ミスと快適度に直結するような気がします。とりあえず、修正が必要な点とか、気になった点をリストアップ。
CSS: background要素の正しい書き方
background要素に関する指定はまとめて行うことができるけど、プロパティの並び順は問われないと言うのはどうも間違いらしい。
sDSの Craig Erskine 氏によると正しい書き方、 厳密に言うと、ブラウザによって生じる問題を回避する為の書き方が有るとのこと。
よく使われるのは
[css]background: {color image position-y position-x repeat attachment}[/css]
の順だけど、これだと古いバージョンの Safari で問題がある（具体的なバージョンは不明）。正しくは
[css]background: {color image repeat attachment position-x position-y}[/css]
ポイントは２つ：
- repeat attachment position の並び順
- x そして y の順
特に、x y に関しては padding 要素や margin 要素、border 要素のプロパティの場合と違うので注意。バグの症状は、それぞれ y を x 、x を y として処理される。
ちなみにW3Cのページではこの順でリストされている。ただしリスト順が正しいとは書かれていない。
CSS Proffesional Style
There is a Japanese magazine on webdesign titled “Web Designing”. It is a monthly magazine, and the best regular article in the magazine is called “CSS Analysis”. This series of article basically focus on a much talked and well designied XHTML+CSS site every month, and as the title suggests, analyse how CSS is used. So we can learn from CSS techniques, patterns, layouts, trends, etc, from top stuff webdesign around the world (outside Japan). A bit like an in depth analysis into kind of sites thats picked up in CSS Beauty, Stylegala, etc.