「Webの世界に情報発信しよう！」浜俊太朗（ライブドア）

このタイトルと内容を読んで「行ってみよう」と思いました。最近（と言うかいつも）ぐるぐると頭の中で考えている事が「インプットした事をどのように（How）アウトプットしようか」です。もちろんブログでアウトプットする、です。なので、ちょうどタイムリー。

浜俊太朗さんがおっしゃった、ブログで情報発信すべき理由は３つ：（１）勉強になる、（２）仕事になる、（３）打ち解けられる。正直、僕にとっては特に新しく気づかされた事ではありませんでした。それは過去の自分の就職面接体験や、ブログのコメントで交わした他の方の意見を通してだったり、WordPressJapanのオフ会やWordCampに参加して感じが事でもあります。ただし、僕みたいに薄々気づいて感じているのに、それをなかなかアウトプットしてこなかった人間と違い、浜俊太郎さんは実践されてきて今に至っておられるので、そこらへんの差を痛感したしだいです。凄いと思った。特に仕事に繋げると言う事では逆に自分が情けなくなります。

ただし、ちょっと乱暴でおおざっぱですが、今のところ日本では残念ながらこの3点が全て当てはまるのはウェブ業界だけじゃないか感じていますがどうでしょうか？僕みたいにウェブ業界の外にいる人間でも何か実行できるようなヒントが得られたらなぁと思っていましたが、「CSS Nite」ですから特に残念ではありません。自分で実行（＝アウトプット）していき、答えを探しに行くしかないですね。

最後に参加者同士で「どうしたらブログの更新を続けられるのか？」と言う相談大会兼ワークショップがありました。「続きは明日」みたいなのは僕も最近ちょくちょくやります。ちゃんと「明日」に投稿できた試しがないですが（爆）。他には、「ちゃんと書く」タイプの記事と「下手でも良いからとりあえず書いて投稿する」タイプの記事に分けるとか。Twitterが出てきて最近はあまり見かけなくなりましたが、海外のブログで一時期よく見られたのが「Asides」って言うカテゴリ。直訳すると「余談」。ちょっと脇へそれるけど、とか「記事」と言うほどでもないんだけど、って言う感じです。ディフォルトでこれを備えたWordPressテーマもよくありましたね。MattはまだAsidesやってますね。

それからちょっと話が逸れますが、ちょうどつい昨日読み終わった本がREADING HACKS。アウトプットする為に、どのように、どうやって読書をするか、のアイデア等が書かれておりとてもエキサイティングだった。ブログを更新する為のヒントや、何の為にウェブサイトやブログを読むのか等に通じると思うのでオススメです。

「書籍などに紹介されていない display : inline-block について」小山田 晃浩（メタフェイズ）

小山田さんの記事は技術より。inline-blockはCSSのソース眺めてて見かけたことがあるし、その名称からなんとなく想像はできるけど、具体的に何かは全然知らなかった。ちょっとディープな話題でしたがついて行けた。なによりも僕にとっては「おっ！これはブログのデザインで使えるぞ」と思う話題だったのが良かった。

たとえばboxを横に並べるデザインはブログのトップページの「最近の記事」に使える。特に最近はマガジン系のテーマが多くなっているので、それなんかにバリバリ使えそう。それからvertical-alignが使える点。middleとかbottomとかは使い道がなさそうで、ブログだとあるんじゃないかな。サイドバーにいろいろな情報をboxとして置きますから、それらを常にtop揃えすれば良いとは限らないですもんね。

ちょっと試してみようと思う。

（スライドとハンドアウトがアップされてます。）

全体的に

先日のWordCampに続きCSS Nite、ウェブ系のプレゼンを立て続けに聞いたので、プレゼン手法について気づいた事をちょっと。寸劇は良かった！面白かったし、笑いが取れるのが良い上に、印象も残る。浜さんのプレゼンでは強調したいメッセージ（英語で言う”Take home message”）を含んだスライドのページだけ赤のバックグランドで目立たせていましたが、これもメリハリが付いて良いのでは？ただし、赤のバックグランドに白の文字は、プロジェクターを通してでは読みづらいと感じました。小山田さんの#fffに黒も同様にプロジェクターだとちょっと読みづらいと感じました（プロジェクターの設定の関係かも？）。僕が眼鏡は忘れていったので大きな声では言えませんが…（汗）

プレゼン中に挙手でアンケートを取るのはよく有りますが、隣通しで話し合うとは初めて出会った（笑）。

浜さん（と鷹野さんがでしたっけ）が「是非今日の感想を書くことからブログを更新してみよう、ブログを初めてみよう」と言う旨の事をおっしゃってたけど、今現在（10月18日23時45分）公式サイトの「終了しました」記事へのトラックバックはまだ3件だけ。しかも内１つはセッションされてた小山田さん。ウェブ屋では無い僕としては、ウェブ屋の方々がセッションでプレゼンされた内容を、他のウェブ屋の方々がどのように思ってらっしゃるのか—感想、意見、反論、同意、もっと良いアイデア、等々—にとても興味があります。週末過ぎると記事が増えるかな。もしこれらがmixiのみにて書かれ、mixiのみにて意見交換がされているのであれば、残念でならない。

予約もせずに当日参加で行ったので、座れてちょっとびっくり。実を言うと僕はCSS Nite3回目です。1回目は門前払い（満員）、2回目は失望に近いがっかり感が強く、3回目にしてようやく「行って良かった」と思いました。

と言うことで、そのようなきっかけを作って下さった、プレゼンされたお二人に感謝です。

追記：レポートをブログで書いても、必ずしも公式サイトへTBしてるとは限らない事に気が付いた。

READING HACKS

原尻 淳一
東洋経済新報社 ( 2008-10 )
ISBN: 9784492043196
おすすめ度:

waviaeiのバインダーで詳細を見る

MediaMarker

TrueTypeフォント パーフェクトコレクションによれば、欧文の行間（レディング）はフォント・サイズの２０％くらいでOKだそうですが、和文の場合は５０％、もしくは７５％くらいが適切だそうです。ちなみに、組版用語では、５０％を「二分アキ」、７５％を「二分四分アキ」と言うんだとか。ともかく、欧文の行間は、和文の行間よりも狭くすると言う事です。

そこで、和文のline-heightを1.7emに変更しました。一応、1.6emとか、line-heightはそのままで、フォント・サイズを小さくしたりするのも試したのですが、結局は1.7に。

それから、フォントの種類も日本語の場合は和文フォントで表示されるようにしました。特に、記事のタイトルはこれで見栄えがよくなったと思います。

これらを日本語のみに適用する方法ですが、lang 属性を指定した擬似クラスを使っています。もちろん、XHTMLにて言語（lang）属性を正しくマークアップしている必要があります。その変を考慮しているのが、BasicBilingualの良いところの１つ。

[css]
div.entry h1:lang(ja), div.entryBody h2:lang(ja), div.entryBody h3:lang(ja), div.entryBody h4:lang(ja) {
font-family: “ＭＳ Ｐゴシック”, Osaka, “ヒラギノ角ゴ Pro W3″, Verdana, Arial, Helvetica, sans-serif;
}
div.entryBody p:lang(ja) {
line-height: 1.7em;
font-family: “ＭＳ Ｐゴシック”, Osaka, “ヒラギノ角ゴ Pro W3″, Verdana, Arial, Helvetica, sans-serif;
}
[/css]

ただし、これの欠点はIEでは認識されない事。バグではなく、そう言う仕様です。IE７でもその方針（ベータ）だそうで・・・。IEにも適用させるには、今のところ新たなクラスを作る以外方法はなさそうです。

このバグは、floatするとmarginが２倍となる、IEのみの原因不明バグ。今回でのデザインでもそうだったし、おそらく一番起こりやすいケースが、divをfloat: leftで回り込ませて、同じdivにmargin-left: 20pxと同じ左方向へマージンを指定するケース。20pxがなぜか２倍の40pxに表示されてしまう。Waviaeiのフッタのように、複数のdivを全てfloat: leftさせると、一番左端のdivのマージンが２倍になる。

解決方法はpositioniseverything.netで示されているように、display: inlineを指定するか、CSSプロフェッショナル・スタイルのp.248に書かれている、マージンの代わりにパディングで指定する。

IE7

今回この「IE Doubled Float-Margin Bug」はIE7では修正せれているみたいだ。少なくともbeta2の段階で、Waviaeiのデザインを試した限りでは問題なかった。

このバグを含め、他にIEに悩まさせれたのは２つ。１つはアイコン画像の透明部分がPNG24の為、表示がおかしくなる問題。IE7ではサポートされているけど、IE6以前ではサポートされていない事は分かっていた。PNG8でも試したけれど、アイコンの画質が落ちすぎるので諦めた。もう１つは、liにlist-style-position: insideと一括指定した上で、後でlist-style: noneと指定しても、list-style-position: insideが適用されたままになる。

この２つの解決方法は簡単。せっかくなので、IE7ハックを調べてみる。参考にしたのはLucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめと、Stylesheet Stylebook：IE用CSSの指定方法。

IE用のCSSファイルを用意して、問題のある箇所をバージョン6以下のIEにのみに適用するハックを使って、修正の為のCSSを記述。* html bodyを使用。

IEのみにこのCSSファイルを読み込ませるには、「Conditional Comments」を利用する。これはハックではなく、マイクロソフトがIEに組み込んだ機能。

[css]
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" /><![endif]–>
[/css]

このようにヘッダに記述すると、IEでのみie.cssが読み込まれるようになる。このときに、後で指定されたCSSは先のそれを上書きする仕様を忘れないように注意。つまり、読み込ませるCSSファイルのリストの一番最後にこれを記述する。WordPressだったら、style.cssへのリンクの後になる。この「Conditional Comments」については、MSDNに詳細な記事がある。英語が苦手な方は、古いけどこの記事が分かりやすい。

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を用いている。

ふと思った。世界一のインターネット環境が整っている日本。でもなかなかテーブルレイアウトを抜け出せない事も含め、セマンティックな方向に進まない。セマンティック・ウェブの可能性を自ら閉じているようにおもえるのだが・・・。世界一に環境がもったいない。

（セマンティック・ウェブについてはメタ情報とセマンティック・ウェブが詳しいです。）

（CSS Beauty | CSS is Worthlessより）

ではどのようにするのが一番よいのか？

Technique 15: Using hreflang with CSS のやり方が W3C で書かれています。しかし先日、と言っても１ヶ月ほど前ですが、456 Berea Street に書かれた Indicating language choice: flags, text, both, neither? （言語選択の表示：　旗、テキスト、両方、別の方法？）と言う記事の方が面白い。コメントも沢山書かれていて、読んでいてすごく興味深いので、ちょっとそちらの方をまとめてみます。

記事を書いた Roger Johansson 氏が出した案は以下の４つ：

1. その言語にもっとも近いと認識されている国の国旗
2. 選択肢の言語で書かれたテキストに続き、現在のページで使用されている言語でもテキストで表示
3. その言語にもっとも近いと認識されている国の国旗と、現在のページで使用されている言語でのテキスト表示
4. 中立的な旗と、選択肢の言語で書かれたテキスト

彼は２番目のやり方が一番良いのでは、との考えを示しています。つまり例えば、英語のページで日本語の選択肢を表示するのであれば、「日本語 (Japanese)」のようにです。まず、１つ目の旗のみと言うのはＮＧ。３つ目の旗＋テキストは一見グッド・アイデアなんですが、非常にややこしい。例えば南アフリカの国旗の横に English は、国を指しているのか言語を指しているのか混乱を招くおそれがある。４つ目の中立的な旗も、何をもって中立と判断するのかが難しい。例えば、Mac OS X は「International」の設定アイコンに国連のシンボルを使っているが、世界の国々がすべて国連に加盟しているわけではない。ほかに地球儀のアイコンも、どこにフォーカスしているかには気を付けなくては行けない。アメリカ大陸が中心に描かれた物が一般的だが、世界的には標準ではない。

ちなみに、ブラウザの言語設定を自動判別させてそれに伴う言語を強制的に表示させるのは良くないとされています。これは、ブラウザの言語設定が必ずしもそのユーザがそのサイト・ページで観覧したい言語とは限らないからです。もしそのような仕組みにするのであれば、設定を変更できるオプションやリンクを表示すべき。例えばグーグル。

熱い議論

この記事を書いている現在、６５通のコメントが寄せられ、色々な意見、経験、それぞれの国での状況など、読んでいるだけで面白い。以下にコメントとして寄せられた意見をいくつかピックアップしてみました。

• （[ja]等の）言語コードはギークにしか分からない。多くの一般ユーザは自分の言語の言語コードさえも知らない。
• ウェブサイトにアクセスするユーザ層によって変わってくる。
• 北アメリカ全体をターゲットとしたサイトであれば、フランス語と表示するのにフランス国旗、もしくはケベック州旗を用いても問題ないかもしれないが、カナダのみをターゲットとするのであればそれは良くないアイデアだ。
• （スイスのウェブデザイナー）スイスでは４つの言語がある（フランス語、イタリア語、ローマ語、ドイツ語）。言語表示にテキストを用いるのは大賛成だ。旗、例えばフランス国旗、を用いるとユーザを侮辱しかねない。
• 国旗＝言語、は主にヨーロッパでの用いられ方だと思う。北アメリカではローカライズされたヴァージョンを示す事が多い。特に通貨の違いの為に、ローカライズされたヴァージョンを作成する事が多い。
• 自分はユニオン・ジャックを見たとき、言語（英語）のみならず、コンテンツの内容も英国向けの物だと思う。
• 違う言語なのに、URLが同じなのは許せない。
• 通常はその言語で書かれたフル・テキストを用い、スペースが足りない場合のみ言語コードを使用する。
• 違う言語ヴァージョンのページを作成したならば、一部のみではなく、すべてのコンテンツでそうすべきだ
• クライアントの強い希望で有れば国旗を使用してきたが、いかなる時でもテキスト表示の方が良いと勧めてきた
• 地球儀のアイコンは、インターネット上で使うにはあまりにもゆらぎが有りすぎる。言語のシンボルを作るべき。何か良い案は？
• ヨーロッパ連合のサイトは、それぞれの言語で書かれたドロップダウン・メニューを使用している。（EUROPA – Gateway to the European Unionの右上の方）
• 例えば英語で書かれたページが有るとする。幾つかある段落の一番最後にフランス語で「en français」（注：フランス語と言う意味）と書くとユーザはどのように思うだろうか？そこまでが英語だったので、フランス語について英語で書かれたページだと思うかもしれない。かたやフランス語圏の人は、フランス語版へのリンクを探すのにわざわざページの下までスクロールするだろうか？
• 英語と示すのにユニオン・ジャックを使うので有れば、コンテンツはアメリカ英語ではなく、イギリス英語で統一して書くべきだ。
• （カナダから）フランス語圏のユーザーでも、英語版とフランス語版があれば英語版の方を観覧したいと言う人の方が多い。なぜなら英語版の方が先に最新の情報に更新される事の方が多いからだ。最悪の場合、英語版しか更新されない場合もある。また、フランス語版にはよく誤訳が多い事も英語版を選ぶ大きな理由の一つだ。
• ドロップダウンの言語セレクタは気を付けた方が良い。「Choose language」（言語選択）と書かれていても、英語が分からなければ言語を選択できると分からない。
• みんな何かの方程式をもとめているようだけど、私の思うところこれ（言語表示）に関する完璧な方程式などはない。

国旗を言語ではなくローカライズ版と認識するユーザがいる可能性は思いつきませんでした。

まとめ

456bereastreet の記事とコメントとW3C Internationalization のワーキング・ドラフト

やはり完璧な方程式やパターンは無いのが現状でしょう。それぞれケース・バイ・ケースで対処していかなければいけない。しかし、全体的にみて一番無難なのはW3C のドラフトでも書かれている「それぞれの言語で書かれたテキスト表示」のようだ。もちろん、「English」「日本語」のように省略せずにフルテキストで。スペースがあり、「日本語（Japanese）」と記述できるのであれば、もっと良い。二桁の言語コードは、分からない人の方が多いと思っておいた方がよい。

では国旗は？　できたら避ける方がよい。特に国旗のみと言うのは絶対に避けるべき。なんらかの形で国旗を用いるので有れば慎重に検討を重ねたうえで使うべき。言語なのか、ローカライズ版なのか。ターゲットとしている国と地域は？　特にECサイトは注意が必要。例えば日本でECサイトをオープンさせるとする。海外からのお客様専用の英語版も作るとします。英語で書かれているのでユニオン・ジャックで案内すると、英国国内在住向けと思われるかもしれません。また、日本語版から注文する人は全員が日本国内からとは限りない。同じように、日本語に不安がある日本在住の外国人は英語版を利用したいと思うはず。コンビニ決済が日本語版からのみだと、困るかもしれません。

このように、国旗の使い方は非常に繊細で難しいと言えるとおもいます。

より良いサイトをつくるのであれば、コンテンツにも目を向けなければならない。英語版もあると言うので日本のサイトを訪れた方が、英語で書かれたページ、または翻訳されたページがほんの一部だったら非常に残念です。はっきし言ってがっかりすると思います。こういうサイト、日本に多いと思いますがどうでしょうか？

個人的にも、それぞれの言語で書かれたテキスト表示するのが現状では一番よいかと思います。それぞれの言語に応じた旗、またはシンボル的なアイコンはなくても良いと思う。と言うか、現実的ではない。それよりも、表示言語に関する項目とわかるようなアイコンがあってら便利だと思う。時計やカレンダーのアイコンは、一目見て日時に関する項目だと分かるように。皆さんはどう思いますか？

Flags represent countries, not languages. There are many countries that use the same language, and numerous countries that have more than one official language.

（国旗は国を表す旗であり、言語を表す物ではない。同じ言語を使用する国は数多く有り、また１つ以上の言語を公用語として定めている国も数多くある。）

例えば英語。これはよく英国のユニオン・ジャック、アメリカの星条旗、もしくはこの２つを半分で割って足したような旗で表されることが多いが、英語が公用語の国はほかにたくさんある。日本に近いところで、まず頭に思い浮かぶのはオーストラリアとニュージーランドだと思うけど、アジア、オセアニア、さらにアフリカ、中南米・カリブ海、と世界中に広がっていて１つ１つ国名を上げていくときりがない。

フランス語も、アフリカ諸国を中心として公用語に指定されているし、スペイン語、ポルトガル語なんかもそう（南米、中南米・カリブ海に多い）。すべてこれらの国々の植民地支配の影響ですね。

１つ以上の言語を公用語として定めている国もまた沢山あります。例えば、英国でもウェールズはウェールズ語も公用語です。その為、ウェールズでは道路標識がすべてウェールズ語と英語で書かれてあります。何かしらの公式文書も両方で書く必要があるとも聞きました。

南アフリカなんかは公用語が１１もあります。中国は公用語が中国語だと思うんですが、北京語とか広東語とか言うように分けられています。

（ちなみに、厳密に言うと公用語、国語、共通語、それぞれ意味がが違うのですがここではその辺は省略します）

ちょっと長くなりましたが、このように国旗＝言語では無いため、ウェブ上で言語選択の表示に国旗は使うべきではない、というのは実は以前から言われている事なのです。

• Why you should not use a flag as a symbol of language
• International Usability (Jakob Nielsen’s Alertbox August 1996)
• Flag Problems (Alertbox sidebar)

とは言うものの、国旗が一番認識されやすいのでは？、との見方もあるのも事実です。

ではどのようにするのが一番よいのか？

・・・

（長くなってきたので、２つの記事に分けます。パート２へ続く）

Rob Goodlatte

Rob Goodlatte

一番気に入ったのデザインです。色使いがすごく綺麗。レイアウトも定番ぽいけど、個別記事表示のときに本文が２段組になったりする。この記事に、このデザインにたどり着いたプロセスが書かれています。

Avalonstar

Avalonstar.

結構有名なサイトだと思います。最近よく見る黒をメインとした色使い。青とか緑とかは蛍光色っぽいのがちょうど良い感じ。それぞれのカテゴリにアニメの画像をくっつけるアイデアは面白いと思う。ただ画像の内容とカテゴリの内容に関連性がない様なので、一見なにがなんだか分からないのがちょっとマイナス。一度訪れた後、再度アクセスしてみてください。トップページに違うメッセージが表示されます。

blog.critical

blog.critical

１カラムのデザイン。銀色っぽいグレーと、ブルーの色がカッコイイ。僕なんかは到底作る事ができない透明っぽいサイトロゴとか部品なんかも色とよくマッチしていると思う。フォント・サイズが12pxなんだけど、すごく読みやすく感じる。同じフォント・サイズのRob Goodlatteと比べると、色、フォント、行の高さが微妙に違う。

snook.ca

snook.ca

ちょっとしたギミックにニヤッときたサイト。このサイトも流行のダークなサイト。でもヘッダーの左にある電球アイコンをクリックすると、記事の部分が明るくなる。

BureauBlumenberg

BureauBlumenberg

少し和風っぽいデザインで気になった３つの内の１つ。全体のデザインもシンプルだし、ナビゲーションの線なんかは面白いと思います。でもそれ以上に好きなのはロゴです。ドイツの方のようなので、どう言ったコンセプトでこうなったかはしりませんが、「富士山＋桜」っぽいのが妙に気になる。

kogakure.de

kogakure.de

またまた「ドイツ＋和風っぽい」と言う意味不明な組み合わせですが、笹の画像が気に入りました。全体的にシンプルだし、記事の上の方に透かした紙を置いた感じもグッド。

nemu-nemu

nemu-nemu

自作のコミック（４コマ漫画？）を紹介しているサイトのようです。なにがどう気に入ったわけではないですが、もっとこういう感じで漫画とか、アニメを活かしたサイト・デザインってないのかなと思い。日本の漫画やアニメで使われてる手法とか、アイデアとかをウェブ・デザインに活かすのは出来ないのでしょうか？　初期のウェブ・デザインは、雑誌に代表されるような印刷物や出版物をウェブに持ってくるような感覚でデザインされていたと聞きました。その手法の良い悪いはともかく、漫画のデザインをウェブにもってくるのはどうでしょうか。

よく使われるのは

[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のページではこの順でリストされている。ただしリスト順が正しいとは書かれていない。

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.