「ユニバーサルHTML/XHTML」を読み返してみた (2)

「ユニバーサルHTML/XHTML」を読み返してみた (2)

前回は、ユニバーサルHTML/XHTMLを数年ぶりに読み返してみた感想のなかで、いくつかの要素についての解説の章の感想を述べました。今回はその続きです。

目次

class属性、id属性で簡単にHTMLを拡張する

私は業務でJavaScriptを使ってプログラムを書くことが多いです。JavaScriptから見ると、class属性やid属性は、処理対象を特定するための名前みたいな考えになりがちですが、書籍での見出しは異なります。

3.3 HTMLの定義を越えた文書構造を扱う

3.3 HTMLの定義を越えた文書構造を扱う - ユニバーサルHTML/XHTML p.36

このあとに、class属性とid属性をどう使うかが続きます。普段、要素を特定するために使っている身からすれば、なんのことやら、という感じです。ちょっと考えてみます。例えば、入力が必須のフォーム要素で、送信するときに、空だったら警告して送信を中断するとします。jQueryで以下のように書いたりして。(もちろんサーバーサイドでもバリデーションを行った上で)


jQuery("form").submit(function(){
  var inputEl = jQuery("input.alertEmpty");
  if (inputEl.val() === "") {
    alert("メールアドレスを入力してください");
    return false;
  }
});

alertEmptyというクラスを付けて目的は達成できました。さて、必須なら、スタイルシートで要素の回りを赤く装飾したいとしましょう。せっかくクラスを使ったので、スタイルシートでもそれで利用します。


input:text.alertEmpty {
  border-color: red; /* これで可能か確かめておりません。すみません。*/
}

HTML文書を装飾するスタイルシートからすると、alertEmptyってなんのことか、って感じですね。

class属性のことを、文書の構造をきめ細かく表現すると理解していた場合はどうでしょう。つまり、HTMLの要素では表現しきれないので、classで補助するとしたら。フォーム要素は入力が必須なので、class属性は「required」と付けられます。そうすれば、スタイルシートでは、「入力が必須なら周りを赤く装飾」と理解でき、JSでは「入力が必須で空なら送信前に警告する」と理解できます。クラス名って重要ですね。


jQuery("form").submit(function(){
  var inputEl = jQuery("input.required");
  if (inputEl.val() === "") {
    alert("メールアドレスを入力してください");
    // 「メールアドレス」をinput要素のtitle属性から取ってこれればもっと楽ですね！
    return false;
  }
});


input:text.required {
  border-color: red;
}

テーブルレイアウトのコラムから

Webにかかわるデザイナー、言い換えるとCSSを推進する人たちの努力のおかげで最近あまり見かけなくなったものにテーブルレイアウトがあります。テーブルレイアウトとは、table要素やその子要素を使って、ページ内の内容の配置を決めるレイアウト手法のことです。書籍ではp.62で、テーブルレイアウトをやむなく使うときに、使い勝手を低下させない工夫についてかかれています。

  • テーブルに対応しないブラウザでも、順番に表示し（読み上げ）ていけば意味がきちんと伝わるように情報の配置を設計する
  • ...
  • 視覚デザインのみを目的とした画像はalt=""とする
  • ...

テーブルレイアウトは左上に重要な情報を配置する ユニバーサルHTML/XHTML p.63

この書籍全体のなかでもやけに現実的で具体的なアドバイスが並びます。

ウェブプロジェクトへの関わり

この書籍の約5分の1が、「ウェブプロジェクトの企画立案」というパートになっています。HTMLの本だと思ったら面食らうと思います。

でも、HTMLで人が楽をするためであれば、必要なことでしょう。お客さんがいて、制作側もメンバーが複数いると、コミュニケーションやスケジュールが問題になります。商用サイトなら、プライバシーの問題や、商業的な法律などの要素も関わってきます。趣味でブログを書くときとは異なる制約が、仕事のプロジェクトにはあります。

まとめ

本エントリーでは ユニバーサルHTML/XHTML を再読して思ったことをいくつか紹介しました。HTMLの要素であれば、伝えたい情報がまず先にあって、それをタグを使って表現する方法について知ることができます。Webの世界では、簡単に情報が提供できること、簡単に情報を調べられることに価値があることを再確認できました。Webを活用してもっと楽ができるようになるといいですね！

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ