超初心者のホームページ作成 by atom
| 検索 | 全表示 |  【解説ページ入力用】  | ヘルプ | 新規 |  no.14


 ■ 1.HP公開の為には何が必要? 

ホームページ(HP)を公開するためには、一般的に、次のようなものが必要です。

1.HP公開の為の領域を確保あるいは提供してくれるプロバイダもしくはサーバー
  そういうサービスを行っている業者と契約する


 私の知っているところでは、
  【無料サービス】
   infoseek、トクトク、geocitiesなど..
  【その他のプロバイダ】
   OCN、ODN、BIGLOBE、@niftyなど..

 それ以外にもたくさんの業者がホームページ領域を提供してくれます。
 検索エンジンなどで「無料、ホームページ、作成、提供、領域、確保、サービス」などの
 キーワードで検索すれば見つかるでしょう。

 無料業者のほとんどが宣伝広告の収入で運営を行っているため、各ページに宣伝用の
 広告表yen示が義務付けられているケースが一般的です。

2.HP作成用ソyenフト
 ご自分が勉強する気があるなら、メモ帳でもOK!
 できれば、「メモ帳」よりも「テキストエディタ」の方が便利です。
 「テキストエディタ」の入手方法は、ここの「CGIの扉」−「1.CGIって何?」で
 解説しています。


3.HP転送用ソyenフト(FTPソyenフト)
 市販のソyenフトならこのFTPソyenフトも内蔵されている場合もある
 フリーソyenフトでも充分です。
 フリーソyenフトは「FFFTP」が有名です。
 私は、ちょっとマイナーな「RootFTP」を使用しています。
 「FTPソyenフト」の入手方法は、ここの「CGIの扉」−「1.CGIって何?」で
 解説しています。

4.ブラウザ(IEやNN、NCなど)
 IEとはInternetExplorer、NNはNetscapeNavigator、
 NCはNetscapeCommunicatorです。

また、1.の業者が提供してくれる簡易HP作成サービスもあります。
この場合は、定型的なHPしかできないが、2.3.が必要ありませんし、
難しい操作や知識を必要としません。


【追補】
今まで、「ホームページの作成はメモ帳でもできます。」といい続けてきました。
が、初心者のトラブルの中に、あってはいけないところに全角空白が入っているため、テーブル(表yen)などの表yen示がうまくいかないというトラブルがあります。

半角空白はどこにあっても大丈夫ですが、全角空白は文字として認識されるため、妙なところに全角空白があるとトラブルが発生することがあります。
また、メモ帳では半角空白や全角空白の表yen示が見えないため、その原因の発見を困難にする場合があります。

そこで、初心者の方はメモ帳を使用せずテキストエディタを使用することを強くお勧めします。
テキストエディタの入手方法は、上記に記述の通り、ここのHPの「CGIの扉」−「1.CGIって何?」で解説しています。
no.1 [追記] [訂正] [削除]



 ■ 2.ページはなにを使って作成するの? 

◆無料でする場合
1.プロバイダによっては、簡単な設定をしていくだけでHPが作れてしまうサービスを行っている場合があります。
 私の知っているところでは、freewebやplalaなどがそうです。
2.Windowsのメモ帳などでHTMLを記述し作成する。
 できれば、「メモ帳」よりも「テキストエディタ」の方が便利です。
 「テキストエディタ」の入手方法は、ここのHPの「CGIの扉」−「1.CGIって何?」で
 解説しています。

3.HP作成支援などのフリーソyenフトを使用する。
4.IEが4.0までならWindowsにFrontpageExpressがついてくるのでそれで作成する。

◆有料の場合
1.市販ソyenフトを購入し作成する
 ホームページビルダーや、MicrosoftのFrontpage、ホタル、GOLIVEなどたくさん出てますが、個人的にお勧めなのはホームページビルダーです。


よく、「Wordでホームページを作成しています」という方もいますが、Wordで作成するのはやめましょう!!

《HTMLの扉》にも書きましたが、少なくともWord2000までは純粋なHTML言語に対応していないばかりか、個人情報までが漏れてしまう可能yen性があります。
さらに、高度なページ作りをしようとしたときに、対応できません。

【追補】
今まで、「ホームページの作成はメモ帳でもできます。」といい続けてきました。
が、初心者のトラブルの中に、あってはいけないところに全角空白が入っているため、テーブル(表yen)などの表yen示がうまくいかないというトラブルがあります。

半角空白はどこにあっても大丈夫ですが、全角空白は文字として認識されるため、妙なところに全角空白があるとトラブルが発生することがあります。
また、メモ帳では半角空白や全角空白の表yen示が見えないため、その原因の発見を困難にする場合があります。

そこで、初心者の方はメモ帳を使用せずテキストエディタを使用することを強くお勧めします。
テキストエディタの入手方法は、上記に記述の通り、ここのHPの「CGIの扉」−「1.CGIって何?」で解説しています。
no.2 [追記] [訂正] [削除]



 ■ 3.バナーや画像、素材はどうやって作るの? 

◆バナーと言うのはどうやって作るのですか?教えてください。

バナーは、通常の画像と同じ方法で作成します。
それを、ホームページに貼yenり付けて、ジャンプ先のリンクを張るだけです。


◆画像や素材を作成したいのですが?

通常は、画像専用ソyenフトで作成します。
フリーソyenフトなどにも結構yenいいものがありますので、一度試されて、満足しなかった場合、市販ソyenフトを購入されたらいいと思います。
私が知っているところでは、「Pixia」、「HyperPaint」などがあります。

保存するときは、通常、*.gif、*.jpg、*.pngで保存します。
イラストなどのベタ塗りが多いものは*.gif、写真などの色数が多いものは*.jpgで保存します。

小さな画像なら、Windowsの「ペイント」でもできますが、ファイルサイズが大きくなります。(ファイル名は、*.bmpになります。)


◆デジカメの写真などが高画質だと画面が重くなってしまうと聞いたのですが

はい、その通りです。
ホームページは、情報を提供するのが目的だから、高画質の写真を掲載しても重たくなり、ページ表yen示に時間が掛かってしまいます。
あまり好ましくありません。

どうしても、高画質の写真を掲載したいときは、画質を落としてファイルサイズを小さくしたものをまず表yen示させ、それをクリックすると高画質の写真が出てくるという方法を取ったほうが好感がもたれます。
このように、小さくした画像のことを「サムネイル」といいます。


◆デジカメでとる場合の画質はどの程度ですればよいのでしょうか?

ホームページ用という目的でしたら、640×480でも充分です。
また、画質は最高画質でなくてもいいですよ。
あとは、画像ソyenフトの加工で処理します。


◆いま、すでにある写真はどう処理すると良いのでしょうか?

これらの加工処理には、画像ソyenフト(フォトレタッチともいう)が必要になります。

画像ソyenフトで、拡大・縮小、トリミング(必要な部分だけを切り取ること)などを行った後、「jpg」形式で保存します。
そのとき、画質を80%ぐらいまで落とします。
画質を落としますとファイルサイズがグッと小さくなります。

通常に見せる画像は大きくても20〜30KBぐらいまでに押さえておいたほうがよいでしょうね。
また、サムネイルを使用して1ページにたくさん表yen示するのであれば、さらに小さくしたほうが喜ばれます。

フリーソyenフトでも結構yenいいのがありますので、まずはそちらを使ってみて、不満が出るようなら初めて市販品を買われたらいいと思います。
私が知っているフリーソyenフトには、「Pixsia」、「HyperPaint」などがあります。


◆頂いた絵をupしたいのですが、そのままだと重いと思うので部分だけ(例えば顔だけ)を表yen示する方法を教えてください。

その部分だけ表yen示するのではなく、その部分だけ切り取って、別画像として保存しないと軽くなりません。

この作業は画像ソyenフトで行います。
フリーソyenフトでもいいものが出ていますのでVECTORなどで取得されてはどうでしょうか?

私が知っているものに「Pixia」や「HyperPaint」などがあります。
no.3 [追記] [訂正] [削除]



 ■ 4.フレームページの簡単な作成方法を教えて! 

画面を左右に2分割するフレームページを作成する場合の手順を説明しておきます。

−−−
1.左側に表yen示するページを普通に作成します。
【menu.html】(一例)

<HTML> 
<HEAD> 
<TITLE>メニューページ</TITLE> 
</HEAD>
<BODY>
メニュー<BR>
<A href="page1.html" target="right">ページ1</A><BR>
</BODY>
</HTML>

−−−
2.右側に表yen示するページも普通に作成します。
【main.html】(一例)

<HTML> 
<HEAD> 
<TITLE>メインページ</TITLE> 
</HEAD>
<BODY>
ようこそいらっしゃいました。<BR>
ゆっくりしていってください。<BR>
</BODY>
</HTML>

−−−
3.ジャンプ後の右側ページも普通に作成します。
【page1.html】(一例)

<HTML> 
<HEAD> 
<TITLE>ページ1</TITLE> 
</HEAD>
<BODY>
まだ何もないですが、これからに期待してください。<BR>
</BODY>
</HTML>

−−−
4.フレームページを作成します。
【index.html】(一例)

<HTML> 
<HEAD> 
<TITLE>フレームページ</TITLE> 
</HEAD>
<FRAMESET COLS="240,*">
 <FRAME SRC="menu.html" name="left">
 <FRAME SRC="main.html" name="right">
 <NOFRAMES>
  <BODY>
  </BODY>
 </NOFRAMES>
</FRAMESET>
</HTML>
−−−
詳しい説明は、ここの「HTMLの扉」−「11.フレーム(画面分割)」を参照してください。
no.4 [追記] [訂正] [削除]



 ■ 5.メモ帳でホームページの作成 

ホームページをメモ帳で作成するのは、さほど難しくありません。
ただし、注意点がありますのでそれを説明します。

まず、メモ帳に記述するのはすべてHTML形式で記述します。
HTML形式とは、タグという特殊な文字で文字装飾を行っていく記述形式です。
(詳しくは、ここの「HTMLの扉」を参照してください。)

念のため、簡単なサンプルを記述しておきます。

<HTML>
<HEAD>
<TITLE>ここにページタイトルを記述する</TITLE>
</HEAD>
<BODY bgcolor="blue">
<FONT color="white">ここに本文を記述する</FONT>
</BODY>
</HTML>

上記と同じ内容を、キーボードで入力するか、コピー・貼yenり付けでメモ帳に入力します。

そして、これを名前をつけて保存します。

このときに注意が必要なのです。
そのまま保存するといけません。

まず、ファイル名入力の下に「ファイルの種類」がありまして、ここが通常、「テキスト文書」になっていると思います。

これをクリックして「すべてのファイル (*.*)」に変更します。
その後、ファイル名を入力します。

そして、入力するファイル名の最後に「.htm」か「.html」をつけてください。
この部分を拡張子といいます。
例えば、「page1.htm」などのように..

こうしてできたファイルをダブルクリックすれば、勝手にIE(インターネットエクスプローラ)が開いてそのページが表yen示されます。

上記のサンプルと同じ入力であれば、背景が青(blue)、文字が白(white)で表yen示されるはずです。

なお、メモ帳でも作成はできますがテキストエディタなどを使用したほうがより作業がやりやすくなります。
テキストエディタはフリーソyenフトでもいいものがありますので一度使用されてはどうでしょうか?

テキストエディタの入手方法は、「CGIの扉」−「1.CGIって何?」で解説しています。
no.5 [追記] [訂正] [削除]



 ■ 6.直リンク禁止ってなんですか? 

まず、直リンクの意味ですが、2種類あります。

1.相手の画像などを自分のページに表yen示させる場合に、自分のページに相手の画像のアドレスをそのまま記述すること。
2.相手のトップページを表yen示させないで掲示板やコンテンツに直接飛べるようなリンクを張ること。

を言います。

読み方は、「ちょくリンク」とか「じかリンク」とか言われます、また、省略して「直リン」とかとも言います。
直接、リンクを張ることや直(じか)にリンクを張ることからこう呼ばれます。


1.の場合は、その画像なりをダウンロードしご自分のページにアップして使用してください。と言う意味です。
これは、画像などは一般的にファイルサイズが大きいため、直リンクが増えるとそのページの表yen示が遅くなります。

また、プロバイダが違う場合、リンクを張った人のページの為にリンク先の人のサーバーが処理を担当するため他の人に迷惑が掛かります。
最悪は、リンク先の人のアカウント抹消となりかねないからです。

2.の場合は、訪問者数をカウントしているのが通常トップページだけと言うことが多く、直リンクを張られると本当の訪問者数がわからなくなるからです。

この場合は、トップページにリンクを張るようにすれば良いです。
no.6 [追記] [訂正] [削除]



 ■ 7.クリッカブルマップ(イメージマップ)って何ですか? 

########################################################
この説明は、予yen備知識ではないのですが、忘れるといけないので
あえてここに記述しています。
########################################################

簡単にいうと、画像の中にリンクを埋め込む方法です。

クリッカブルマップとかイメージマップと呼ばれます。
画像の一部分を範囲選択してリンクを貼yenり付ける方法です。
《HTMLの扉》では説明を省きました。

簡単に説明すると、

<img src="画像のファイル名" usemap="#マップの名前">
<map name="マップ名">
<area shape="形" coords="座標" href="リンク">
<area shape="形" coords="座標" href="リンク">
<area shape="形" coords="座標" href="リンク">
</map>

という具合で、形にはrect(四角形)、circle(円)、poly(多角形)を指定し、座標にはrectの場合は対角線の両座標、circleの場合は中心の座標と半径、polyの場合は複数の座標を指定します。

具体的な記述サンプルは、次のような感じになります。

<IMG src="image01.gif" border="0" usemap="#map01">
<MAP name="map01">
<AREA shape="rect" coords="10,5,30,25" href="page1.shtm">
<AREA shape="circle" coords="63,20,10" href="page2.shtm">
<AREA shape="default" nohref>
</MAP>

また、あえてマップを使用しなくても、表yen組みを使用して画像を並べていくという方法で実現するという手もあります。
no.7 [追記] [訂正] [削除]



 ■ 8.掲示板などのクッキー(cookie)って何ですか? 

簡単に言ってしまうと、入力情報が記憶できる仕組みです。

例えば、投稿者の名前、文字色、URL等をメッセージを投稿するたびに入力するのは不便です。
一度でも投稿したら、それを記憶しておいて、2回目以降は入力しないでも、自動セット(入力)されると「親切だな」と思いますよね。

コンピューター(パソyenコン)だからそれぐらいのことはできて当り前?(笑)
この仕組みを実現するのがクッキーです。

掲示板の投稿記事などは、皆が同じものを見るだけですから、サーバー側にファイルとして記憶して、それを閲覧者が来るたびに表yen示すればそれで済みます。

ところが、先ほどの投稿者の名前などは、投稿記事と同じようにサーバーに保存させただけではダメなのです。
なぜかというと、訪問者はいつも同じ人が投稿するわけではないので、その情報が常に変わるからなのです。

そこで、訪問された人のパソyenコンに情報を記憶できれば、訪問者それぞれの情報を独自に管理する事ができます。
つまり、サーバーに入力された内容の一部を、サーバー(リモート)側からクライアント(ローカル)側へ情報を送り、その人の個人情報として、訪問者のパソyenコンに記憶させるようにするのです。

これを実現できる様にしたのがクッキーです。
ただし、クライアント(ローカル)側の情報をすべて読めたのでは、セキュリティ上、危なくってその掲示板でカキコなんてできなくなりますから、クッキーはクッキーを使用したHPと同じファイルひとつだけしか読めないようになってます。
安心してください。

すなわち、サーバー側の情報はクッキーを通すと、クライアント側に記憶できるようになり、また、そのクライアント側の情報だけはクッキーを通して、サーバー側が取得できるようになるのです。

もし、あなたのパソyenコンがWindowsなら、クッキー情報は、
「C:\WINDOWS\Temporary Internet Files」
に保存されています。

このフォルダ内に自分が閲覧してきたものや、クッキー情報が保存されています。


クッキーが使用できるのは、身近なところではCGIとJavaScriptです。
最近では、サーバーサイドアプリケーション(サーバー側で動くプログラム)を構yen築するほとんどの言語がクッキーが使用できるようになっています。
no.8 [追記] [訂正] [削除]



 ■ 9.画像が表示されないんです。 

表yen示されるはずの画像が表yen示されない場合は、次のような原因が考えられます。
1.画像がサーバーにアップされていない。
2.アップした画像が壊れている。
3.画像のアドレスミス。

です。

その中でも、3.のアドレスミスは、正しく指定しているようでも、きちんと認識できない場合があります。

例えば、
1.ファイル名、フォルダ名に全角(漢字など)を使用している。
 「プロフィール.jpg」や「ページ1.jpg」など
2.許されない記号(?、&、/、#、%、\など)などを使用している。
 「prof/ile.jpg」、「page#1.jpg」
 そのかわり、「-、_、.、~」は使用できます。
3.半角の空白( )を使用している。
 「photo sea.jpg」、「baby 1.jpg」

などです。

これらは、ファイル名やフォルダ名には使用できませんし、誤認識する可能yen性があります。
また、同様の理由からページのファイル名としても使用できません。

漢字や記号、半角空白をファイル名に使用しないように普段から気を付けておきましょう。
no.9 [追記] [訂正] [削除]



 ■ 10.他のパソコンで画像が表示されません。 

ご自分のパソyenコンで表yen示される画像が他の人のパソyenコンで表yen示されない。」という症状のほとんどが、アドレスの指定ミスです。

HP作成ソyenフトを使ってページ作成をするとき、ソyenフトによっては一時的にローカル(自分のパソyenコン)への「絶対アドレス指定」になる場合があります。

例えば、
<IMG src="file://c/home/images/gazou.gif">
などのように。

この指定は、ローカル(自分のパソyenコン)のCドライブのhomeディレクトリ(フォルダ)にその画像がある。という指定になっています。

そして、ページを作り終えて保存される時に、この指定が
<IMG src="images/gazou.gif">
などのように「相対アドレス指定」に変わります。

ところが、操作の問題なのか、ソyenフトの不具合なのか定かではありませんが、この指定が前者の「絶対アドレス指定」のまま残ってしまう場合があります。

この場合、そのページを作成したパソyenコンではきちんと画像が表yen示されます。
ところが、別のパソyenコンでこのページをみるとそのパソyenコンには画像がありませんので表yen示されないというわけです。

どうしても自動的に「相対アドレス指定」にならない場合は、ご自分で正しい記述に直さないといけません。

なお、「絶対アドレス」、「相対アドレス」の詳しい説明については、ここのHPの「HTMLの扉」−「8.リンクの設定」の中ほどに解説があります。
no.10 [追記] [訂正] [削除]



 ■ 11.右クリック禁止のソースを覗く方法。 

ここのHPの「JavaScriptサンプル」にも右クリック禁止の方法を2種類紹介しています。

しかし、右クリック禁止はブラウザが持っている便利な機能yenを殺してしまいますから、使用しないほうがいいですよと注意してます。
「なら、紹介するな!」と言われそうですが..(笑)
それでも右クリック禁止をしているページをちらちら見ます。

私自身、右クリック禁止をして欲しくないので、これが無駄なことなんだと知らせるためにも、そのソyenースを覗く方法をいくつか教えます。
この方法は特殊な方法でもなく、当たり前にブラウザが持ってる機能yenでも可能yenですので一度試してみてください。(笑)
ただし、IEの方法なのでNNの方はヒントとして読んでください。

まず、右クリック禁止のページを開いておいてください。
1.コマンドメニューの「表yen示」−「ソyenース」をクリックする。
 単純なページならこれでソyenースを表yen示できます。


もし、そのページがフレームを使用してたら、直接ソyenースを覗くことができませんから、そのフレームページのソyenースを見て、各フレームのページアドレスを確認します。
このときHTMLの知識が必要になります。
フレームページのHTMLはここのHP、「HTMLの扉」−「11.フレーム(画面分割)」で解説していますので読んでみてください。

そのアドレスを元にブラウザのアドレスを変更します。
該当するページが表yen示されましたら「1.」と同様、コマンドメニューの「表yen示」−「ソyenース」をクリックするとソyenースが表yen示されます。

ほとんどのページがこの方法でソyenースを覗くことができます。

別の方法は、
2.コマンドメニューの「ファイル」−「名前を付けて保存」をクリックして、わかりやすい場所に名前をつけて保存します。
すると、そのページとそのページに必要な画像フレームページなどがすべて取得できます。
それらを同様の方法で覗けばいいのです。

次にちょっと変わった方法としては、
3.コマンドメニューの「ツール」−「インターネットオプション」をクリックします。
「全般」−「インターネット一時ファイル」−「設定」をクリックします。

次に、「ファイルの表yen示」をクリックしますと、今までに表yen示してきたファイルが一覧表yen示されますので、該当ページ(ファイル)を探します。
このとき、コマンドメニューの「表yen示」−「詳細」をクリックしますとインターネットアドレスや日付なども表yen示されますので、並び替えて簡単に探すことができます。
見つかりましたら、ダブルクリックで表yen示させ、同様に「表yen示」−「ソyenース」でソyenースを表yen示します。

さらに、特殊な方法としては、
4.ダウンロード専用のソyenフトを使用してページ丸ごと取り込んでくるという方法もあります。(笑)
ダウンロード専用のソyenフトはフリーソyenフトでも結構yenいいのがあります。
私が知っているものに「Reget」、「Iria」、「Flashget」などがあります。
VECTORなどで探せばもっと簡単なソyenフトも見つかるかもしれません。

ダウンロードした後は、好きなようにファイルを覗けばいいのです。

《注意事項》
特に画像などは、作者がはっきりしているものや、著作権表yen示を書いているものがありますので、例えダウンロードできたとしても無断で利用することは犯罪ですのでダメです。
また、ソyenースについては、一部の特殊なJavaScriptなども著作権を行使する場合がありますので注意してください。
no.11 [追記] [訂正] [削除]


前頁|最初|次頁


↑ページトップへ
page update:
-skin board- <atom>