みなさん、宿題は出来ましたか？ 出来た人もいるでしょうし、先に全部この講座を読んでしまえと、そのまま続けて読んでおられる方もいるでしょう。ええ、どちらでも構いません。 宿題が出来なかった人、やらなかった人も、いずれ自分のホームページを作る際には、宿題という義務的なニュアンスではなく、絶対的に通らなくてはならない創作の一過程なので、ココで無理にやっておく必要はありません。 それでは、実際に表紙ページを作っていきましょう。 まずはタイトルを決めましょう。タイトルはホームページの顔です。検索エンジンにも最初にタイトルが表示されますし、どのページへ行こうかといくつかの候補があった時も、「タイトル」→「説明文」の順で読むでしょう。そういったことを勘案すると、タイトル決めはとても重要です。 タイトルにはこんな役割があります。まず、中身がタイトルによっておおよそわかること。「僕たち初心者ホームページ作成講座」と題してあれば、初心者向けのＨＰハウツーものだとわかります。しかし、タイトルだけでは何がナンだかわからないものもあります。あえてそういうタイトルのつけ方をしているわけです。これが「ホームページ講座」ではちょっと味気ないですね。ちょっとした修飾語で雰囲気やニュアンスを表現し、「僕たち初心者ホームページ作成講座」としているわけです。 しかし、世の中には何がナンだかわからないタイトルのものもあります。むしろそういうタイトルの方が個人ページには多いかもしれません。例えば、「少年ジャンプ」というタイトルだけでこれが「マンガ雑誌」だとどうしてわかるのでしょうか？ しかし、親しまれるにつれてそれは定着して行きます。中身のわからないタイトルをつけるのであっても、コンテンツに親しんだ人が、そのページの顔として、代名詞として、ふさわしいタイトルをつけましょう。 もっとも良くないタイトルが「○○のホームページ」というものです。「とらおランド」なんていうのもその例です。僕がＷｅｂで親しくさせていただいている方にも、こういう最低なタイトルのつけ方をしている方がたくさんいます。一般的にこういうタイトルは良くないとどこでも言われています。避けた方が無難であるのは確かなのですが、しかし、個人ページであり、訪問者はその個人に対して好感や興味を持って訪れてくれるようになった後には、そんなタイトルのつけ方も悪くなかったんじゃないかなと思います。 いずれにしても、タイトルはそう簡単に変更出来るものではありません。憲作エンジンの登録やりなおしや、リンク先へその旨の連絡をしたりと、大変わずらわしい作業がついて回ります。タイトルの変更だけで読者が離れていくことだってあります。ですから、よおく考えて慎重につけましょう。 なお、タイトルは、既に勉強したように、<title>〜</title>のところに書きます。表紙ページの場合はそのホームページのタイトルを書きますが、それ以降の各コンテンツの場合はどうでしょうか。ホームページのタイトルを全てのページのタイトルタグ欄に書きこんでもいいですし、それぞれのページタイトルを書きこんでも構いません。このページでは両方を書いています。「僕たち初心者ホームページ作成講座『表紙ページを作りましょう』と、左上に書いてありますよね？ ロボット型検索エンジンの場合は、表紙ページのみならず全てのページを検索対象としており、タイトルとしてこの部分が表示されますので、僕はこのようにしているわけです。 さて、便宜上、この講座で作るホームページのタイトルは、「ホームページ仮免練習中」とします。でも、みなさんが作るページはみなさんがタイトルを決めて、「ホームページ仮免練習中」の文字をみなさんの作ったタイトルと差し替えてくださいね。 |
タイトルに画像を使う人はたくさんいますが、この講座では、とにかくまず形を整えるために、テキストオンリーで進めます。画像を創ったり、あるいはどこかから無料素材を探してきて加工したりするのは、とても手間隙がかかるからです。それに、画像を使えばその分ページが重くなりますので、閲覧環境は悪化します。 さて、テキストオンリーでも、目立つタイトルのテクニックは多数存在し、各人各様に工夫をされていますから、あなたにもいずれそういった創意工夫をしていただくとして、ここでは単純に、画面の中央に大きな文字でタイトルを表示させてみましょう。
|
| こんなタイトルにしてみました。 ソースは次のようになります。
|
| 以前の練習ページと異なるところは、背景色を「白」に戻したこと、そして、タイトルを書きこんだことです。 |
さあ、新しいタグが出てきましたので、解説をします。 <center> 〜 </center> 中央寄せ（センタリング）です。このタグに挟まれた部分の文字は、画面の中央に来ます。 <h1> 〜 </h1> 見だしです。見出しの大きさには「１」〜「６」までがあり、「１」が一番大きくなります。以前、basefont の所で、フォントの大きさには「１」〜「７」まであり、「７」が一番大きいと勉強しましたが、見出しの場合は「１」が一番大きくなります。また、見出しの場合は文字の大きさだけではなく、文書の論理構造の意味も持っています。「ｈ１」の次にまた「ｈ１」とくれば、この両者は対等であり、「ｈ１」の次に「ｈ２」と来ればどちらが上位でどちらが下位かがわかります。従って、「見栄え上ｈ１では文字が大きすぎるからｈ３くらいを使おう」というのは誤った使い方です。文字の大きさではなくレベルで使わなくてはなりません。ただ、実際には、「大きさ」だけに捕らわれている人もいます。しかし、文字の大きさは本来、font size=1 〜 ７ で現すべきものです。 そういう意味では、ホームページタイトルに見だし１を使うのも考え方によっては誤っているかもしれません。が、ホームページ全体の一番大きな見出しがタイトルであるとここではとらえています。 <font> 〜 </font> このタグで挟まれた文字は、その指示に従って表示されます。ここでは、color = red となっており、赤色で表示しなさいということです。色については以前に簡単に勉強しましたね？ <font color=red> のように、font などのあとに出てくる指示のことを「属性」といいます。font の属性として次のみっつを覚えてください。 color="****"は、色です。色の名前または「＃＋２桁の１６進数で赤緑青の順」合計７文字で示します。色の示し方は既に勉強しました。 size="****"は、文字の大きさです。１〜７があります。 face="****"は、文字の種類（明朝とかゴチックとか）です。 しかしながら、face は「使わないほうがいい」という人もいます。なぜなら、そのフォントが見る人のパソコンになければ、無視されるからです。無視されれば、作成者の意図する表現が出来ません。丸文字などで表示されれば「面白い」という程度のニュアンスなら使ってもいいのですが、フォントを変えることでなにか意味を持たせようとするのはいけません。無視されれば意味をなさなくなるからです。こういう場合は、文字種ではなく、色やサイズや強調（後述）などを使います。または、どうしても文字の種類を変えたければ「画像」に頼らなくてはなりません。 <b> 〜 </b> 「太字」です。このタグで囲まれた文字は「物理的に太く」表示されます。文字の表示方法を「太く」と指示しているだけで、他に意味はありません。意味を持たせるためには、<em> 〜 </em>（強調）や<strong> 〜 </strong>（より強く強調）を使います。 |
なお、上記はあくまでパターンのひとつに過ぎません。 タイトルの上や下にサブタイトルや簡単な説明があることも良くありますし、アクセスカウンターが最初に来る場合もあります。また、タイトルよりも先に、そのページの簡単な説明がくることもあります。色々なページをサーフィンすれば勉強になりますし、あなたのお好みでレイアウト＆デザインしてください。 |
|
|
ホームページ作成講座□ |
永 | 井 | 真 | 理 | 子 | の | ||
|---|---|---|---|---|---|---|---|
元 | 気 | の | と | び | ら |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━