好奇心旺盛な子どもたちと、出遅れたオトナのための
ゼロから始めるパソコン・マスター!
すいません。2段組みをやめてしまいました。本文末にある1段下がっている部分が、本来右段だったはずの文です。Part2
ホームページは「何でも箱」
082-083ホームページってどんなもの
○六〇%の人がWWWを利用している
世界中には、数え切れないほどのホームページがあります。日本だけでも何万、何十万という数になることでしょう。
いったい、どれぐらいの人が見ているのでしょうか。
九七年九月末、日本中で五五五万人がWWW(ワールドワイドウェブ→P××)を利用しているという調査結果が発表されました。
同じ調査では、インターネットで一番使われている「電子メール」の利用者は、八六〇万人となっていました。ということは、インターネットを使っている人のおよそ六〇%がWWWを利用していると言うことになります。○クリックひとつで世界へジャンプ
ホームページには「リンク」というしかけが隠されています。リンクというのは「つなげる」というぐらいの意味のことばです。
これを使うと、文章や画像の決められた場所をクリックすることで、ほかのホームページにジャンプすることができます。インターネットでつながっているところであれば、世界中、どこにでもジャンプできるのです。
ですから、いま、日本にあるホームページを見ていたのに、ひとつクリックをしただけで、中国やアメリカのホームページにジャンプしてしまう、なんていうこともできるわけです。
082
●ホームページを見るのに必要なもの
準備
電話
(プロバイダなどの接続サービス会社との契約)
ハード
パソコン
モデムと接続ケーブル
ソフト
ブラウザ
TCP/IPソフト
ダイアルアップ接続ソフト
★モデムと電話以外は、きっと君のパソコンに、最初から入っているよ。
083
●リンクを使えば世界へ飛べる
・日本のワールドカップ予選速報のページ
文字の色がちがうところが、リンクがしかけてあるところ。そこをクリックすると……
・FIFAのホームページ
アメリカにあるFIFAの「ワールドカップ公式ページ」に、いっしゅんのうちにジャンプ。
リンクをクリックするとどこに行くか? URLが、クリックする前はブラウザの下に、クリックすると上に表示される
084-085ホームページってどうやって見るの
○ホームページはブラウザで見よう
ホームページを見るには、ふつうブラウザを使います。
ホームページは、そのほとんどがHTMLという約束ごとで書かれたファイルです。
HTMLは、どんなOSでも使うことができる便利なものですが、そのままワープロなど見ると、わけの分からない暗号がならんだように見えます。
ブラウザは、このHTMLで書かれた文書を、ちゃんと表示してくれるソフトなのです。
また、ブラウザには、ホームページをあちらからこちらへと手際よく見ていくために便利な機能もたくさん備えられています。○ホームページの住所「URL」
ホームページには、それぞれ住所のようなものがあります。URLという、この住所は、どんなに小さなページでも、ひとつずつに必ずつけられています。
URLがわからなければ、ホームページを見せることも、また、見に行くこともできません。○プロバイダと契約しよう
最近のパソコンのほとんどは、必要なソフトは最初から入っています。でも「プロバイダ」と呼ばれる接続サービス会社との契約は自分でしなければいけません。
未成年の場合は、契約にはお家の人の承認が必要です。お家の方とよく相談して下さいね。
084-085
●ブラウザの使い方をおぼえよう
- 「http://」で始まるURLをここに書き込めば、すぐにジャンプできる。
- 最近見た所にすぐに戻れる。
- よく見に行く場所を記録しておける。
- 記録してあるホームページは、メニューから選んでジャンプできる。
- リンクが隠されている文字は色がちがう。クリックすると、ジャンプしたりメールを出したりできる。
●リンクをたどってジャンプ、ジャンプ
URLがわからなくても、リンクされているところをたどっていけば、いろいろなホームページにたどり着ける。思いがけないようなところに出ることもあるよ。
086-087ホームページはどうやって作るの
○専用ソフトが一番だけど
ここまでは、ホームページを見ることについてお話ししてきました。では、ホームページを自分で作るとなったら、どんなソフトが必要でしょう。
実はホームページ作成用のソフトがいろいろあります。どれも、いろいろなことが簡単にできます。
でも、ワープロやブラウザ、統合ソフトの中には、HTML文書を作ったり編集したりする機能を持っているものもあります。ちょっと機能は少ないですが、最初はそこから始めるのがいいでしょう。
自分にとってもの足りないところがわかってきてから、ホームページ作成ソフトを選ぶとよいでしょう。○入れたいもので必要なソフトが変わる
HTMLエディタをのぞけば、必要なソフトは、どんなホームページを作りたいかで変わってきます。
ホームページは、パソコンでできることのすべてをつめこむことができる「なんでも見本市」のようなものです。第2章で紹介したいろいろなアプリケーションで作成したものを、ほとんどすべて載せることができます。
ホームページを作り始めると、「こんなこともしたい」「あんなものを載せたらおもしろいだろうな」とやりたいことも増えてくるでしょう。必要なものは、そのときに考えることにしましょう。
086-087
●HTMLは魔法の言葉
左の画面のような、わけのわからない暗号が、ホームページを作る専用ソフト「HTMLエディタ」を使うと右下の画面のように表示したまま編集できる。これをブラウザで見ると左下の画面のようになる。●ホームページにはこんなものが入れられる
ホームページではいろんなコトができる。簡単な順に番号をつけて書いてみた。
1.文字
2.絵や写真の画像
3.ほかのホームページへのリンク
4.アンカー(ホームページの中でのリンク)
5.テーブル(表)を使った表示
6.テロップ(右から左など決まった方向に流れる文字)
7.声や音楽などの音声
8.アニメやビデオなどの動画
088-089ホームページを作り始める前に
○よそのページを見てみよう
実際に作り始める前に、人のホームページを見てみましょう。
まず、自分が好きなことがあったら、それに合わせてみましょう。
君がサッカーをしているなら、サッカーチームのホームページやサッカーの話の出ているところがいいでしょう。サッカーやサッカーチームについて、どんなふうなホームページが作れるか、よくわかるはずです。
それから、どんな人が作っているかも参考になります。君と同じぐらいの学年の人や、自分と趣味が同じ人のホームページを見てみると、自分にできそうなことやむりそうなことも、だいたい見当がついてくるはずです。○検索ページで探そう
参考にするページを見つけるには「検索ページ」を使います。
検索ページでは、だいたい二通りの探し方があります。用意されているメニューをたどっていく方法と、自分が見たいものの名前(キーワード)を入れて探してもらう方法です。
目的のページを見つけたら、その名前をクリックすれば、すぐにそこへジャンプします。
検索ページは便利なのですが、あれこれ見ていると、すぐに時間がたちます。検索ページは無料ですが、うっかりすると何時間もたっていて、大変な電話料金になりますから気をつけましょう。088-089
●検索エンジンの使用例
メニューから選択する方法(上は「YAHOOキッズ」、下は「YAHOO」)
画面に現れる項目から「少年サッカー」へ……。外国のも探せるぞ!(右下「YAHOO U.S.A.」)
1探していったら
2これだけ発見。あ、アメリカへのリンクもあるぞ! では……!
3うわあ、世界には山ほどあるぞ!
●キーワードで探してみよう
1 「サッカー」と「小学」の二つのキーワードで探すと……
2 5件発見! あれ? 実は3件か。
3 なかから選んでみたのが、これ。「小学生のゆうきくん」って、エスパルスのファンなんだね
●電子メールでともだちになろう
「これはおもしろい!」と思うホームページがあったら、電子メールを出して「ぼくもこんなホームページを作りたいです」と感想を送ってみよう。お友だちになれるかもしれませんよ。
090-091HTMLエディタを使ってみよう
○HTMLエディタのいいところ
HTMLエディタの画面は、ちょっと見るとワープロとたいして変わりません。ちがうのは「リンク」を設定するボタンがあることぐらいです。
実際にホームページを作るときも、使いなれたワープロで文章を作るのと、ほとんどいっしょですから安心ですね。
HTMLエディタは、めんどうなHTMLを自分で書かなくてもすむためのソフトです。ですから、
「できあがりのイメージを見ながら作ることができる」「文章はワープロ感覚で書ける」という特徴があります。
それ以外にも、ホームページを作る上で便利なように、いろいろな機能がついています。たとえば、
・リンクやアンカーの指定
・フレームの作成
・出来上がったページをアップロードできる(更新したファイルだけ、というのもできる)
・ファイルを収集できる
こうした機能はHTMLエディタならではのものです。くわしいことは、この後で、順に見ていくことにしましょう。
○HTMLエディタでできないこと
HTMLエディタは、素材を集めてうまくホームページにするためのソフトです。ですから、文章は書くことをのぞいては、もとになる素材は別のソフトで作ることになります。
●HTMLエディタのメニューとツールバー
●ワープロのメニューとツールバー
092-093ホームページに文章を入れよう
○ワープロと共同作業だ
前に書いたように、HTMLエディタもワープロと同じように文章を書くことができます。ちがうのは、ワープロほど自由に文字のスタイルを変えられないことぐらいで、その操作方法もほとんど同じです。
もちろん、ワープロなどですでに作った文章があるときは、それを利用することができます。
ワープロの文章を利用するにはいくつかの方法があります。
なかでも一番簡単なのは、ワープロで作った文章を画面上で選択してコピーすることでしょう。コピーした文章をHTMLエディタの画面に貼り付けてやれば、できあがりです。○見やすく直そう
コピーした文章は、そのままではちょっとワープロで作ったときとようすがちがってしまいます。飾り文字のなかには、ふつうの文字にになってしまうものもあります。
その代わり、HTMLは色や映像を使うのは簡単です。使えない飾り文字の分は、色や映像を使ってカバーしましょう。
また、改行のときの仕組みが少しちがうので、行間が2通りあります。これも見やすいように直しましょう。
タブやインデントを使って書いた入り組んだところは、「表(テーブル)」や「箇条書き」を使います。次は、その辺を見てみましょう。●ワープロと共同で楽ちん作業
1 ワープロで作った文章を、選択して、メニューからコピーを選ぶ。
2 HTMLエディタに移ってきて、貼り付けてやります。
ワープロとHTMLエディタの仕組みのちがいから、ワープロで作った文章が「そのまま」コピーされるわけではありません。あとで、HTMLエディタの方で直してやらないと、見やすいものにはなりません。
HTMLエディタになれてきたら、最初からHTMLエディタで文章を書くのもいいでしょう。
●移したデータはお化粧直し
ワープロから移してきたデータは、スタイルなどがなくなっている。このままでは、見づらいのでHTMLエディタで直してやることになる。
これが、HTMLをあつかえるワープロの場合は、ワープロの文書をHTML形式で保存してやり、それをHTMLエディタで開いてやることでかなり改善できる。
094-095表や「書式」をうまく使おう
○「テーブル」で整理しよう
ワープロでせっかく指定した飾り文字やタブ、インデントなどが、HTMLにコピーするとなくなってしまいましたね。
HTMLエディタには、「書式」や「テーブル」という機能が用意されていますので、タブやインデントの代わりにはこれを使って整理してみましょう。
「テーブル」というのは表のことですが、表計算ソフトなどと違って、HTMLエディタでは表で計算をさせたりそこからグラフを作ったりということはできません。文字をそろえてならべたり、表のワクの中や、ワクの線に色をつけたりすることができます。
上の例のように、表の中にまた表を作ることもできるので、かなり複雑なものも作れます。○「書式」をうまく使い分けよう
「書式」というのは、HTMLの約束で決められているスタイルのことです。どんなブラウザで見ても同じように表示されます。
メニューから「書式」を選ぶことで、いろいろな大きさの文字で文章が作れます。先頭に番号が自動的につく「かじょう書き」なども作ることができます。
表の中の文章にも、この書式を使うことができますので、見やすいホームページを作るには、たいへん便利です。
「書式」もいくらでもやり直しができますから、いろいろと試してみるといいでしょう。●「テーブル」を使ってスタイルアップ!
HTMLエディタでは、ワープロのようにタブやインデントを使うことができません。そこで、「テーブル(表)」と呼ばれる機能を使って、行の頭などをそろえます。
1ワープロからコピーした文章
2「テーブル」機能で整理
3文字や背景、ワクを調整
4できあがり!
左のできあがりのように、表の枠ひとつひとつに色をつけることもできますから、飾り文字などの使えない分はこれで表現力アップをねらいましょう。
●HTMLエディタの「書式」いろいろ
HTMLエディタにはいろいろな「書式」が用意されていて、メニューから選んで使えるようになっています。選んだ「書式」によって、文字の大きさ、改行の幅や行の最初や最後のところの処理がちがってきます。
96-97イラストや写真でホームページをパワーアップだ
○画像データを準備しよう
文字だけではさびしいので、イラストや写真も入れてみましょう。HTMLエディタなら、文章をコピーしたのと同じ方法で画像を貼り込むことができます。
前にも書きましたが、HTMLエディタにはイラストを作ったりする機能はありません。ですから、イラストや写真をホームページに載せるためには、あらかじめ載せるための画像データを用意しておかなければなりません。
HTMLエディタや統合ソフトなどには、よく使われそうなイラストが用意されていることがあります。こうしたイラストは自由に使っていいものなので、これを利用するのも簡単でいいですね。○ふたつのテクニック
ホームページに画像を入れるときに、大きく分けると2つの方法があります。
ひとつは文字などと同じように、場所を決めて、そこに画像を入れる方法です。さし絵のような使い方といっていいでしょう。
もうひとつは、ホームページ全体に画像を入れる方法です。文字などは、画像の手前に表示されることになります。
全体に表示するには、さらに2つのやり方があります。小さな絵を、タイルをしくように全体にちりばめる方法と、大きな絵をひとつだけ表示させる方法です。
ただ、大きな絵はデータも大きくなるので注意が必要です。●画像を入れるぞ
文字だけではホームページがさびしい。自分で作ったマークなどもホームページに入れよう。
ふたつのやり方があるが、どちらも簡単だ。
(作例:「イレギュラーズ」のページ)
・コピーを使う
1 画像ソフトで画像の全体を選択してコピーする。
2 HTMLエディタに移り、画像を入れたいところにカーソルを持っていって貼り込む。
・ファイルを「挿入」する
1 HTMLエディタで画像を入れたいところにカーソルを持っていって、メニューから「挿入」を選択する。
2 ウィンドウを操作して画像の入っているフォルダを表示させる。
3 入れたい画像を選択してダブルクリックするか、「実行」ボタンをクリックする。
出来上がり! マークが入るとかっこよくなるでしょう?
●同じイラストを何度も使うのもかっこいい
せっかく作ったマークだから、縮小してあちこちに使おう
(作例:戦績、自己紹介、なかまたち)
−−−小カコミ−−−−−−−−
ホームページに使われる画像ファイルの形式は、ジフ(GIF)と呼ばれる形式かジェイペグ(JPG)と呼ばれる形式です。
−−−−−−−−−−−−−−−
●全体に画像を使う
ホームページによっては、全体に画像を使っているものがあります。どちらも、見た目はいいのですが、うまくやらないと文字が読みにくくなりますので、何度も試してみる必要があります。
小さな画像を
(画像のサンプル「雲」)
全体にしきつめる
(できあがりのサンプル)
データが小さくてすむので、よく使われる方法。
大きな画像を
(画像のサンプル)
全体にしきつめる
(できあがりのサンプル)
データが大きくなるので、表示に時間がかかる。
98-99ここぞというときはアニメと音声を使おう
○目立たせたいところにアニメを
ホームページに入っているイラストが動いたら、見に来た人は、思わずそのイラストに目が行くことでしょう。
ホームページにアニメを入れるのは、主にそんな目的で、見る人の目を引きつけたいところに入れられます。
いちばんよく使われるのがGIFアニメです(→P42)。ホームページに新しく加えた部分や、書き換えた場所をはじめとして、「ぜひみんなに見てほしい」ところに目印として入れるのです。
「ここ!」と書いた、赤い小さなバーがくるくる回っていたら、それを見のがす人なんて、どこにもいないと思いませんか?○BGMはいかが?
ホームページにたどり着いたら音楽が出迎える、とか、チームの仲間たちの写真をクリックしたら、それぞれの人たちが、話しかけてくる、なんて楽しいと思いませんか?
同じように、ビデオ映像を入れることもできます。試合でゴールを決めた瞬間、ほかの人にも見て欲しいですよね。
ホームページには、「パソコンで使えるデータ」なら、ほとんどなんでものせることができます。
でも、ホームページを見に来た人が、どんなハードを使っているかはわかりません。大きなデータはきらわれるもとですから、使いすぎはダメですよ。●GIFアニメの使い方
ふつうのイラストと同じように、ホームページに入れることができます。たくさん使いすぎないことがコツです。
(作例:「イレギュラーズ」のフロントページに)
42ページで紹介した、ぽんぽん跳ねるボールのアニメを入れてみよう。●動かせるのは絵だけじゃない!
字を使ったGIFアニメも効果的だ。
「NEW!」と書いたバーが回転する。
タイトルの文字が踊る。●音やビデオのあるホームページ
三角をクリックすると音が再生される
マークをクリックすると、ビデオに画面が切り替わる------カコミ-----------
音やビデオはクリックで呼び出せ
音声デやビデオ映像を入れるときは見にきた人が、それを聞く(見る)かどうか選べるようにしておきましょう。音声や動画のデータは、ほかのデータに比べてとても大きいいのです。見に来た人の使っているハードによっては、とても大変なことをさせてしまうことになるからです。
------------------------
100-101複合ワザで差をつけよう!
ホームページの一番上の部分はいちばん最初に目に入る部分です。ですからそこにタイトルを入れて、何のページなのかを見る人にわかりやすくするのがふつうです。いっしょにイラストや写真を入れるのも、タイトルを目立たせるためによく使う方法です。
ただタイトルを大きい文字にしたり、文字に色をつけたりするだけではなく、もっと工夫をしてみたくありませんか? ここまでに紹介したいろいろなソフトの使い方を組み合わせれば、実はもっとこったこともできるのです。
ここでは、そんな複合ワザの中から、簡単にできるものをいくつか紹介しましょう。
まず、画像ソフトで、文字を絵にしてしまう方法があります。
マークを作ったときに、イラストの中に文字を入れましたね。同じやり方で、タイトルの文字だけのものを作るのです。それを画像を入れるやり方で、タイトルのところに入れるわけです。
また、前のページのGIFアニメで字が動くものがありましたね。これでタイトルを作るという方法もあります。ぴょこぴょこ踊る文字がタイトルだったら、きっと始めて見た人もすぐに覚えてくれることでしょう。
タイトル以外でも、文字を絵にする方法は使えます。96ページで紹介した「雲の絵」を全体にしきつめるやり方がありましたね。文字を絵にしてしまえば、同じやり方で、文字を全体にしきつめることだってできます。ページの全体にチームの名前がちりばめられていたら、見る人の印象にも強く残ることでしょう。
94ページで紹介した「テーブル」もいろいろな使い方ができます。タイトルの文字の後ろに色をしきつめる方法。濃い色をしいて文字を白くするだけでも、かなり目立ちます。データが大きくならないので好まれる方法のひとつです。
同じようにテーブルを使って、色をしきつめる代わりに、絵や写真をしきつめることもできます。
この方法は、画像の場所をうまく調整するためにも使われます。ふつうに画像を入れるだけでは、画像の入る場所をあまり細かく調整できませんが、テーブルを使うことで、それが調整できるようになるのです。
図版:作例いくつか
102-103「あのファイルはどこ?」 ファイルを迷子にしてはダメ
○迷子のファイルは表示できない
画像やアニメなど、文字以外のいろいろなものをホームページに入れると、使っているファイルの数も増えてきます。ホームページを見に来た人に、文字以外のものもきちんと見せるためには、決まったところにそれらのファイルを保存しておく必要があります。
というのは、ホームページを作っているHTMLは、実は画像やアニメなどを丸ごと抱え込んでいるわけではないからです。
HTMLは「××にある○○というファイルをここに表示する」という指示をブラウザにしているだけなのです。
ですから「ここにあるよ」といったところに目的のファイルがないと、ホームページはそこにあるはずのものを表示できなくなってしまいます。○「ファイル収集」を活用しよう
うまく表示がされなくなったら、もう一度、ホームページに画像のある場所を正しく指定し直さなければなりません。これは、数が多いと大変な作業です。
そんなことにならないように、HTMLエディタには「ファイル収集」という機能があります。ホームページでは画像がとくに多く使われるので、使っている画像ファイルを自分が決めたフォルダにコピーして集めてくれるのです。
次に説明する「リンク」とも大切な関係がありますので、ちゃんと覚えておいてくださいね。●ファイルの置き場にルールを作ろう
ホームページを作っていると、とてもたくさんのファイルを使うようになります。ファイルの種類や使いみちごとにフォルダを作ってやるようにしましょう。
(図版:ウィンドウを開いたところ。ホームページの目次に合わせたフォルダやファイルが入っている)
画像ファイルはすべてここに入っている
●ファイルの整理はパソコンの基本
ファイルの置き場を決めていないと、使おうと思うたびに探し出さなければなりません。フォルダでのファイル管理、ホームページづくりだけではなく、パソコンを使いこなす基本のひとつです。いつでも心がけていたいことです。
新しいフォルダを作るのは簡単です。作ったフォルダには、わかりやすい名前をつけてやりましょう。
・新規フォルダを作る
・名前を変える
・ファイルをフォルダに移動する
----小カコミ--------
フォルダは先に作ろう
ふつうのときは、ファイルを整理するときにフォルダを作ればだいじょうぶです。でも、ホームページづくりのときには大変な手直しが必要になることがあります。先に、内容ごとに入れるフォルダを作ってからホームページを作り始めるとよいでしょう。
--------------------
104-105リンクがなければ始まらない
○リンクで目次を作ろう
ホームページには「リンク」というしかけがあることを何度か説明しましたね。あっちからこっちへとジャンプさせるしかけです。
自分のホームページを作るときも、これが必要です。
ホームページにいろいろな話題をのせようとするとき、ひとつのファイルにすべてを書き込むのはよくありません。ファイルが大きくなりすぎるからです。
ふつうは、内容ごとに、別々のファイルを作り、それぞれフォルダを変えて保存しておきます。そして、最初に見てもらえるあたりにホームページの「目次」を作り、そこからそれぞれのファイルへとリンクさせるのです。○リンクで広がる仲間の輪
リンクをしかけることを、ふつう「リンクを張る」「リンクさせる」といいます。自分のホームページの中だけでなく、ほかの人のページへリンクを張ることもできます。でも、そのホームページを作っている人にメールでごあいさつを送ってからにしましょう。それがマナーです。
ひょっとすると、「では、わたしのページからもあなたのページへリンクを張りましょう」ということになるかもしれません。
多くの人が見ているページからリンクを張ってもらえれば、あなたのページも、より多くの人に見てもらえるチャンスができるわけですね。●リンクの設定
1 リンクを設定したい文字を選択する。
2 エディタのウィンドウに、目的のファイル名やURLを入力する。
3 リンクする先のファイルが開いてあるときは、ファイル名がメニューから選べるようになっているエディタも多い。
4 リンクを設定してある文字は、色が変わるので一目でわかる。
(設定画面)
●色を変えることもできる
リンクを設定した文字は色が変わるのだけど、その色を好きな色に変えることもできる。設定メニューから色を呼び出すだけだ。
(設定画面)
●ホームページの中には、こうしたリンクを集めた「リンク集」もあります。中でもテーマ別のリンク集は、人気の高いものも少なくありません。
(作例:)
●リンクに使えるのは、文字だけではなおい。イラストや写真のような画像からもリンクさせることができる。画像をクリックすると、目的のページへジャンプするというわけだ。
(作例:画像の周りが色の太ケイになっている)
106-107アンカーを使って細かくジャンプ
○リンクの特別版がアンカー
前に紹介したリンクはファイルからファイルへジャンプさせるしかけです。アンカーは、目的のファイルの中の、ある行までジャンプさせる、リンクの特別版です。
リンクを使うと、ジャンプしたときにたどりつくのはファイルの先頭になります。ファイルの途中にたどりつかせることはできません。そこで、ファイルの途中に特別な印ををつけて、それを目標にしてジャンプできるようにしたのが、アンカーという機能です。
アンカーというのは、もともと船を港などに泊めるときに使う「いかり」のことです。ファイルのなかに「いかり」を埋め込むのがアンカー機能というわけです。○こんなときにアンカーを使おう
前にホームページに目次を作りましたが、たとえば、ファイルの中が細かい項目に分かれているときなどは、目次にもその項目をのせたくなりますね。
項目ごとにファイルを分ければ、リンクでジャンプさせればいいですね。
でも、それぞれの項目の分量が少ないときは、ファイルを分けるほどではありません。項目の数が多いときは、ファイルを分けると管理するのも大変になります。
そんなときに役に立つのがアンカーです。細かい項目をひとつのファイルに入れておいても、目次からその項目へジャンプさせることができます。●リンクとアンカー
リンクとアンカーの違いを見てみよう。
リンクはファイルからファイルへのジャンプ。ジャンプした後は、目的のファイルの先頭へたどりつく。
アンカーはファイルの中の指定した場所へジャンプする。同じページの中の別の場所へも、別のファイルの中へもジャンプできる。
●小さい項目が多いときはアンカーを使おう
ひとつのファイルの中に、いろいろな項目がつまっているようなページでアンカーは力をはっきする。
作例:各項目の先頭に埋め込まれたアンカー。[目次]から[項目A、B、C]へジャンプする。各項目からページの先頭へジャンプする。
108-109小道具使って、見やすくしよう
○区切り線を工夫しよう
ひとつのファイルの中に、いろいろな内容が入ってくることがあります。ホームページのいちばん最初のページにも、あいさつがあって目次があって、自己紹介があって……という具合になっているかもしれませんね。
そんなときは、あいさつと目次の間や、目次と自己紹介の間に「区切り線」を使うと見やすくなります。
区切り線は、HTMLエディタならボタンひとつで引くことができます。でも、これはそっけないただの直線です。
こんなところにも画像を使うと、ヒモや棒切れ、楽しい区切り線が引けます。○三角アイコンでジャンプ
リンクやアンカーは、文字からジャンプさせることができるだけではありません。画像からジャンプさせることもできます。
目次のようなときには、ことばが書いてなければ見る人にわかりませんから、文字でジャンプさせるのがちょうどいいでしょう。
でも、ファイルが大きくなって、ひとつのファイルではひとつの話が終わらなくなるときがあります。そんなときは、もっと簡単に「次へ進む」「前へ戻る」というようにしたいものです。
そんなときによく使われるのが三角形のアイコンです。文字だけのときよりも、ぐっとわかりやすくなります。●「区切り線」のいろいろ
HTMLエディタには、いろいろな区切り線が用意されています。使いすぎるとうるさいですからほどほどにしましょう。
ふつうの区切り線
ひも
テープと糸
●三角アイコンの仲間たち
移動を示す印に使われる代表的なアイコンです。文字と組み合わせて使うといちばんわかりやすいでしょう。
三角、指
(上下左右=このページの最初へ、次へ、前へ、目次へ)
項目の頭に丸印
------カコミ------------
ナビゲーションツール
「区切り線」や「三角形アイコン」、ボタンなど、ホームページをより見やすくするために使われる小さな画像を、「ナビゲーションツール」といいます。操作しやすくするための小道具、という意味です。WWWやパソコン通信、雑誌からも手に入れることができます。
------------------------
------カコミ------------
じょうずな使い方
ナビゲーションツールや画像は、どうしてもホームページのデータを大きくしてしまいます。データが大きなホームページは嫌われますので、とくにナビゲーションツールは同じものを全体に使うようにしましょう。
-------------------------
110-111フレーム機能で高等技術に挑戦だ
○ページを分ける「フレーム」
フレームというのはワクのことです。ワクを使ってページを二つにも三つにも分けて見せるのが、フレーム機能の基本です。
フレームを使うと、それぞれのワクの中に別々のファイルを見せるように指定することができます。一度にいくつものファイルを見せることができるようになるわけです。○スクロールしてもだいじょうぶ
ホームページはブラウザで見ます。ブラウザのウィンドウに表示しきれない部分は、画面を上下にスクロールして表示します。すると前に見えていたものが見えなくなってしまいます。
画面にいつも見えているようにしたいものがあるときなどは、項目の途中などにも、それをマメにはさむしかありません。
フレームはこの問題を解決してくれます。
例えば、目次は、いつも画面に見えている方がホームページを見やすくしてくれます。端っこにフレームを作って、そこに目次を表示しましょう。これでいつでも目次が使えます。
ホームページのタイトルを、いつもすみっこに出しておけたらいいと思いませんか? では上の方にもフレームを作ってタイトルを表示しましょう。
でも、ブラウザのウィンドウにも限界はあります。フレームの作りすぎも禁物ですね。●フレームはこんなふうに使われている
(以下の三要素を入れたページを例に出して引出線を入れる)
目次
左のフレームにある目次をクリックすると、右のフレームに表示されるページが変わる。
タイトル
いつでもタイトルを表示しておきたいならフレームを使えばいい。スクロールしても消えることがない。
ナビゲーションツール
ひとつの話題がずっとつながったファイルになっているとき、ナビゲーションツールを決まった場所に表示しておくと便利だ。
●フレームを作ろう
フレームを使うためには、フレーム表示用にファイルをひとつ使うことになる。その中にほかのファイルを表示するように設定するわけだ。
1 HTMLエディタのファイルメニューからフレーム用のファイルを作る部分を選択。
2 ボタンを押して必要な数のフレームを作り、それぞれのフレームに名前をつける。
3 それぞれのフレームに表示するファイル名を指定する。
4 試しにブラウザで表示してみる。OK!
5 リンクやアンカーの指定のところに、リンク先を表示するフレームを示す「ターゲット」を加える。
6 もう一度ブラウザで実験。ちゃんとリンク先が表示されるか試してみよう。
-------カコミ----------
フレームは組み合わせができる
フレームは縦分割も横分割もできるし、フレームの中にまたフレームを作ることもできる。でも、ごちゃごちゃにならないように気をつけよう。
-----------------------
[以下、できれば横一列に囲んでまとめるとかして下さい]
●ちょっと小ワザいろいろ
フレームの線はちょっと目立つ。これを設定で消すことができる。ちょっとスマートでしょ?
フレームの背景の色はけっこう大切。色をそろえておくと、まるでひとつながりのページに見えるし、まるで違う色にしておくと、目立たせることもできる。
フレームの中にファイルが表示しきれないことがある。ふつうならスクロールバーが表示されるが、それを「表示しない」に設定しておくと、となりとくっついた表示ができる。
フレームごとに表示されるファイルは別々のもの。だから、リンクの色をあっちとこっちで変える、なんて離れ業もできちゃう。
フレームにスクロールバーが出ていても、表示がはんぱでなければ気がつきにくいもの。それを利用して、ちょっと気がつきにくい隠しメニューなんていかが?
112-113気になる情報をCGIでゲットだ!
○CGIはリモコンだ!?
さあ、ホームページも完成に近づいてきましたね。どれぐらいの人が見に来てくれるか、気になるところですね。
また、ホームページを見た人は、どんな感想を持ったでしょうか。知りたいですね。見に来てくれた人が、何かを書き残していってくれたらうれしいですよね。
それができるのがCGIという技術です。
これは、よそにあるコンピュータのソフトをリモートコントロールするようなややこしい技術です。多くのプロバイダが、この技術を使って、ホームページを作っている人たちのために、いろいろなサービスを提供しているのです。○プロバイダに注目
プロバイダが提供しているサービスを利用すれば、こんなことができます。
・アクセスカウンター
そのページをだれかが見るたびに数字がひとつずつ増えていくカウンターです。
・掲示板
そのページを見に来た人が、感想などを書き残していけるようにしたものです。「ゲストブック」と呼んでいる場合もありますが、ほとんど同じものです。
CGIは、プロバイダが許可しているものしか使えません。独自のCGIを使えるHTMLエディタがありますが、それも使えません。気をつけて下さい。●アクセスカウンター
誰かがそのページを見るたびに数字がひとつ増えるカウンター。これで見に来た人の数がわかる。
いろいろな形のものが用意されていることが多いので、好みのものを選んで使おう。
-----------------------------
同じ人が何回も来ても、自分自身が見てもアクセスカウンターは動いてしまう。だから、この数字は目安だと思っておこう。
-----------------------------
●掲示板
プロバイダによって、見た目や呼び名はちがうけれど、そのページを見に来た人が何かを書き残していけるようにしてくれる仕組みだ。
こんな風に、アンケート形式にできるものもある。
「メールで感想を下さい」と書いておいても、メールを出すのは手間に感じてしまう人も多い。アンケート式やボタンを押すだけのものなどは、気軽に応えてもらえることが多い。
---------カコミ-----------
CGIの使い方はプロバイダのホームページで詳しく説明されていることがほとんどなので、まずはそれをちゃんと読もう。見本として表示されているものをコピーして少し書き直すだけで使えることも多い。たいていはプロバイダのホームページなどで質問もできるようになっている。また、同じプロバイダを利用していて、うまく使えているホームページを見つけたら、思い切って聞いてみると教えてもらえるかもしれない。
--------------------------
注意!
プロバイダが許可していないCGIは絶対にダメ!
許可されていないCGIは、プロバイダのコンピュータを壊してしまう恐れがあります。その場合、大金を請求されるかもしれません。
114-115完成したら試運転! ブラウザでチェックしよう
○なぜブラウザで見るのか
「テーブル」や「フレーム」のところで作り方を説明したときに、何度かブラウザに表示してみる、とお話ししました。実は、これは大事なことです。
HTMLエディタは、ブラウザで見るのにかなり近い状態を目で確認しながらホームページをつくることができるソフトです。でも、ブラウザそのものではないのですから、実際にブラウザで見るのとはちがってしまいます。
ホームページはいろいろな人に見てもらうために作るものです。ですから、人に見せる前に自分でそのできぐあいを見ておくのは、守らなければならないマナーだと言ってもいいでしょう。○リンクもチェックだ
ブラウザで確認するのは、見た目だけではありません。リンクやアンカーがきちんと働いているかも試してみましょう。リンクがきちんとしていないと、ブラウザは「not found(見つかりません)」という返事を返してきます。見に来た人がクリックしたときに、こんなメッセージが出てきたらがっかりしてしまうではありませんか。
ブラウザで確認するのは難しいことではありません。HTMLエディタの中には、ブラウザにファイルを送り出してくれるものもあります。ブラウザから「ファイルを開く」で見るか、ファイルをブラウザにドロップしても見ることができます。[以下、適宜、挿し絵風に]
●ブラウザとコンビでチェック
HTMLエディタには「ブラウザでファイルをチェックする」という機能があるものもあります。これを使えば簡単にチェックができます。
そんな便利な機能はないよ、というときはファイルをブラウザのアイコンにドロップするか、メニューの「ファイルを開く」で見てみましょう。
●「再読み込み」でくり返しチェック
うまくないところを見つけたら手直しをするわけですが、そのときにいちいちブラウザを終了させてはいけません。ファイルを保存し直したら、ブラウザの「再読み込み」(またはリロード)ボタンを押しましょう。保存し直したばかりのファイルが表示されます。
●リンクもチェックだ
ブラウザに表示されたら、ホームページを見に来た人になったつもりであちこち操作してみましょう。リンクがつながっていなかったり、画像が表示されなかったり、という間違いを発見するためです。
●エディタでは見えないものもある!
HTMLエディタによってはフレームの中までは表示されません。また、背景に貼り込んだ画像や、入り組んだテーブルなども表示できないことがあります。そんなときはブラウザでなければ確認できないわけです。
116-117これをしなけりゃ見てもらえない
サーバーにファイルをアップロード○完成したら……次は?
さあ、いよいよできあがったホームページを人に見てもらいましょう。そのためには、WWWサーバーと呼ばれるコンピュータに、ホームページに使っているすべてのファイルを送り込まなければなりません。
サーバーにファイルを送る作業が「アップロード」です。
あなたがすでにプロバイダを利用している場合は、そのプロバイダがアップロードするときの手順を詳しく決めています。プロバイダの案内書などを読み返してみて下さい。見つからないときは、プロバイダのホームページに行けば、やはり案内があるはずですから、どちらかを必ず読みましょう。○アップロード機能を使え!
アップロードするときは、プロバイダが指定する専用のURL(「ftp://」で始まります)にファイルを送ります。
多くのHTMLエディタには、作ったファイルをアップロードする機能がありますので、まず、それを試してみましょう。設定は、指定されたアップロード用のURLや自分のアカウント、パスワードを入力するぐらいのことで簡単にできるはずです。
アップロードしたホームページは、遅くとも数十分程度でブラウザで見られるようになります。
アップロードした後、確認のために自分ですみからすみまで見てみるのを忘れないでくださいね。●ホームページの「置き場所」
多くのプロバイダは、会員が自分のホームページを設置できるサービスを提供していますからこれを利用しましょう。ただ、このサービスの料金はプロバイダによって無料から月額数千円までさまざまです。
(挿し絵:電話回線ごしに、パソコンからサーバーへファイル[HTMLファイルや画像ファイルなど]をアップロードしているところ)
プロバイダによって、使用できるスペースはいろいろです。だいたい5〜15MB程度がふつうです。よほどたくさんの画像や音声ファイルを使わなければ、10MB以内で十分でしょう。
-----カコミ----------
ほかのソフトでアップロード
アップロードできるソフトを持っていない場合や、プロバイダがソフトを指定している場合には、指定された「FTPクライアントソフト」を入手する必要があります。これは、ファイルのやりとり専用のソフトで、WWWやパソコン通信、ざっしで手に入ります。使い方は、たいていプロバイダの案内に具体的にのっていますので安心して使えます。
---------------------
●アップロードはフォルダごと!
アップロードのときには、自分のパソコンの中でフォルダに整理していたとおりにファイルを送る必要があります。これを間違えるとホームページがきちんと表示されません。
HTMLエディタでアップロードするときは、自動的に配置されますが、ほかのソフトで送るときは、送るファイルやフォルダを自分で指定する必要があります。指定し忘れのないように、フォルダごとアップロードするようにしましょう。
(図:サーバーのユーザースペースの中身とパソコンでのフォルダの中身が同じになっていることを絵で見せる)
118-119検索ページで人気者をめざせ!
○みんなにお知らせ
ホームページができても、誰もそのことを知らないのでは見てもらえるわけはありませんね。身近な人には電子メールでお知らせを送ってもいいでしょう。
ほとんどのプロバイダは、会員のホームページの一覧や、新しくできたり変更が加えられたホームページの一覧が見られるようになっています。でも、とても多くのホームページがあるので、その中から自分のページを見つけてもらうのは大変です。
もっと多くの人に知ってもらう方法があります。メーリングリストや検索ページを利用するのです○検索ページ、2つの方式
検索ページには、2つの方式があります。登録されているホームページを表示する方式のものと、検索ロボットと呼ばれる方式のものです。両方の方式をあわせて使っているタイプもあります。
登録式のページには、自分でブラウザで書き込みに行かなければなりません。一度にたくさんの検索ページに登録するためのホームページがありますので、そちらのお世話になることにしましょう。
ロボット式は勝手に世界中のホームページを回っているものと、登録が必要なものがあります。登録が必要なものの場合は、少しだけHTMLをいじる必要があります。この方法は122ページで紹介しましょう。●検索ページに登録しよう
日本国内だけでも検索ページは何十もある。だから、無料で複数の検索ページに一度に登録できるページをじょうずに使おう。
さぶみっと!-JAPAN- http://www.dragon.co.jp/submit-it/
ジャパンサーチエンジンが運営しているサービス。最初に入力する項目は少なめだけれど、登録するエンジンを選んでから追加で入力しなければならない部分が多い。
(さぶみっと登録画面=ズルズル長いんです、分割して送るから何とか入れて(泣))
一発太郎 http://www3.wink.co.jp/ippatsu.htm
個人が作っているところだが、機能強化がすばやい! 最初に入力する項目は多いけれども、追加入力が少なくていいのも魅力。
(初期画面)
-----カコミ------------
ちょっと待て!
検索ページに登録するのは、自分のホームページがかなりできあがってからの方がいいよ! ハンパなうちに登録すると、せっかく見に来た人も「なあんだ」と思って、もう見に来てくれなくなるからね!
-----------------------
どっかに、挿し絵も入れて欲しいです。アイディアはないんだけど、お願いします。
120-121見てくれる人が増えない、どうしよう?
○あわてちゃダメよ
「せっかくホームページを作ったのに、見に来てくれる人が増えない」という声をよく聞きます。
確かに、人気のあるホームページは、毎日たくさんの人が見に来ています。どうすれば、そんなふうになれるでしょう?
でも、わたしたちが作って楽しむホームページは、たとえば、友だちの間で回し読みをするざっし(同人誌)のようなものです。急に欲張ってはいけません。
ホームページを見た友だちが、おもしろいと思ったら、また誰かに「こんなのがあったよ」と教えてくれるかもしれません。そんなふうに、新しい友だちが増えて行くのをゆっくりと待ちましょう。○めざせ、生き生きページ
たくさんの人に好まれているホームページは、「役に立つ」「内容がおもしろい」といわれるものです。でも、そんなことは簡単にはできません。わたしたちがめざすのは、まずひとつです。
「だんだんと変わっていくこと」
一度見て「おもしろい」と思っても、何度見ても何も変わっていなかったら、もう見に行くのはやめてしまうと思いませんか?
少しずつでも、内容を増やしたり変えたりしてみましょう。生き生きとして来て、また見てみようと思えるようになりますよ。
むりのないやり方で、いいのです。ホームページに日記をつけるのも、やっている人が多いですよ。●いつまでも変わらないホームページは魅力がない
ホームページの中身を、ときどき変えてあげましょう。もう夏になろうとしているときに、冬の話ばかりのホームページでは見に来た人もとまどってしまいます。
(イラスト:夏なのに、パソコンの中身は冬でびっくりしているTシャツ姿の子ども)
●どうやるの?
ホームページの中身を変えることを「更新」といいます。新しくしたファイルを、アップロードし直すだけです。同じファイル名にしておけば、自動的に新しいファイルに差しかわります。
(イラスト:サーバーにファイルを上書きする様子)
HTMLエディタには、変更を加えたファイルだけをアップロードしてくれる機能を持っているものがあります。これを利用するのが簡単ですね。
----カコミ------
アップロードする先のフォルダを間違えたり、リンクしていたファイル名を変えてしまうと、表示されなくなってしまいますから、更新のときのアップロードはあわてずに。最初のときと同じように、確認も忘れないで下さいね。
-----------------
122-123HTML早おぼえテクニック
○HTMLに挑戦だ
HTMLエディタは便利なのですが、少しよそのホームページを見ていくと、自分のエディタでは作れないようなページにたくさん出会います。もっと高いエディタが必要なのでしょうか?
そうではありません。HTMLをおぼえればいいのです。
HTMLエディタがあるのですから、これで作れるところまでは作っておいて、足りないところだけ自分でHTMLの暗号みたいなのを書いてやればいいのです。
この「暗号」、本当はタグといいます。HTMLは、実は決められたタグに数値や単語で指定してやるだけで使える、簡単で便利なものだったのです。○タグを見つけるには
それでも、HTMLをゼロから勉強するのは大変です。HTMLエディタとブラウザのお世話になることにしましょう。
たった今見て来たホームページのナゾを解くには、ブラウザが保存したデータを使います。ブラウザは表示を早くするために、一度見たデータを保存してあるのです。
そのデータをHTMLエディタで開いて、目的のページに間違いないことを確かめたら、まねをしたい部分をマウスで選択します。そしてエディタの表示モードを「HTML」にすると。
あらふしぎ、目的の部分のHTMLタグが選択されて表示されると言うわけです。●目的のタグを見つけよう
1 気に入ったページをWWWで見つけたら、画面が表示されたところで回線を切ります。
2 「ファイル検索」*で、「cache」を探します。するとブラウザが保存したデータが見つかります。
3 見つけたデータを一番新しいものから順にダブルクリックしていくと、数個めのファイルまでの中に目的のページがあります。
4 見つけたら、そのファイルをHTMLエディタで開きます。
5 まねをしたい部分をマウスで選択します。
6 エディタの表示モードを、「HTML」にすると、目的の部分を選択した形でタグが表示されます。
7 念のため、目的の部分をコピーして別のファイルにとっておきます。テキストデータですから、ワープロでもかまいません。
8 同じことをしたい自分のホームページのファイルを開きます。
9 コピーしておいたタグを貼り込み、画像ファイルの名前や文字データなど、自分のものに変えたい部分を変更します。
10 できあがり! これでだいたいのテクニックは、まねをすることができます。
*=ファイル検索:ウィンドウズ95の場合は、タスクバーの「スタートメニュー」の中にあります。マックOSの場合はデスクトップの「ファイル」メニューの中にある「検索」を使います。
●HTMLの基本のタグ
HTMLで基本を作っているページにタグを書き入れるのは簡単です。基本はこれだけです。(HTMLのタグは本来すべて半角で使いますが、ここでは便宜上全角文字で表記しています)
1 <>の中に決められた単語を入れて、やりたいことの指示をする。
2 指示の始まりは<***>で、終わりは</***>で示す(*には指示を表す単語が入る)。
3 表示したい文字は<***>と</***>の間に入れる。
4 表示したい画像などのファイルは<>の中にファイル名を指示する。
具体的にタグを見ていきましょう。
(作例「はじめまして、山田です」とそのHTMLを引出線で結ぶ)
自分の作ったページや人の作ったページをエディタのHTMLモードで表示してみると、どんなタグを使っているのかがよくわかるよ。
124一歩進んだHTML
○またたく文字
文字が現れたり消えたりするタグです。
エディタの画面で点滅させたい文字を選択したらHTMLモードに切り替えます。目的の文字の前に、半角のアルファベットで<BLINK>と入れます。文字の後ろには</BLINK>と入れます。これだけです。○テーブルの背景に画像を入れる
テーブルのワクを選んで、HTML表示にすると<TD WIDTH=170 HEIGHT=93>のように表記された部分があります。これはワクの大きさを指定しているタグです。
ここでTDの後にちょっと書き加えて、<TD background=”画像のあるフォルダ名/画像ファイル名” WIDTH=170 HEIGHT=93>とします
表示されている数字の単位はピクセル数、WIDTHが横、HEIGHTが縦のことです。画像ソフトでその画像ファイルのピクセル数を見ることができますから、その数字より少し小さくしましょう。○<META>でロボットをつかまえる
Infoseek(インフォシーク)という有名な検索エンジン(http://www.infoseek.co.jp/)は、自分のURLを記入するだけでホームページが登録できます。検索ロボットが、自動でデータを収集しているからです。
こちらは、ファイルの最初に一工夫しておきます。
HTMLファイルの最初にある<HEAD>と</HEAD>というタグの間に<METANAME=”description” CONTENT=”○○”>、それから<METANAME=”description” CONTENT=”××”>と書き込みます。
○○のところには、自分のホームページの紹介文を書きます。全部で100字に納めて下さい。
××のところには、半角カンマで区切りながら、自分のホームページの話題を入れてください。例えば、「小学生,サッカー,パソコン,……」という具合です。こちらは500字以内です。
これで準備OK。ロボットがデータを持っていってくれます。いつでも修正自由なのが便利です。★文字量オーバーです。背景画像か、METAか……。METAの話は、検索ページのところで触れているのですが、限定された話なのでやめましょうか? あるいは、画像の話を前ページの作例に入れられるか……。あとで考えましょう。すいません。
以下
Part 3へ続きます。
|前へ|次へ|
|MaCroSoftのホームページ|asahi-netのホームページ|