石輪っぷり!

複数のブロックレベル要素の高さを揃える to-R さん開発の JavaScript ライブラリ「heightLine.js」。CSS の float プロパティで横に並べたブロックレベル要素の高さを揃えたり、段組みレイアウトの高さを揃えたりする場合に利用させていただいています。

先日、偶然にもこの heightLine.js を適用することによって、Internet Explorer 6 が対応していない隣接兄弟セレクタを使った CSS の一つの表現が実現できることを発見しました。

それは、写真を左に配置してその右側にテキストブロックを一定の幅で配置、ただし写真が無い場合はテキストブロックを左に詰めるというもので、写真の有無によって HTML に class を与えるなどのコントロールは出来ず、CSS だけで実装するものです。

続きを読む: 「heightLine.js」の意外な効果 »

Webページのページ内リンク。通常はパッとリンク先に飛んでしまい、一瞬ページが変わったのかどうか分からないし、ページ内に飛んだことは分かっても、ページのどの辺りの位置に飛んだのか分かりません。

そこで、ページ内リンクをスルスルッと滑らかにスクロールする“Smooth Scroll”と呼ばれる JavaScript を使うとこれらの問題が解消されます。賛否両論ありますが、私はユーザービリティが向上すると考え、手がけるWebサイトでは基本的にこの“Smooth Scroll”を導入しています。

しかし、この“Smooth Scroll”（名称は様々ありますが、ここでは総括して“Smooth Scroll”とします）。多くの JavaScript が公開されていますが、よく検証しないとアクセシビリティを損なう場合がありますので注意が必要です。

続きを読む: Smooth Scroll とアクセシビリティ »

この度このWillさんいんサイトをリニューアルしましたが、iPad、iPhone で表示した際に、2つの気になる不具合がありました。

1つは、右下に固定配置している「△このページの先頭へ」のリンクが、iPad、iPhone ではスクロールに合わせて上に移動してしまうこと。
これは、iOS が CSS の position:fixed に対応していないという仕様の問題でした。この秋にリリース予定の iOS5 で対応されるらしいですが、それまではこの問題が残ります。

2つ目は、メインコンテンツエリアの幅が狭くなり、トップページのイメージ画像の右側が切れてしまうこと。
今回はページの横幅を最大 980ピクセルで、ウィンドウ幅の 90% で変化するリキッドレイアウトで組んでいます。iPad、iPhone は擬似的に横幅 980ピクセル表示するのですが、ウィンドウ幅の 90% としているので、左右に 5% ずつ余白が発生し、その分コンテンツの横幅が小さくなるのでした。

このために、要素の固定をやめたり、横幅を変更するのは避けたいもの。そこで、iPad、iPhone 向けに CSS を追加し、これらを修正することにしました。

続きを読む: iPad, iPhone 向けに CSS を振り分け »

ドロップダウンメニューは、ページ数が多い Web サイトなどでカテゴリ毎にナビゲーションをまとめてスッキリと見せることができ、サブメニューを開くことによって深い階層のページにダイレクトにアクセスすることができるなど、便利なナビゲーションの手段です。

CSS だけで実装する方法、JavaScript で実装する方法などいくつかの方法がありますが、その多くがマウスオーバーでサブメニューが開くもので、全盲の方、マウス操作が困難な方などマウスが使えない環境、つまりキーボードで操作される場合はサブメニューを開くことができません。

代替手段として、サブメニュー一覧ページを用意し、メインメニューにこのページへのリンクを設定するなどの配慮がなければ、キーボード操作ではサブメニューのページに辿り着くことが困難なばかりか、そのページの存在自体に気がつかない場合もあります。

そこで、jQuery でキーボード操作に対応したドロップダウンメニューを作ってみました。

続きを読む: jQuery でキーボードフォーカスに対応したドロップダウンメニュー »

外部のサイトへのリンク、PDF などのファイルへのリンク、そして新しいウィンドウで開くなどに、アイコンを表示させるとき、Movable Type ではテンプレートで条件分岐などを使って表示してました。ただ、予めテンプレートで指定できる箇所に限るので、本文内に挿入されたリンクには対応できません。

あと、以下のように CSS でリンクの href 属性の値から、before 疑似要素、after 疑似要素で表示させる方法も使っていましたが、これも before 疑似要素などに未対応の IE 6/7 では表示させることができません。

今回 CMS を使わない、Dreamweaver と Contribute を使用するサイトの構築案件があり、jQuery でリンクアイコンを表示する方法を考えてみました。

続きを読む: jQuery でリンクの種類アイコンを表示 »

リスト要素を横に並べる方法として、float: left; を使う方法と、display: inline; を使う方法がありますが、それぞれに癖があります。

float: left; を使うとリスト全体が左配置になりますので、リスト全体を中央揃えにしたい場合には使えません。

一方、display: inline; を使う場合、各リストの間におよそ半角スペース1個分の間隔が空くため、各リストの間に縦線を入れようとする場合など、左右の余白を調節する必要があるのですが、これが厄介なことに Internet Explorer 7 以前では間隔が空く側が逆なのです。
この間隔は HTML で一つ一つのリスト要素が改行されているために発生するもの。そこで、それぞれのリスト要素の間にコメントタグを入れることによって改行を再現しないようにしています。

先日制作した案件で、リンク付きのリスト全体を中央揃えにし、その先頭と最後、各リストの間に縦線を入れ、さらにリスト全体が複数行になるとき、一つのリスト項目の途中で改行させないというデザインを実現する必要がありました。

続きを読む: リストを横に並べてそれぞれを改行しないようにすると WebKit では全体が改行されない »

Movable Type で住所や緯度経度を Google Maps のに変換して表示することのできる Mapper_Plugin。3年前にあるサイトを制作する際に利用したことがありますが、今回また同様の案件があり利用しました。

3年前（MT3.35）と今回（MT5.02）と構築環境に違いはあるものの考え方は同じで、通常のブログ記事アーカイブとは別に、カスタムフィールドに入力した住所情報から Mapper_Plugin で Google Maps を表示するブログ記事アーカイブを作っておき、個別アーカイブページの地図表示のリンクからこの Google Maps のアーカイブページを表示させるという方法です。

前回はサブウィンドウで Google Maps を表示させましたが、今回は写真をオーバーレイ表示する Lightbox の jQuery 版、jQuery lightbox を利用していることから、Google Maps も同じようにオーバーレイ表示したいと考え、画像だけでなく HTML もオーバーレイ表示できる ThickBox を利用することにしました。

しかし、Google Maps の場合はすんなり行かず、いくつかの Tips がありましたので、その覚え書きです。

続きを読む: Movable Type で Goolge Maps を ThickBox で表示する際のあれこれ »

4月17日（土）、東京のベルサール神田で開催された、"CSS Nite LP, Disk 9「Coder's Higher」" に行ってきました。CSS Nite のイベントには、2006年7月に開催された "Web標準の日"、2007年7月の "Web標準の日々"、そして2008年4月の MT4 にフォーカスした "LP5MT4" に続いて4回目の参加です。

以前メールで送られてきた参加者属性によると、40歳代は約1割。この業界の中心は20歳代〜30歳代なんですね。そして、8割以上が関東圏からの参加。今までもそうでしたが、島根からは私一人です。行きたいイベントやセミナー等があると快く行かせてもらえるWillさんいんに感謝です。

今回のイベントは「Corder's Higher」ということで、私は行けなかったんですが2007年5月に開催された "CSS Nite LP3 「Corder's High」" の続編として、コーディングにフォーカスした内容で、特に今回は、スピードコーディングや、今流行の jQuery、そして HTML5 と CSS3 について取り上げられるということで、非常に興味深い内容でした。

続きを読む: CSS Nite LP9「Coder's Higher」 行ってきました。 »

2年半前にも書いたのですが、CSS でのフォント指定を次のように書くと、"メイリオ" フォントがインストールされている環境では、日本語は "メイリオ" で表示される筈なのですが、なぜか Internet Explorer では "ＭＳ Ｐゴシック" で表示されてしまいます。

font-family: Verdana, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

でも、IE のインターネットオプションで、デフォルトのフォントを "メイリオ" に設定すると "メイリオ" で表示されます。つまり、font-family の指定の優先順位は無視されて、IE のデフォルトフォントでの表示になってしまうということ。Firefox など IE 以外のブラウザでは、デフォルトフォントが "ＭＳ Ｐゴシック" となっていても、ちゃんと font-family で指定した優先順位に従って "メイリオ" で表示されます。

これは、font-family の指定で、 "メイリオ" より前に英文フォントを指定していると、IE ではデフォルトフォントでの表示になってしまうのだと、今まで思っていました。

続きを読む: メイリオ と Arial と UTF-8 と IE との変な関係 »

IT先進国の韓国では2008年4月に、公共機関や企業のサイトにアクセシビリティを義務付ける法律が施行されています。

なんでも、公共機関、医療機関、福祉施設、従業員300人以上の企業のウェブサイトは2009年4月までに、その他のウェブサイトは5年以内に、アクセシビリティを遵守するよう義務付けていて、違反があった場合は、3年以下の懲役または3000万ウォン（日本円で約230万円）以下の罰金が科されるという、厳しいものなんだそうです。
（参考：動画大国・韓国で急務のユニバーサルデザイン対応：2008年9月2日付け IT-PLUS）

アメリカでは2001年にリハビリテーション法第508条が施行されており、アメリカ連邦政府の機関が所有する電子技術や情報技術（ウェブサイトを含む）のアクセシビリティを義務付けていますが、それに対し、韓国の場合は最終的に全てのウェブサイトに適用されます。

一方、日本では、2004年に制定された JIS X 8341 がありますが、これは"規格"であり、"法律"ではないので、遵守するもしないも勝手。当然、罰則などありません。
最近やっと各方面でアクセシビリティ対応が言われるようになってきた一方で、技術の進歩とともにアクセシビリティがなおざりにされてしまっている現状があるのも事実。

韓国のウェブサイトがその後どう改善されたか気になるところですが、高齢国日本ももう少し厳しくてもよいのではないでしょうか。