タイトルを“|”で区切るのはなぜか。

タイトルというのは、title要素。ブラウザの最上部に表示されるあれのことです。

コーポレートサイトではよく
会社案内｜○○株式会社
という表記がありますよね。

以前から、なんで縦線で区切るんだろうと疑問に思っていました。
「みんながやってるから縦線」
「なんとなく縦線」
だと理由としては弱くてちょっと納得できない。

よって、調べてみることにしました。

とりあえず、色々なサイトを見てみたのですが、
titleタグ関連で検索すると、SEO的にtitleタグはとても重要だとか、
titleタグの内容は30文字前後しか検索結果に出ないので長くしすぎるなとか、
そういった内容は出るんですが、
縦線で区切るとか半角スペースで区切るとか、そういった、概念的なモノに関しては全くヒットせず。

最終的にWikipediaで記号の意味を調べることになりました。
タイトルの区切り文字として使えそうな記号をひととおり挙げて、
その意味を調べて解釈してみました。

---

＜＞（大なり、小なり）

パンくずリストに良く使われますね。前後の項目の大小を示す意味があるでしょうか。

普通にサイトの階層構造をタイトル部分で示すならこの区切り方でOKな気がします。
企業名　＞　ページ名　
のように。

ですが、
ページ名　企業名　の順でタイトルを記載することになると、
ページ名　＞　企業名　だと、意味的におかしい。
ページ名　＜　企業名　だと、目線の流れ的に不自然かなと。

だから、ページ名　企業名　の順番のときは、使用しづらい気がします。

/（スラッシュ）

「または」「どちらも」という意味合いがあります。
FTPでサーバにファイルをアップするときには階層がスラッシュで区切られているので、階層構造を示す意味合いもありそうです。

これも、先ほどの＜＞と同様、階層構造を示すとなると、利用は不可能になります。
ただ、たとえば「Panasonic / ideas for life」とか、企業名＋スローガンを示すなど、
2つの項目が並列の時には、利用できそうです。

・（中黒）

意味的には、併記する単語の区切りなど、優劣がなく並列に並んでいるものを示します。
中黒で項目が区切られているのはあまり見たこと無い気がします。
たとえば、「会社概要・沿革」のように項目自体に中黒が含まれているため、それと区別するために使わない傾向があるのかもしれません。
少なくとも、「並列」関係でない項目で使うと意味的にはいいとはいえませんね。

―（ダッシュ）

小説でよく使われるような言葉の間とか、副題などを囲む際に利用する。
意味的に考えると、タイトルに使うのは難しそうですね。

‐（ハイフン）

単語を区切るとき、また、日本では郵便番号などの階層を区切るときにも用いられる。
形はダッシュとよく似ていますが、意味的には異なりますね。
Firefox、Opera、IEは、titleタグの内容の後に－とブラウザ名が入ります。
（例：　○○株式会社 － Mozilla Firefox）
（実際のところ、これらはハイフンではなくて「マイナス」記号です。）

それを考えると、階層を区切るという点においては、ハイフンも利用できそうです。

｜（縦線）

項目の区切りとしても利用される。プログラミングとかでも、「どちらか」的なことを表現するのに使いますね。
これだけ、Wikipediaでは明確に「項目の区切り」であることが書かれていました。

ハイフンはブラウザ名とタイトルを区切る記号として利用されている事を考えると、
この縦線でタイトル内部の項目を区切るというのは妥当ですね。

ということで、
以上を持ちまして、私は縦線が区切りとして使われる理由について納得いたしました。

メモ終わり。

---

参考:Wikipedia - 約物

IE標準モードとclearfix

先日MTで作業をしていると、
IE6以下でヘッダーとフッター以外のコンテンツ部分が消失しているという事態に遭遇。
ソースを見るとコードは確かにあるのですが、なぜか見えない。なぜか。

ネットで調べると、テンプレートの改行するしないが表示に影響する？とのこと。
さっそくやってみようと思っていたところ、
「CSSが原因じゃない？」と同僚に言われ。

そのとおり、でした。

ヘッダー内のフロートがclearされていなかったため、その下のコンテンツ部分が消失してしまったようです。

フロートを上手く解除する方法に、clearfixっていうのがありますが、
最近はclearfixではなく、display: inline-block; のみを指定していて、特に問題がありませんでした。
私によるclearfix

ちなみにclearfixは、floatしてるボックスの親要素に指定します。

今回のMTブログでも、親ボックスにdisplay: inline-block;を指定して解決！と思っていたのですが、そうはなりませんでした。
理由は、「DOCTYPEスイッチによりIE6が標準モードになっていた」から。

補足を入れると、DOCTYPEというのは、HTML文書の先頭につける、文書型のことです。このDOCTYPEの記述が変わることによって、ブラウザの表示が変化するので、DOCTYPEスイッチと表現されているのではないかなという解釈です。

詳しくは、hxxp.jpさまのリソースをご確認ください。

実は、今までXHTMLでサイトを作るときはほとんどXML宣言をつけていたので、
IE6以下では表示が互換モードだったんです。それを見越して今まで制作していました。
が、MTテンプレートはXML宣言がついていないため、IE6では標準モードになります。
よって、ちょっと表示が異なっていたのですね。

そこで、display: inline-block;に加えてheight: 1%;
（たぶん、何かしら高さを指定すればOK）を指定したら直りました。

解決。

---

P.S　アドバイスくれたlevaさんありがとう。

ブラウザによるHTML5の表示・解釈

先週末、うんちくたれてるだけじゃダメだなと思って、
実際にHTML5を使ってコーディングをしてみた。

そこから、ブラウザのHTML5のレンダリング傾向が分かったので、メモ。

１．article、section、header、footer、asideなどのHTML5で追加されるタグは、初期値はインライン要素としてレンダリングされる。

これはちょっと驚いた。
というよりも、HTML5が正式に宣言されていないにもかかわらず、ブラウザはこれらの新しいタグをタグと認識してくれるんだと感心した。
DreamWeaverも、タグ予測の中にこれらの新しいタグを入れているみたいだし、対応の早さに驚き。

２．CSSのファイルタイプ指定（<meta http-equiv="content-style-type" content="text/css">）が消えた。

これを指定すると、HTML5バリデータ（β）では文法違反になってしまいました。

３．IEでは、HTML5で新しく追加されるタグと、その子要素に対してCSSが適用されない。

section ul {
border: 1px solid #000;
}

としても、IEだとうんともすんともいわない。
sectionタグにIDをつけて指定しても結果は同じ。

セレクタにulだけを指定すればもちろんうまくCSSが入ります。

まだ勧告にもなってないんだから、当たり前と言えば当たり前ですが、
他のブラウザが何の不具合もなくレンダリングしているのに、なんなんだろう。
と感じてしまったりしなくもない。

以上、あっさりと書きました。

正規表現の使い方

以前、某匿名日記の記事で
正規表現って言葉すら知らないHTMLコーダには閉口した。 どうやって置換とかgrepすんの？　やっぱ手打ちっすかw
と書いてあったのが気になっていて、

私ももちろん「正規表現って言葉すら知らないHTMLコーダ」なわけですが、
正規表現についてググってみても、
正規表現という言葉の意味や、文法的なもの（どんな記号を使って書くかなど）はいっぱいヒットするんですが、これを「どうやって使うのか？」について書かれているものがほとんどなくて。

結論としては、正規表現は
置換をするときに、置換前・後のフレーズを正規表現で現すことによって、
置換作業を簡単にするものです！
という解釈におちつきました。
（あってます？）

つまり、HTMLコーダーが正規表現を使うときは、検索・置換ウィンドウに書く！
ということであってるんでしょうか。

たとえば、アドレスを相対表記からルートパス相対に変更するときとか。

<img src="images/xxx.jpg" />
<img src="../images/xxx.jpg" />
<img src="../../images/xxx.jpg" />
のアドレスを一気に変えたいときとかに、
正規表現でやると便利なんだろうなぁ、とか。

XXXX年X月X日の表記を、一度に
XXXX/X/Xに変えたりとかできるんだろうか、とか。

数百ページにもわたるサイトで、一括して修正をしなければならないとき、
正規表現は本当に便利らしいです。

どういう記述方法があるかとかは、私自身まだ記事にできるほど知識がないので、
私自身が見て参考になったサイトをいくつか。

制作会社で働く人向け「はじめての正規表現」
１から分かりやすく書いてある、ネタ系の記事です。スライド形式になっています。

正規表現の機能の覚書き
文法の解説が中心の、非常に勉強になる、真面目な記事です。

以上。
これから勉強します。
 

---

09/04/12 追記。
levaさんからマイコミジャーナルの正規表現記事を紹介してもらいました。
URL: http://journal.mycom.co.jp/tag/0001422/

HTML5で追加されたタグとその使用法

HTML5勉強企画第2弾。

今回も参照させてもらったサイトを以下に（敬称略）。

• HTML5 W3C working draft
• livedoor labs EDGE
• EDGEのトップページをHTML5化した件について:Blog hamashun.com
• HTML5のセクション(その2)：vantguarde

前記事同様、基本的にW3Cのワーキングドラフト（英文）を読んでいるので、ここに書かれていることが原文と全く同じとは限りません。翻訳に際して生じる間違いがある場合がございますこと、ご理解いただけると助かります。

間違いを発見した場合、ご連絡いただけると勉強になるのでとても嬉しいです。
連絡先：[e-mail]