デザインの次は、制作です。タグはどうなっていますか?
リフォームという考え方で行う作業は、実際の建築等でもそうですが設計した時点でほぼ終了です。あとは通常の制作と同じ作業を黙々としていくわけですが、しっかりとしたサイトを作り上げるにはそれなりの知識と経験が必要になります。
世間によくあるHP作成系のサイトはこのパートのみの場合がよくありますね。というわけで、詳しい解説はそういったサイトにお任せして、基本的なところと、あまり触れられていない点、制作を行うで注意するべきところ、リフォームのポイントなどについて解説していきたいと思います。
今回は大きく分けて2つの内容に分かれています。
下記のリストに載っていても講座で紹介していないところは、リンク集からたどることが出来ます。ここよりも専門的で詳しい情報が満載ですのでぜひ行ってみてください。
幸いなことにWebページのソースは常に閲覧が可能ですので、上手な人のソースをみてテクニックを磨くという手もあります。(このサイトのソースはあまり参考にはならないとは思いますが・・)
ここでは解説しませんが、説明書やサポートの情報を落ち着いて読めばたくさんの機能や効率よく作業するためのツールがきちんとそろっているはずです。ソフトの機能を全部覚える必要は全くありませんので「必要になったら調べる」という無理の無い流れで覚えていきましょう。
ブラウザで見ているページはHTMLで書かれています。HTMLの基本を知っているとさまざまな応用を利かせる事が可能で、トラブルにも適切に対処できます。
最近では、Webページの製作にHTML(およびタグ)を意識しなくても済むソフトが主流になってきているため、あまりご存知で無い方も多いと思われます。
しかし、そういったソフトを使っても出力するのはHTMLファイルであり、工夫したページを作りたいときや、トラブルが発生したときなどにHTMLを詳しく知っていることが解決につながることがあります。
※注、HTMLを意識しない系統のソフトを使うことが悪いということではありません。 生産性の高さや、初心者へしきいの低さなどはテキストエディタによる構築では得られないメリットです。
<タグ>文章</タグ>
これがひとつの構造(要素)になります。
そして、どんなページでもこの基本の構造を持っています。
<!DOCTYPE 〜 > (文書型宣言) <HTML> <HEAD> ヘッダ(文書に関する情報等) </HEAD> <BODY> 文章本体 </BODY> </HTML>
※細かいところは省いています。
先の例を見ればわかると思いますが、<HTML>(開始タグ)で始まって</HTML>(終了タグ)で終わっていますね。そしてその中に<HEAD>〜</HEAD>と<BODY>〜</BODY>の構造が入っています。ほかのタグもこれの繰り返しで中身を作りながらひたすら構造(入れ子構造)を作り上げていくわけです。
このように構造が出来ていくわけですから、タグを閉じないと構造がおかしくなる場合があります。ちょっとした有名ブラウザでは、適当に記述しても意味を汲み取ってくれますが、厳格なブラウザでは表示されませんのできっちり閉じるクセをつけましょう。
ですが、閉じなくてもよいタグもありますので、解説サイトやリファレンスを読みながら使いましょう。
あと、入れ子にならない状態(ダメな例:<A><B></A></B>)に閉じてもいけません。
※入れ子構造の分かりやすい例はマトリョーシカ人形などです。
ヘッダと本体では用途の違いに伴い使えるタグの種類が違います。ヘッダには本体の文書に関する情報を記載するための用途として、本体は文章そのものを記述するためにです。
本体に関するタグは省略するとして、ヘッダに書き込んでおくべき2つの項目について解説します。
<TITLE>タイトル</TITLE>
例:<TITLE>使いやすいブラウザ紹介 - アトリエ鼎</TITLE>
タイトルは、そのページの中身が想像でき、固有であるべきです。
このタイトルがどのように使われるかを想像すればその理由がはっきりします。忘れずに書きましょう。
文字化けを防ぐために文字コード情報を付記しましょう。
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS" >
<HEAD>のすぐ次の位置に書きましょう。
※WindowsやMacなら大抵"Shift_JIS"で大丈夫です。これからはユニコード(例:"UTF-8")等になるかもしれません。
一般的な制作ソフトなら"Shift_JIS"で出力するため、さほど気にすることはありません。自動的に付記してくれるソフトもありますので、出力ファイルに無かったらつけておきましょう。
タグは基本的に入れ子状に使っていきます。これさえ守っていれば、大抵の事は普通に出来ますが、注意すべきポイントがあります。
タグには、大きく分けてインライン要素とブロックレベル要素という種類があります。ブロックは文書の段落や章・文ごとに、インラインは単語や行などに用います。
H1,P,DIV など
A,IMG,BR,SPAN など
ここで重要なのは、「インラインの中でブロックは使えない」ということです。
※タグの種類によってはここで良いとされている中にも禁止されている組み合わせがありますので注意しましょう。(BODYの中に直接IMGなどはダメです)
これらがしっかりしていないと、チェックの厳しいブラウザがHTMLとして認識しなくなります。他にもスタイルシート等を利用する段階に入った時にミスが起こりやすいのでチェックを欠かさないようにしましょう。
タグに細かい設定を加える際には、開始タグに属性と属性値を書き込むことで可能になります。見た目に関する設定もありますが、タグは文書の構造をブラウザでどう表示するかを指定しない方針になってきていますので(一部を除く)文章や意味の構造の区分けだけに使いましょう。
<タグ名 属性="属性値">〜</タグ名>
例:<DIV CLASS="sample">文章</DIV>
スタイルシート等で用いるCLASSにクラス名"sample"を設定。
例2:<IMG SRC="aaa.gif">
SRCでイメージの画像ファイルを指定。
※<IMG>は閉じなくて良いタグ
そして、どんなページでもこの基本の構造を持っています。
HTMLには必須の項目で、いろいろ宣言などがありますがブラウザの動作や使う規格によって大抵3つの宣言が用いられています。用途によって使い分けましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
※XHTMLの場合はまた別の宣言があります。
書くと長くなるので省略しますが、規格に準拠するメリットが浸透してきた今、ブラウザも色々な過程を経てようやく一つの形として各ブラウザで共通の解釈結果を持つ「標準モード」に進みつつあります。その結果ブラウザとしては以前のページも解釈できるように「互換モード」を残しました。
基本的には完全準拠で書くべきですが、かなり厳しく作られています。そのため少し緩やかなTransitionalが現在までの主流です。
メンテナンスのためにタグが無い状態でも中身がわかるようにページを構成しましょう。
どんなにレイアウトにこだわったり動きをつけたりしても、文書の内容はHTMLのレベルでは直線的に並んでいるだけです。こったページを作るとページの構造は断片的になってしまうことがよくあります。
そうなる前にタグを全部取った状態でも文書として通用するように構成を組みましょう。基本的にはデザインの章で定義した「コンテンツ・ナビ・その他」でまとめておくと良いでしょう。
これをやっておくと、HTMLが読みやすくなりメンテナンスも容易です。アクセシビリティも向上しますのでぜひやっておきましょう。
<DIV> ナビゲーション </DIV> <DIV> コンテンツ </DIV> <DIV> その他 </DIV>
このように直線的に組んでおくと便利。
コメント(<!-- ここにコメント -->)を使って更新のヒントやブロック分けの仕切りを埋め込んでおくのも有効な方法です。
うっかりやってしまいがちなのが、全角の空白です、ブラウザでは空白と認識してくれませんので十分注意しましょう。ちゃんと入力したはずなのに認識されない場合は全角の空白を疑って見ましょう。
※古いブラウザでまともに表示させるためにタグを改行なしでくっつけたりすることもありますが、これからのブラウザではそのような事は無いので気にしなくて大丈夫です。
Webページを作るにはHTMLで文書構造を書くだけではなく、スタイルシートを使って意図したデザイン通りのページを完成させることが必要です。
スタイルシート(CSS)は、タグ(HTML)をブラウザ上でどう見せるかを設定するものです。(厳密には視覚以外の設定も出来ます)
スタイルシートには3つの設置方法があります。
<STYLE>タグを使ってHTMLのヘッダの部分に書き込みます。
入門には便利な方法です。
<HEAD> <STYLE TYPE="text/css"> <!-- ここに設定。 --> </STYLE> </HEAD>
複数のファイルに同じスタイルを持たせたい場合に使います。
スタイルシートに慣れてきたらこの方法にしましょう。
<LINK REL="stylesheet" TYPE="text/css" HREF="外部ファイル名.css">
※これを適用するページのヘッダに書き込みます。
ちょっとした変更などに使います。 管理が大変になるのであまり使わないほうが良いでしょう。 例外としてプロトタイプを作るときには便利です。
<タグ STYLE="スタイル設定">
HTMLの中に、コメント(<!-- ここにコメント -->)を使って更新のヒントやブロック分けの仕切りを埋め込んでおくのも有効な方法です。
うっかりやってしまいがちなのが、全角の空白です、ブラウザでは空白と認識してくれませんので十分注意しましょう。ちゃんと入力したはずなのに認識されない場合は全角の空白を疑って見ましょう。
※古いブラウザでまともに表示させるためにタグを改行なしでくっつけたりすることもありますが、これからのブラウザではそのような事は無いので気にしなくて大丈夫です。
スタイルの基本的な設定方法はこのようになっています。
設定先(セレクタ) { 設定項目(プロパティ): 値; }
例: P,DIV { font-color:blue; font-size:10pt;}
(PとDIVタグの文字を青色&サイズ10ptに設定しています。例のように複数のタグ等に指定する場合は","カンマで区切ります。)
このように、狙ったタグにスタイルを設定していきます。タグに対する一括指定以外にも個別(ID指定)や特定の種別(クラス)ごとに指定することも可能です。
一部の設定は、指定したタグの要素の中のタグに継承されます。
タグで <SPAN ID="effect">文字</SPAN>
スタイルに #effect { font-color : red ; }
(SPANタグに目印となるID"effect"を付け、スタイルにそのID名"#effect"を指定しています。"#"をつけることを忘れないように。)
タグで <DIV CLASS="effect">文字</DIV>
スタイルに .effect { font-color : blue ; }
(DIVタグに特定の種別の目印CLASS"effect"を付け、スタイルにそのCLASS".effect"を指定しています。"."をつけることを忘れないように。)
※他に「*」ですべてに共通して設定できたり、(例:P.class)のように特定のタグのクラスやIDにのみ設定することも出来ます。
スタイル設定内でのコメントの記述は
/* ここにコメント */
です。どこにどのように適用しているか書いておくと良いでしょう。
コンテンツの章でもすこし触れましたが、アクセシビリティとは「アクセスしやすさ」をあらわしています。当然幅広いアクセスを受けるためアクセシビリティを高めるべきです。
便利なことに、W3Cでアクセシビリティについてのガイドラインが策定されています。WCAG2.0がそろそろでるようですが、まずはWCAG1.0(邦訳)の中身を読んでみましょう。
ちょっと六法全書を読んでるような気分になられた方もいらっしゃると思いますが、チェックポイントリスト(邦訳)を参考にチェックしてみましょう。
いくつYesをつけられましたか?Noの数だけハンディキャップの有る方達との距離は離れてしまいます。ガイドラインを詳しく読みできるだけ敷居の低いサイトを作るための努力をしましょう。
正確には、「ブラウザが解釈できる範囲の規格でHTMLを書く」です。ブラウザの中には特定のタグの解釈が間違っていたり未実装だったり使えてもバグったりする場合があり、ブラウザ上でのテスト無しにHTMLを書くのはやめましょう。
当然、基本的な文法ミスは致命的になります。最低限文法を守っていないとHTMLとしてすら解釈されないため閲覧できなくなってしまいます。とはいえ文法チェックを人間がやる必要も無いので、チェックツールや整形ツールを使ってミスを検出&修正してもらえば大丈夫です。
さらに言えば、それぞれのタグがなぜその機能をもっているのかを理解した上で使うとミスも少なく効率のいい制作が出来るでしょう。
※このサイト以外にも自動整形してくれたりするものや、制作ソフト自体にチェック機能が付いているものもあります。
どう努力してもガイドラインや規格に反してしまうものでしか実現出来なかった時は、代替手段を用意しましょう。これは決して悪いことではありません。
重要なのは、「アクセシビリティの低いサイトやページは良くないが、そのページやサイトのデザイン等を目的に沿って創造していること自体は悪いことではない。」ということです。これは単にまだ人類がまだ創造性とアクセシビリティの両立できる高度な技術を持っていないというだけの事なのですから。
というわけで技術的限界と割り切って、ガイドラインなどに沿ったテキスト版等の別バージョンを用意しましょう。携帯端末からもアクセスできるようになるわけですからメリットはさらに増します。
Flashなどを使った動きのあるものは代替手段がありませんが、動的なコンテンツ自体を提供したい場合でなければ、文章等で出来る方法はいくらでもありますので、出来るだけ同質の手段を用意しましょう。
ガイドラインや規格を満たしていればとりあえず及第点です、それ以外にもアクセスを簡単にする方法はまだまだあるはずです。余裕があるならぜひ自分自身で考え実践してみましょう。
サイトに来てもらうためには、広告やポータルサイトへの登録が必要になりますが、それとあわせてページ側でもメタタグ等を設定することで検索エンジンなどにヒットしやすくする工夫をすることでさらに見つけてもらいやすくなります。
ページに関連するキーワードを記しておく
<META NAME="keywords" CONTENT="キーワード">
ページの概要を記しておく
<META NAME="description" CONTENT="概要">
※他にも多数あります。
見つけてもらうために、サイト内検索をつけることもいいアイデアです。本来は検索機能を付けるかどうかはここで決めるべきではありませんが、グーグルは優秀な検索サービスなのでぜひ設置しましょう、独自で中途半端な検索機能をつけるよりも効率よく訪問者を誘導できるはずです。
詳しくは、Googleの「リンク、検索機能を追加」のページをご覧ください。
検索結果のデザイン等もある程度カスタマイズ出来るのでサイト本体のデザインとも比較的違和感無く融合できるでしょう。
ここでは良くあるテーブルタグによるレイアウトではなく、スタイルシートを用いたレイアウトの設定方法を解説します。デザイン編に出てきた二つの例を形にしてみましょう。レイアウト内部の細々としたデザインについては、紹介しているサイトが多々ありますので省略します。
ただし、スタイルシートの使用には前提条件があります。
このレイアウトはスタイルシートを用いるのにもっとも適しています。構造的に特に問題も無いので簡単です。
<DIV ID="base"> <DIV ID="top"> 上 </DIV> <DIV ID="contents"> コンテンツ </DIV> <DIV ID="bottom"> 下 </DIV> </DIV>
まず3つのエリアを作ります。そしてこれらを囲むようにして、もうひとつ<DIV>を設置します。そしてbaseにスタイルを設定します。左右のマージンをautoにすることでセンター揃えになります。固定幅にするためにwidthを設定します。
#base { margin: 0 auto; width: 600px; text-align:left;}
※marginに関しては短縮形の設定法です。設定値が2個の場合 上下 左右 の値を設定したことになります。
基本的には先の設定で完成ですが、ブラウザのバグへの対処のために少し付け加えます。
BODY { text-align: center; } /* IE対策 */ #base { padding-right: 0.1px; } /* mozilla系対策 */
これを付け足して終了です。完成したレイアウトを見てみましょう。
このレイアウトはCSS2で実現するにはあまり向いていません。(CSS3では解消されるらしい)ですが、どうしてもスタイルシートを用いたい場合は下記のように振舞う事を前提に用いましょう。
まずは、エリアごとに<DIV>タグを作ってみましょう。
<DIV ID="lefttop"> 左上 </DIV> <DIV ID="righttop"> 右上 </DIV> <DIV ID="leftbottom"> 左下 </DIV> <DIV ID="contents"> コンテンツ </DIV>
次に各エリアのスタイルを設定します。 lefttopは150×100の完全固定エリアとしてみましょう、righttopは縦100固定、leftbottomは横150固定になるわけです。
突然ですがここで、色々スタイルシートの限界・ブラウザのバグ等を回避するためにさまざまな工夫を施します。一つ一つ説明するととても長くなるので、ソースを見て勉強してください。
※このレイアウトは完全なエリア分けを目指しているため複雑ですが、このサンプルをヒントにタグを削っていけば簡単なバージョンも作りだせます。
※テーブルタグでのレイアウト方法もありますが、推奨されていませんので互換性が重要である場合など、どうしても必要なとき以外は使わないようにしましょう。
※判別しにくい要素は任意に判別し扱う。
ページデザインにおける画像の扱いについて、スタイルシートを用いるようになってから「装飾用画像」と「文書構造内(タグ)の画像」のどちらで扱えばいいか、どう扱えば良いかについて解説します。
この二つを分けるポイントは、さまざまな方法があると考えられますが、コンテンツや機能との関連の度合いによると思われます。
まずは、画像を扱える要素について把握しておきましょう。よく使う物は下記のように3種類あります。構造に組み込む場合は<IMG>、それ以外はスタイルシートということになります。
<IMG SRC="ファイル名" ALT="絵そのものの内容" TITLE="絵が持つ機能など">
ALTとTITLEは必ず書いておきましょう。
装飾用の特に意味の無い画像の場合は""で。
背景画像で利用(通常のブロック&インライン要素)
background-image: url("画像ファイル名");
リスト用アイコン(<li>など)
list-style-image: url("画像ファイル名");
次に、画像が使われる場面を考えて見ましょう。ある程度仕分けもして見ましょう。
残った判別しづらいものの仕分け方は、そのページのデザインコンセプトやページデザインの柔軟性の度合いに従いましょう。
デザインの章でテンプレートのデザインというのがありましたね。実際の実装方法には多種多様な方法がありますが、今回はもっとも古典的な、すべて手作業によるテンプレートの作り方&使い方を解説します。
テンプレートは繰り返しの無駄とミスを省くために使います。 基本的な流れは下記のようになります。
扱うページ数が少なければ、「最初に作ったページをコピーして使う」で十分です。無理に使う必要は全くありません。
テンプレート慣れるために、まず初歩的なテンプレートを作ってみましょう。利用する項目は、タイトルと本文です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS"> <TITLE><!-- #タイトル --></TITLE> </HEAD> <BODY> <!-- コンテンツ --> <DIV> <!-- コンテンツエリア開始 --> <H1><!-- #タイトル --></H1> <HR> <!-- #本文 --> <!-- コンテンツエリア終了 --> </DIV> </BODY> </HTML>
※判別しにくい要素は任意に判別し扱う。
新たなページを作る際にはこのファイルをコピーして、 <!-- #タイトル -->に「タイトル」、<!-- #本文 -->にHTML化した「本文」をいれます。
まずはデザインで設計したエリアごとにパーツとしてタグを組みましょう。このパーツの組み合わせを必要に応じてテンプレートに貼り付けます。
テンプレートに貼り付ける位置をマーク(<!-- #ナビ -->など)しておくとさらに便利です。
<!-- #ナビ -->に設置するパーツ <!-- SAMPLE PARTS1 --> <DIV> <A HREF="〜">HOME</A> <A HREF="〜">CONTENTS</A> </DIV>
※SAMPLE PARTS1と書いてあるのは管理用の固有のパーツ名。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE><!-- #タイトル --></TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS"> </HEAD> <BODY> <!-- #上位ナビ --> <!-- コンテンツ --> <DIV> <!-- コンテンツエリア開始 --> <H1><!-- #タイトル --></H1> <HR> <!-- #本文 --> <!-- コンテンツエリア終了 --> </DIV> <!-- #下位ナビ --> </BODY> </HTML>
<!-- #部品名 -->などにそれぞれエリアごと作ったタグを当てはめます。
ナビ自体にちょっとした小細工(たとえば現在位置のリンクの背景を反転させる)などしたい場合は、パーツを細分化するか、派生したパーツを複数用意して使うと良いでしょう。
注意するべき点は、サイト構造によってリンクやファイルなどのURLの参照先があわなくなる可能性がありますので階層ごとにパーツを用意するなどして使いましょう。
利用を始めてしまってからテンプレートやパーツの内容を変更すると、同じテンプレートを使って変更前に制作してしまったページとの整合性が取れなくなります。この問題の解決方法は、以前のファイルの中身を一つ一つ変更することが必要になります。
手作業でやってもかまいませんが、さすがに骨が折れるので道具を使いましょう。テキストの「置換」を使うことです。
まずテンプレートやパーツ自体は目的に応じて変更しましょう。変更前のファイルも保存して置いてください。
ここからテキストの置換ツールを使います。使い方は、検索文に変更前のパーツ、置換文に変更後のパーツを入れます。エディタや制作ソフトにはもともと付いている場合もありますので、使い方は各自調べましょう。
範囲:サイト全体のHTMLファイルなど
検索文:
<!-- SAMPLE PARTS1 -->
<DIV>〜
※変更前のパーツのことです。
置換文:
<!-- SAMPLE PARTS2 -->
<DIV>〜
※変更後のパーツのことです。
先ほどパーツにコメントでマークをつけたのはこの置換作業で指定した物だけを置換させたいために仕込んであったのです。これでマークを付けたものだけ置換され、うっかり類似の構造のタグが変更されることもありません。同様にナビ等の項目の追加も削除も簡単です。
注意点は2つあります、一つは置換のための検索が失敗してしまうため、出力後のページでパーツをいじってはいけないということです。
もう一つは、ファイル固有のデータを含むテンプレートなどを扱う際にそのデータごと置換して消失させてしまうことがあります。データとかぶらないようにテンプレートの中にもマークをつけておいて、マーク単位で置換するようにしましょう。全部をパーツ化して、テンプレートにはパーツのマークと入力のためのマークだけ貼るという手もあります。
このように手作業でテンプレートを作っての管理は、一つずつページを作るよりはましですがそれでも大変です。フレームタグを使うと変更した時に影響するページ数が減りますがアクセシビリティが低下しますので悩むところです。
そこでせっかくコンピュータを使っているのですから、この作業をすべてを自動化するという解決方法があります。これで管理が非常に楽になるばかりでなく、一度構築してしまえばWebの知識が少ない方でも簡単に利用できるというメリットがあります。
自動化しても概念は同じですので、ページ数が膨大になってきたらぜひ高度な管理法に挑戦してみてください。
サイトが大きくなっていくにつれて重要になってくることがあります。それは「使いたいファイルが今どこにあるのか」ということです。ファイルを扱うルールとフォルダ構造を明確に決めておけば迷うことはありません。
「制作・管理・閲覧」の、どのレベルでもサイト構造とフォルダ構造が一致しているほうが理解も作業もしやすく無駄がありません。
ただし、末端の部分で細分化しすぎると無駄な作業が増える場合があるので、ファイルの量に応じてフォルダを作るかどうか判断しましょう。
外部スタイルシートファイル、外部JavaScriptファイル、画像ファイルなどはそのファイルのあるフォルダの中に専用のフォルダを作って保存しましょう。種類ごとに分かれているほうが管理は簡単です。
※これはあくまでも例です。
ロゴ画像やスタイルシートなどは共通して利用することが多いので、そのファイルの利用が最初に始まる層にフォルダを作成しておくと多重にファイルを用意する必要が無くなり、ロード時間の節約にもなります。
※これはあくまでも例です。
デザインが大きく変わるエリア、もしくはそのエリアはまったく他のコンテンツとの関連性が無い場合などは、そのフォルダ以下だけで完結させてしまったほうが移動や管理も容易になりますので、安易に上層の共通用フォルダに投げ込まないようにしましょう。