スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
XHTML にしろ、HTML4 にしろ、なによりも最初にマトモなソース記述ができなくてはハナシになりません。ホームページ制作ソフトを使っている場合は、レイアウトに関する機能、インライン要素に対する見栄え変更等がメニューからの選択でできたりする訳ですが、まずこれらが邪魔になる。Macromedia は、自社サイトを XHTMLにしているトコロを見ると、スタイルシートによるレイアウト機能がかなり進んだのかなと思います。（アップグレード追い付かず、使ってません）
決してソフト自体が悪い訳ではなく、ユーザー側で使い方を考えればおそらく美しいソースを吐き出すことは今となっては可能なのかもしれませんし、それによって情報発信者が増えるのは決して良くない事じゃあない。でも、パソコンに向かってまず見栄えをどうしようと考えてしまうことは、すでにHTMLの本来の威力の恩恵に与ることになかなかたどり着けない道に進むことになるのですが、今後はそこからの軌道修正も容易になると期待します。
ひとまず、そういう遠回りをしないためには、エディターで直接 HTML を書いてみることからはじめるほうが、やっぱり良いと思います。スタイルシートを使ったデザインでなくても「先にデザインがあってコンテンツをはめる」のではなく「コンテンツがあって、その見栄えをよくする、使い勝手をよくする」ためにデザインするのがまず基本だとも思います。同じパーツの色違い等はともかく、最初に中身のパーツがあって、まっさらなキャンバスに配置していく。手慣れた方は完成品を予測して配置していくからいかにも先にレイアウトありき、デザインありきと思われがちですが、そうではなくて、先に中身の意味を汲み取っているからポンポンレイアウトしていくだけで、決して最初に「カッチョエーデザイン」を作って中身をはめている訳ではないのです。
そんなわけで、作る人は必ず見てほしい。
ウェブならではのデザインは、そこから始まります。カッコいい画像を作ってはっつけていればある人にはカッコ良いと思われるかもしれませんが、それがかっこいいウェブデザインかといえばそうではない。それにHTMLをエディターでシコシコ記述することは、ソフトを使うより難しくなんてありません。むしろそれより簡単。ブロックレベル要素とインライン要素の違い程度を把握して、要素の（文書構造的な）意味を理解して、記述様式にそってマークアップすること。この基本をおさえたドキュメントを書いたあとに、スタイルシートを使って見栄えをよくすることを覚えませう。
ウェブ制作者必携！
すでにウェブページを作っている方で、テーブルレイアウト手法を使っている方。地味にフォント指定等だけでスタイルシートを使っている方も含めて、全体のレイアウトのスタイルシート手法への移行をお勧めします。ゼロからはじめる方は余計な知識を持たず、ごく簡単なHTMLの説明から始めて、仕様書に沿ったリフェレンスを参考に進めれば話は早い。ゼロでない方は一旦持っている知識をリセットするという大抜本的改革が必要かもしれず、そのほうが大変かもしれない。
ひとまずすでに制作している方は、テーブル関連要素をソースからことごとくとっぱらうことから始めます。これは楽しい。苦労して作ったデザインがことごとく崩れ去るさまを楽しみましょう。こまかくフォント要素を取り除く、なんてことより、ここから始めた方がいいと思う。好きなエディター使って、完成している筈のHTMLを開き、どんどん削除。文字検索置き換え機能があるなら、それを使いましょう。
だいたいテーブルレイアウトをしていると、それがなくなったらドコが見出しか、ドコが本文か、分からないテキストファイルになるのが多い。訳のわからん画像の断片が散らばる。そういうヤツをマークアップし直します。文書として、上から下への流れすらメチャクチャになっていることもあるので、ソース上で順番をただします。テーブルを取っ払った後、フォントタグなんかも取り払います。文字サイズや種別、配置等の属性も「全部」取り払います。
分割された画像なんかがある場合は 1枚ものにまとめます。多少でかくたって大丈夫です。＜いまとなってはその方が読み込みが早い
文書が順序よくなったら、見出しには見出し要素、段落は段落要素でマークアップします。単独で出現している画像もひとつの段落として<p>で囲います。おそらくいっぱいある<br>も取り払えます。もしテキストで段落であったら、<p>になる箇所が多いはずだから。
見出しはレベルに注意します。ブラウザデフォルト仕様では、通常文字サイズが変わっています。文字サイズ自体にはこだわらず（こんなのは後でスタイルシートでいくらでも変更できます）最初にでてくる見出しが<h1>、その次が<h2>というふうに。ただ、見出しなんだかキャッチコピーなんだか分からん！というものがあったりした場合は仮に<p>として、後で全体構成が把握できたときに必要な箇所を修正しましょう。
また、見出しとなる箇所に画像を使っている場合。とりあえずはその画像を<hn>（nには1〜6の数値が入ります。以下同様）とします。あと、<img>要素は全てalt属性が必要なので、見出しにあたる画像なら、そのテキストをaltに記述します。
さて、そうやっていくとここのページのように非常にシンプルな見栄え（このページはなんもしてないのではなくていぢくりまくってこうしてます）になる筈です。この時点で色つきテキストだとかがあったら消しきれていません。また全ての要素は左よせになっている筈です。センタリングとか右よせになっていたら、その原因を除いて下さい。尚、通常ブラウザデフォルトスタイルで、見出しは太字でレベルによってサイズが異なり、段落は閉めると次の行が 1行あきます。メニュー等は<ul>、<ol>、<dl>等のリスト要素にすることが多いです。
ブラウザデフォルトスタイルを確認しながら、この時点で「文書構造チェック」をします。見栄えが思い通りでなくても気にする事はありません。ただし、タグの閉じ忘れ等で全部が太字になったりしますから、そういう箇所があれば修正します。ひととおりできたら、チェッカー等を使うのがいいと思います。
上記でまずエラーを出さないのが基本です。マークアップのミスを見つけてくれます。ここでは「構造そのもの」をチェックしてくれるのではないので、そのへんはご自分で。
実際のレイアウトの手法は人様々でしょう。ここでは自分の場合を簡単に。
ブラウザデフォルトスタイルは W3Cでいちおう「基準」となるものを提示しています。実際のトコロ、それと完全に同じではないですが「なにもしていないブラウザのHTML描画状態」はだいたい似ています。
その基本状態をウェブデザイナー（？）は、サイトやコンテンツ内容に応じてもっと効果的な見栄えとなるようデザインする訳です。そこで、基本をもとに修正をかけていくことになります。が、この時点ですでにこのデフォルト状況全てをマッサラにして始めたいと考えたくなる方は多いんじゃないでしょうか？そのままスタイルシートでレイアウトやデザインを付加していく前に、この「ブラウザデフォルトを自分用に初期化する」ということを考えました。
レイアウターは、全体のネタをひととおり把握したら、それらを配置するという作業に移ります。以前であれば、テーブルのボーダーを表示した状態で枠組みを作り、内容をはめ込んでいくといったことと同じ。人様がこのレイアウトやデザイン作業をどうやっているかは知りませんが、自分の場合はだいたいどんなに大きなサイトでも、基本的に必要なコンテンツを全ていれたHTMLドキュメントを作り、共通化箇所等を確認します。同時に、そのサイトにおいて最適なコラム組み等を考えます。このへんは暫く制作しているといくつかのパターンにまとめて、ひな形を作っておくと効率的。
スタイルシートを利用しての制作側の最大の恩恵は、異なるページでも同じスタイルシートをリンクさせることで共通箇所を一つの設定で制御できる事です。そのために見出しレベルに気をつけ、共通となる箇所とそうでない箇所を把握するのです。このへんは、ウェブサイト構築に限らず「読みやすい文書」を作るためのテクニックでしょう。雑誌、新聞、小説等の書籍、技術書、カタログ、パンフレット等、世に多くある書物のレイアウトやデザインだって、ものによってある一定の規則の上に制作します。それと同じこと。
2004年11月18日 19:12
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto