あたらしいマークアップ

「実践 CSS3 & HTML5 with Microformats ワークショップ」
が、本日行われたようです。
（感想文ではないです。ごめんなさい）

もう少し金銭面に余裕があれば・・・参加したかった！
超楽しそうです。
CSS3とHTML5なんて、もうユメのようですね!

まあこの情報を知ったのは今日なのでどうにもできませんが。

CSS3では、CSSの機能がものすごく拡張されています。
今まで、本来は「振る舞い」を担当すべきであるJavaScriptで、CSSを制御していた部分があります。
（例えばテーブルの背景色を互い違いにするとか）

それが、CSS3では表現できるようになります（たぶん）。
その代わり、数式的な記述も含まれ、ちょっと複雑になっています。

新しい技術に触れているときは本当に幸せだし、学んでいるときは本当に時間を忘れてしまうくらい楽しい。
その反面･･･懐古厨みたいで嫌ですが、少し寂しい気もします。

新しい技術が生まれると、その技術が思いもよらない形でユーザーに使われることがあります。
そこから、また新しい技術が生まれて・・・というように繰り返されていく世の中のしくみに、HTMLやCSSも入っていて。
文書の共有から、文書の表現、広告へと役割が移り変わり、
現状のHTMLやCSSでは、広告としてのWebサイトの情報を表現するには不十分であるとして、HTML5やCSS3をはじめとする新しい技術が生まれています。

私はWebページが生まれた瞬間を知らないし、
その時代にどのように使われていたのかは文献を読んで知ることしかできないけれど、
今のWebサイトにはそこまで高度なことが求められるようになってしまったのかと思うと、
なんとなく手を離れたわが子のような感じがしてしまいます（笑）。

常に新しいものを求め、学び続けなければ、この業界に身をおくことは難しい。
けれど、時折足を止めて、今まで自分が当たり前だと思っていたことを、
どうして自分は当たり前だと思ってきたのか、
「そういう仕様だから」と思ってあきらめてきたことが、どうしてそのようになっているのか、
考えたいと思います。

基盤がゆがめば、その上にいくら技術を積んでも、すぐに崩れてしまうので。

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

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

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

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

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

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

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

---

＜＞（大なり、小なり）

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

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

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

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

/（スラッシュ）

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

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

・（中黒）

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

―（ダッシュ）

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

‐（ハイフン）

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

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

｜（縦線）

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

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

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

メモ終わり。

---

参考:Wikipedia - 約物

サーバー開設しました。

昨日、ついに有料サーバをレンタルしました。
これで、ようやくMTを勉強するスペースができました。
（自宅にPerl環境がないので作業できなかったのです。）

今後MTを使う作業が増えそうなので、まずはMTを使いこなして。
ひととおり扱えるようになったら、WordPressなど無料で使えるCMSに手を出し、
最終的にはサイトの性質に応じてどのCMSがいいとか提案できるようになるのが目標です。

と、言いつつもGWは会社から貸与されたWebディレクション標準ガイドの読書・勉強に費やすことになりそうです。
値段が高いので手が届かない書籍だったんですが、読んでみるとけっこう面白い。
基本、制作作業の一部しか携わったことがないので、ワークフローとか、サイト設計とか、
マーケティング的視点についてせこせこと勉強しています。

ただ、Webディレクション教科書を持ってるので、ちょっと自分で購入する気にはなれないかなぁ･･･（笑）。

勉強をしたり、新しい発見をしたりするのって、やっぱり楽しいですね。
私の場合、それが自分の好きなことに限定されてしまうのが良くないんですが・・・。

JavaScriptでフォームを操作すること

先日、JavaScriptでフォームの選択肢を操作できるか否か、みたいな話になって、
JavaScriptを使って、ラジオボタンの選択肢によって、後続の選択肢が変化するコンテンツを作りました。

ソースを会社PCに置いてきてしまったので、実物をお見せできないのが非常に残念なのですが、
こういうことって、実際にサイトに取り入れていいんだろうか？という疑問がありまして。

そのコンテンツは、ラジオボタンをクリックすることで、特定のフォームをdisplay:none;するようにJavaScriptで命令する形で実装しています。
ですので、CSSがオフの環境でも、JavaScriptオフの環境でも問題なく動作すると思います。

が、なんとなく「これって正規の方法なんだろうか？」と思って。
そう思うのは、私がユーザビリティとかアクセシビリティに関する知識が皆無であるということが原因なのですが、
そういった観点からの不都合はないのかなぁと。

ふと感じた疑問でした。

Webデザインに正解はない

当たり前の話ですが、ふとそう感じたので。

私もWebデザイナーではないので、偉そうなことは言えませんが、
最近、デザインについて「どっちが正しいの。」という現場に出くわすことがありました。

たとえば、
「グローバルナビゲーションは上に付けるのと下に付けるのとどっちがいいの？」
「パンくずリストはつけるべきなんですよね？」
など。

結論から言うと、
デザインは、「べき」論や、正否論で結論を出すことは不可能です。

グローバルナビゲーションにしても、ページの上部にあるというのが一般的ですが、プロモーションサイトや、ヴィジュアルを重視したサイトでは、ヴィジュアルコンテンツの下部にナビゲーションが付いていることもあります。

パンくずリストだって、階層の深いWebサイトでは有効かもしれませんが、一概につけなければならないものではありません。

要するに、コンテンツやコンセプトによって、正解が異なるということです。

コンテンツやコンセプトがないままで、Webデザインについて論じることは不可能。
それをここに書きとめておきたかったのでメモ。

「どうしてこのテキストをh1でマークアップしたんですか？」
という質問にはっきりと回答できる自分がいるのと、
「どうしてここにこういうレイアウトをしたのですか？」
という質問に回答できるデザイナーというのは、一緒なんだなと感じたんです。

今まで、コンテンツだとかコンセプトよりも、ただ理由もなく表現方法を考えていたけれど、
デザインだってコーディングだって、「どうしてそうしたの？」という疑問に明確に答えられる必要があります。

そして、その回答はコンセプトの中にあるんだということに改めて気付きました。

コンセプトは重要。
コンセプトがなければ、デザインも、レイアウトも、マークアップも説得力のないものになってしまいます。

コンセプトは大切だからね、と何度も聴かされてきましたが、
今日、その意味をやっと、身を持って理解できた気がします。

本日の収穫でした。