World of granshe.

たまに、Webサイトの中で、グローバルナビゲーションとコンテンツとフッター部分をhrタグで区切っているサイトが見受けられます。
HTML５では、文章の切れ目、閑話休題的な意味で扱われることになるようですが、
現状のものでは特に明確な意味はなく、「水平線引く」的な扱いだと思います。

使う理由としては、「CSSがなくなったときにコンテンツの区別がつきやすいから」
ということだそうですが、その点は確かに納得。
ただやっぱり、その理由だと、デザインのためにやってるんだよなーこれ、と思ってしまいます。

「コンテンツ同士の区別をつけるため」だと見栄え的な考えかなって気がしますが、
「コンテンツ同士が区切られていることを示す」だとHTML的に良い感じがしますね。
（わかりずらっ）

・・・また変な精神論になってしまいましたが、このhrに関して、
「コンテンツ同士の意味的な区切り」だけじゃない使われ方が紹介されてたのでメモ。

というのも、フロートを解除させるために使っている例もあるんだとか。

例えばグローバルナビゲーションといえばリストタグでフロートというのがほぼ王道ですが、
li要素をフロートさせると、その親要素であるDIVやらulやらに高さを指定してやるか、
clearfixなるおまじないをつけるとか、色々調整しないといけないんですが、
たとえばグローバルナビゲーションボックスの直後にhrを入れて、clear:both;を入れて解除すればいいんでないの。っていうしくみらしいです。

あーそういう使い方があったんだーと、ちょっぴり感動しました。

フロートを解除するためだけにこれ使うのはアウトだとは思いますけど、
せっかくHTMLに書いてるんだしこういう使い方もありなんだーと新鮮に感じました。

サイトを作っているとき、既存のCSSではどうにもならない場面があった。
たとえばこんな場面で、赤ボーダーで囲まれた部分の下にもう一行テキストを追加したいとする。

• １
• ２
• ３

テキスト。

この赤ボーダーで囲まれたテキストは、マージンによってセンタリングされているため、
この下にさらにテキストを追加しようとするとこうなってしまう。
（ここでは「テキスト。」ごとにひとつのPタグでくくっているので、下記の表示は、
2つのPタグをDivで囲んでいます。）

• １
• ２
• ３

そこで、下記のようにマージン調整してやる。

• １
• ２
• ３

このやり方だと、テキストが1行になるときと2行になるときでいちいちクラスを分けなければいけないし、文字サイズを大きくしたときにレイアウトが崩れてしまう。
そこで、display: table-cellを使うことを思いつきました。

なぜdisplay: table-cellを使うのかというと、vertical-alignプロパティを使いたいから。
vertical-alignというのは、インライン要素かテーブルのセルにしか効きません。
インライン要素にするとフロートがうまくいかなさそうだったので、display: table-cellを使いました。

2行でも。

• １
• ２
• ３

1行でも。

• １
• ２
• ３

ただし、heightを指定してないときちんとvertical-align: middle;してくれないみたいです。
会社帰りの電車の中で急にこれを思いついて、 試しにやってみたらうまくいったので、即席で記事を書いてます。
ですのでブラウザチェックはしていません、ご了承ください。（動作確認：Firefox3）
（近いうちに確認するつもりです）

お仕事していると勝手にCSSをいじれない場面もあり、
想定していない場所にコンテンツ追加の以来が舞い込んだりもします。
なるべく使いまわしの効く、伸縮自在なコードを見つけていければなと思います。

7/11追記
ブラウザチェックしてみましたが、各ブラウザの最新バージョンでないと際限が難しいようです。。。
再現OK：IE8、Firefox2/3、GoogleChrome2、Opera
私の制作環境はSafari3なのですが、Safari3ではレンダリングされませんでした。
ですが、Chrome2で再現可能なところを見ると、もしかするとSafari4だとレンダリング可能かもしれません。

久しぶりの更新になってしまいました。

若い頃は熱意があって、今思うとどうしてこんな行動に出たんだろう？
と思い当たる節がたくさんありましたが、歳をとるとなかなか情熱を表に出せなくなるものですね。

最近、小学生が校庭でサッカークラブ活動しているのを見ると、
「ああ、この子たちには可能性がいっぱい広がっているんだ。」とほほえましくなったりして、
ますます年齢を感じます。

前置き、長くなりましたが、
先日社内セミナーでJQueryについて学んだので、久しぶりのアウトプット。

JQueryは卒研とかでかじっていたので基礎的な部分は理解していたのですが、
JQuery UIというのは初耳でした。

そんな中でTheme Rollerのご紹介。

アコーディオンメニュー、タブメニュー、ポップアップなどの
JQuery UIで実装できるユーザインタフェース一式をカスタマイズできる！
そしてそれをダウンロードまでさせてもらえるとな。

しかも、Firefox用のアドオンをインストールすれば、
JQuery UIを他の既成ページにも適用させることが可能だということ。
（注：Jquery UIを使ってるページだけっぽいです。まああたりまえか。）

JavaScriptをオフにしてもページが閲覧できる、という点を抑えているのはさすが。
ただUIをJSで表現するのはどうなのかなー。っていう、古ーい考えになってしまうのはダメですね。
あと、マークアップが固定されてしまうっていうのもちょっと。っていう、（以下略。

下記、脱線文を読み飛ばす。

またこの話ですが、
CSSとJavaScriptの壁がどんどん薄く低くなっているなー、と感じます。

CSSだけを使ってリキッド角丸とか、テーブルの行背景色を互い違いにして見やすくする、とかを実装しようとすると、
見栄えのためだけのidやclass、div、spanがでてくるわけで。
それが嫌だからJavaScriptを使う、というのが現状なのですが、
本来の役割的にはどうなんだろうなー、っていうジレンマ。

ソースを汚くするか、本来の役割分担（構造、見栄え、振る舞い）を考えるか、どちらを取るかというと、
現状、ソースは汚くしたくない、というほうを取るかなと思います。私は。
（もちろん状況にもよりけり。テーブルの行の背景色を1行おきにするとかは、いちいち大量のtrにclassつけてらんないというのもありますし。）

Webなんて社会的な扱いは他の広告媒体と同じなのに、中身（ソース）の妥当性も考えるプログラマー的な視点も含まれていて、今さらですがやっぱり異質だなーと思います。
考えてみれば、デザイナーだけじゃなくてプログラマーも制作に関わっているから当然なのですが。

そりゃー、フルDIVで作られたHTMLよりは、
ちゃんと要素に意味づけして括った方がSEO的には良いに決まっているでしょうが、
意味的に正しいマークアップをしていれば、divが増えるとか、idやclassとかをどうするって言うのはやっぱり制作側の美意識？というかこだわり？がそうさせているだけで、極論、別にどうって事ない気はしています。

Jquery UIなんかを見ていると、いずれCSSなんてなくなってしまうのかも。と感じます。
マークアップは人間じゃないと意図通りにできないけど、
CSSは別にコンピュータが勝手にやってもソースが汚くなる、くらいの問題しか発生しないし、
クライアントはさほどいじらない範囲だから、更新がしやすいかどうかっていうのもHTMLほど考えなくてよさそうだし。

で、
Jquery UIの話をするつもりだったのに･･･話が脱線してしまいました。

既成ライブラリを使うのはいいけど、
既成ライブラリを使うためにマークアップを（自分が意味的に納得できないものに）変えるのはちょっと嫌だなーと思います。

今回のJQuery UIはその点でちょっと残念です。
（もしわたしがカンチガイしているだけならご指摘お願い致します。）

たとえばASCII.jp：長～いページもスッキリ！jQueryでタブ表示にあった例はこれ。

以下、引用

body要素の中で、タブにしたい部分を以下のようにします。タブはul／li要素で表し、タブに表示する内容をdiv要素で表します。そして、タブ部分全体のdiv要素に対して、jQuery UI Tabsの「tabs」という関数を実行します。

■タブにしたい部分の組み方
<div id="タブ部分全体のID">
  <ul>
    <li><a href="#タブ1のID">タブ1に表示する文字列</a></li>
    <li><a href="#タブ2のID">タブ2に表示する文字列</a></li>
    ・・・
    <li><a href="#タブ2のID">タブ2に表示する文字列</a></li>
  </ul>
  <div id="タブ1のID">
    タブ1の内容
  </div>
  <div id="タブ2のID">
    タブ2の内容
  </div>
    ・・・
  <div id="タブnのID">
    タブnの内容
  </div>
</div>
<script type="text/javascript">
  $('#タブ部分全体のID').tabs();
</script>

デモURL：http://www.h-fj.com/ascii/jquery_tabs/sample.html

これを見ると、このマークアップの方法でしかこのインタフェースが実現できないように見えます。
でも、リストでくくられたタブ見出しの内容と、とコンテンツ（div部）の関連性がマークアップ的に表されてないのがかなり気になります。
どうしてもタブが実現したくて、開発期間もない、納期も迫っている！ならこれを使いますが、
そうでなければちょっと遠慮したいですねえ。というのが本音。

JavaScriptのためにマークアップを変えるっていうのは本末転倒ですし。
（実案件でやったことはありますが･･･（笑）

なんにせよ、いろんなことが実現できるようになって、
引き出しを多くしておけば、いざとなったときにも対処できますよね！

メモメモ。