hr要素でコンテンツを区切る理由

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

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

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

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

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

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

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

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

display: table-cell で vertical-alignを実装

サイトを作っているとき、既存の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 UI と ThemeRoller

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

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

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

---

前置き、長くなりましたが、
先日社内セミナーで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のためにマークアップを変えるっていうのは本末転倒ですし。
（実案件でやったことはありますが･･･（笑）

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

メモメモ。

「Web制作系雑誌は綺麗ごとばかり書いているから嫌いだ」

と、研修中に上司が言っていた。

研修中は全くその意味が分からなかったけれど、
現場配属３週間目にしてようやく理解できた気がする。

それは、雑誌に書いてある「理想」と、
現場でやらなければならない「現実」が違っているからだろうと思う。

Web制作系の雑誌には、お役立ちの情報がけっこう書いてあって、
学生時代はそれをインプットして学んできた。

でも、今実際それを使っているかというと、そうではない。
むしろ、会社に入ってからテーブルレイアウトを覚えたくらいだ。

今までは、テーブルで組まれたサイトを見るたび、
「テーブルレイアウトなんてありえない、こんな汚いコードを作っているなんて信じられない」
と思っていましたし、今もそうですが、

けっこうそういうサイトを運用していることが多くて驚きました。
そして、そういうサイトを運用しているのが紛れもなく自分だということも。

こういう現状を、自分自身は割り切れない人間だと思っていましたが、
けっこう、割り切って作業できている自分がいます。
（テーブルレイアウトの方法が分からないので苦戦してるし嫌だなという面はありますが）

それよりも、「Web標準だ」と言って、決められたパーツを作ってデザインをすることに、
嫌悪を感じ始めてきている自分がいます。

idや複数のclassを使って、決められた範囲内である程度の自由なデザインを作る。
マージンを調整するためだけのclassの存在。
「Web標準」と謳えば謳うほど、デザインは限られていく。
決められたパーツを使って、それにあわせて作れと言う。

デザインの統一、と言われれば確かにそうだけれど、
結局、Web標準ってデザインの制限するだけじゃん。
実際現場ではやっぱりそんなもんなんだなというのが、率直な気持ちです。

ただ、だからテーブルレイアウトする。Web標準なんて辞める。というわけではなくて。
現場でも使える、もっとスマートな方法があればいいのに、と思います。

テーブルレイアウトだって、クライアントがそう望むのであればそうするだけ。
Web標準もそう考えればそうなんだけれど、割り切れないのは、
マークアップに対する思い入れが強いからだろうなあと思います。

「結局、Web標準ってデザインの制限するだけじゃん。」
って言われるのはやっぱりつらいので。

「Web制作系雑誌は綺麗ごとばかり書いている」という意見は理解できたけれど、
私の場合それが「嫌いだ」と言う理由にはなりません。

理想と現実が違うなら、精一杯埋める努力をしたい。

そう感じました。

現場投入2週間で分かったこと

今週で会社の現場に投入されてから2週間です。

もちろん、新規案件ひとつを丸ごと任せられるようなことはないけれど、
コーディングにまつわる色々なお仕事のお手伝いをさせてもらってます。

正直、現場に行く前は
「運用とかばっかりだったら働いていけないかもしれない」
「ひたすらコピペする作業は向いてないかも」

とか思っていたのですが、全然そんなことありませんでした。

一つひとつの仕事が楽しい！
そんな毎日です。

部署にコーダー的な同期がいないこともあって、
焦りとか功名心とかがなく、時間に追われつつものびのび作業しています。

今まで、個人的にマークアップはしてきたし、アルバイトでもWeb制作に携わってきたけれど、
本当に「検品は大事」ということが身にしみました。

今まで、流し込んだテキストが間違っていること･･･というよりも、
テキストの間違いを指摘されたことがあまりなかったので、
こんなにミスが見つかるものなんだなあと閉口してしまいます。

title、keyword、descriptionなどメタ情報、
画像の代替テキスト不備、
レンダリングチェック不備、
文章のコピペミス、
リンクの貼り間違いや置換ミスなどなど･･･

挙げていけばキリがありません。

あとは、基本的なことですが、報告、連絡、相談。

最近これがおろそかになってきていて、ディレクターの方に
「いまあの案件どうなってるー？」と聞かせてしまう始末。

気が緩んできている証拠です･･･これは気をつけねば！

対策

ページのどこを変更したのか明確にし、変更点をリストアップしてチェック。

制作フェーズがひと段落したら必ず関係者に連絡する。

以上を肝に銘じて、来週も頑張ります。