超初心者のホームページ作成・Q&A Part1 part2

「超初心者の手取り足取りホームページ教室」に訪問された方からの質問を抜粋し、まとめてみました。
HP作成が初めての方や同じような疑問をお持ちの方に少しでも参考になれば、いいかなぁ〜と思っています。

超初心者の手取り足取りホームページ教室での質問マーク

  1. デジカメで撮った写真の容量を小さくしたいのですが、どうすれば小さく出来ますか?
  2. 画像がどうしても張れなくて、 ファイルの種類が、bmpだと駄目らしい・・・までは分かったものの、変更の仕方がわかりません。
  3. フリーの素材屋さんの画像を保存してあるのですが、どのようにタグに入力したらいいのでしょうか?
  4. TOPをフレームで左側にメニューを常に表示し、右側にリンク先を表示したいのですが、ページをどうTOPにつなげていいのかが分かりません。
  5. 文字にリンクを貼ると青いアンダーラインがついてしまうのですがラインの消しかたを 教えてください。
  6. 手打ちでタグ記述する便利制は何でしょうか?
  7. HP関係のファイルは1つのフォルダに保存しています。ゴチャゴチャしてきました。フォルダ分けする方がいいでしょうか?
  8. 文字と文字の間に空白スペースを作りたいのですが、どのようにするのでしょ うか?
  9. 曲が鳴らないんです。操作パネルも無効になってます。どうすればいいの?
  10. 出来上がったHTMLファイルに新たに内容を追加する手順を教えてください。
  11. 「ワード」でHPを作るのが良いと聞いたのですが・・。
  12. 検索エンジン登録の方法を教えて下さい。
  13. 検索ロボットに拾われたいのですが。
  14. アップロード(UP)した画像が表示されないのですが・・・。
  15. PCの環境が違ってもページに横スクロールが出ない方法はないでしょうか?
  16. 素材やさんにフォントがあるじゃないですか。どうやって使えばいいのか教えて下さい。
  17. 画像をリンクにしたいのですが、a href=・・・をどこにいれたらよいのかわかりません。
  18. 自分のPCのブラウザで上手く画像が表示できるのにUPすると表示できない原因を教えてください。
  19. ホームページを公開したいんだけれど、ホームページのアドレスってどうやって決めるんですか?
  20. どうやってカウンタをとりつけられるんですか?

1.デジカメで撮った写真の容量を小さくしたいのですが、どうすれば小さく出来ますか?

デジタルカメラの性能もますます良くなって、美しい、大きな写真が簡単に撮ることが出来ます。メールに添付する場合やホームページで素材として扱う場合はデータ量が大きすぎ、そのままでは使うことができません。リサイズやトリミング(切り取り)をした加工が必要になります。Windowsでは、標準にペイントが附属しています。これで縮小できます。写真の容量を小さくする(ペイントで) を参考にしてください。
フリーソフトで簡単に縮小できますのでそれを使用する方法もあります。例:「縮小専用。」

2.画像がどうしても貼れなくって、 ファイルの種類が、bmpだと駄目らしい・・・までは分かったものの、変更の仕方がわかりません。

bmp は、Windowsでの標準的な「画像ファイル形式」です。Windows 附属の「ペイント」で画像を作成すると、ファイル形式は .bmp で保存されます。見た目の画像は綺麗ですが、ファイルサイズは大きくなります。自分のPC内で扱う場合はいいのですが、インターネット上では相応しくない形式です。ファイルサイズが大きいとページを表示するのに、時間がかかり過ぎ場合によっては表示できないことも起こります。 画像をホームページで扱う場合は、なるべくファイルサイズを小さくする工夫が必要になります。画面上で見た目はわからない程度にファイルを圧縮したり、減色した形式に変換してホームページに使います。 ホームページの画像素材(写真、イラストなど)のファイル形式は、jpg、gif、png の3つの形式あります。それぞれ特徴があり、一般には、写真は .jpg 、イラストは .gif 形式になります。png は比較的新しい形式で、IE4.00以上で対応できます。画質の劣化がなく、圧縮率は gif より高いなどの特徴があります。 Windows標準附属のPhoto Editor を使ってファイル形式を変換することができます。 Photo Editorの基本的な使い方を参考にしてください。Windows XP 附属の「ペイント」は、gif、jpeg、png などの形式で保存できます。

3.フリーの素材屋さんの画像を保存してあるのですが、どのようにタグに入力したらいいのでしょうか?

<img src="保存した画像のファイル名">これだけで、HTMLファイルに指定すればページに画像が表示されます。後大事なのは画像の情報を加えることです。alt="" で画像の説明をします。詳しくは画像には alt で代替テキストを付けましょう を参考にしてください。

4.TOPをフレームで左側にメニューを常に表示し、右側にリンク先を表示したいのですが、リンク先をどう指定するのか分かりません。

ページの画面を左右2分割した場合は、左・右の各フレームに名前を付けどのフレームにリンク先を表示するか指定します。左側フレームにメニューがあって各メニューにリンクを張る時、同時に target を使って表示させたい右側の名前を指定します。表示するフレームを指定したいを参考にしてください。

5.文字にリンクを貼ると青いアンダーラインがついてしまうのですがラインの消しかたを教えてください。

スタイルシートを使えばアンダーラインを消すことができます。一般的にはアンダーラインがあれば、直感的にリンクが張られているとわかり目印の役割になります。それをアンダーラインを消すことで、混乱することも出てきますので、デザイン上どうしても下線を消したい場合はリンクであることを知らせるために文字を太くたり、色を変えたり意思表示をしましょう。 リンクの下線を消そうを参考にしてください。
WEBページを見ていて文章のなかに下線が引かれていたり、特別な文字だけを青色に変えるとリンクが張ってあるのだなと勘違いしてマウスを文字の上にもっていってしまいます。文字にアンダーラインを引かない、青色文字を使わないようにしましょう。

6.手打ちでタグ記述する便利制は何でしょうか?

便利性を考える場合は、自分でタグを打ち込んでいるのでページの構成が把握でき、更新する場合にソースを見てどこを変更すればいいのかすぐわかります。ソースの容量も少なくシンプルなソースで済みます。作成ソフトのソースは複雑で初心者には見てもどのように変更され、どのようなタグを使っているのか皆目わかりません。またページの更新を繰り返すとソースももっと複雑になってきます。ブラウザはページを表示するため、ソースを上から順にタグを理解して表示します。その時タグの量が多いと表示にも時間がかかってしまいます。最初からタグの使い方を覚えてページを作ることは、時間も取られます。簡単に早く作りたい場合は作成ソフトを使用するのもいいと思います。ただ、作成も慣れてくるとどうしても思い通りにページを作りたい!との要求が湧いてきます。その時、作成ソフトでは対応できない場合が多いと聞いています。HTMLの基本を知っているとその後思わぬところで役に立つのは間違いないと思います。タグの使い方がわかっていれば、素敵なページと出会ったときに、そのソースが理解でき参考になると思います。

7.HP関係のファイルは1つのフォルダに保存しています。ゴチャゴチャしてきました。フォルダ分けする方がいいでしょうか?

ページ数が増えてくると、当然ファイル数も増えてファイル管理が大変になります。 ページ、ファイルの種類、グループなどに分けてフォルダを作ると、管理しやすくなります。HP用に作ったフォルダの中に新しいフォルダを幾つか作って、その中に自分が使いやすい方法でファイルのを収納すればいいと思います。ただ、気をつけたいのはパス(ファイルの位置)が変わってしまうことです。今まで指定していた HTMLファイルや画像ファイルを新しいフォルダに移動した場合、スラッシュを加えて違うフォルダにあることを指定します。 HTMLや画像ファイルの位置指定方法を参考にしてください。

8.文字と文字の間に空白スペースを作りたいのですが、どのようにするのでしょうか?

  1. キーボードにあるスペースキーでを使って空白を入れる。
    半角と全角では違ってきます。連続して半角の空白を入れてもスペースは半角1つ分しか取れません。全角では、スペースを入れればその数だけのスペースを取ることができまます。全角のスペースを入れ空白をとる を参考にしてください。
  2. 「 &nbsp; 」特殊記号を使って空白を入れる。
    &nbsp;を文字の間に入れると半角スペースが入ります。連続して入れるとその分スペースを確保することができます。
  3. 透過 gif 画像を利用する。
    透過 gif 画像を作り、その画像の大きさを指定して欲しいスペースを作ります。 透過gif 画像を使って自由にスペースを作ろう を参考にしてください。
  4. スタイルシートで指定する。
    例:文字の間
    <div style="letter-spacing:0.5em;">文字の間</div>    0.5em の数値の大きさを変えることでスペースを決めることができます。

9.MIDI曲が鳴らないんです。操作パネルも無効になってます。どうすればいいの?

操作パネルが表示しても操作するボタンが灰色の場合は、音楽ファイルの位置指定の間違いでは?HTMLファイルから音楽ファイルの位置を確かめてください。指定しやすいように、HTMLファイルと音楽ファイルを同じフォルダに保存します。そして、HTMLファイルに <embed src="音楽ファイル名.mid"> と記述します。この記述があれば、ページを見ている側に 音楽ファイルのデータがダウンロードされ、パソコンに内蔵されている音楽を再生するソフトで、音楽が流れます。再生ソフトは、IE3.0以降であればサポートされています。曲の設置方法は 音楽を鳴らそう#♪♭♪ を参考にしてください。

10.出来上がったHTMLファイルに新たに内容を追加する手順を教えてください。

作成したHTMLファイルのEマークのアイコンをダブルクリックすると「Internet Explorer(IE)」が立ち上がります。画面には作成したページが表示されています。その画面のメニューバーの表示→ソースを選択すると、メモ帳でソースが表示されます。これが前回記述したソースです。ここに、 追加したい内容や変更したい箇所を追加します。メモ帳を上書き保存します。 IEの更新ボタンを選択します。 これで、ホームページに内容が追加されたり、変更されたりします。この作業を「更新する」といいます。何度も更新を繰り返して、思った通りのページや新しいページが完成します。

11.ホームページ(HP)を作るのなら、「Word」が良いと聞いたのですが・・・

Word 2000の機能の1つに「WEBページとして保存(G)」があります。Word で作成したページがそのままWEBページとなります。ワープロソフトになれた方なら以外と簡単にできそうです。魅力を感じますが、もともとHPを作成するためのソフトではないで、思い通りにはいかない場合が多いと聞いています。 試しに「Word」を使って一枚の画像を貼ったページを作成してみました。そして、そのソースを見ましたが、一枚の画像を表示するにはメモ帳でタグを記述した場合は数行ですむものが、とても複雑なソースになっていました。(Office HTML Filter をダウンロードすれば、Office 固有のマークアップ タグを削除するツールもあるようですが) Wordで設定している作成者名がソースに表示されてしまう問題もあります。 実名で書かれている場合は困ります。私もWordには実名になっています。(変更も可能ですが、Windowsのシステム部分の作業になり難しい。) HPで実名がわかるのはまずいと思います。メモ帳は、起動するのも軽いですが、Wordは重いです。 WEB上にはWordでホームページを作る情報サイトがあります。興味のある方は「 Word ホームページ 作成 」等のキーワードで検索し、参考にしてください。私個人は、市販ソフトやベクターなどのフリーの作成ソフト、メモ帳を使ってHPを作成することをお薦めします。

12.検索エンジン登録の方法を教えて下さい。

HPが出来上がったら、より多くの方に訪問して欲しいと思います。WEBから必要な情報を得るためには検索エンジンを使って探すと思います。 検索エンジンには、一般によく知られているのがYahoo! Japan、Google「グーグル」、goo(グー)、Infoseek(インフォシーク)、Lycos(ライコス)などがあります。各検索エンジンのホームページの登録申請ページから案外簡単に登録できます。ロボットエンジンというプログラムがWEB上を巡回して、独自の方法でページを拾ってデータを集めています。登録しない場合でも拾われる可能性はありますが、登録することでその検索エンジンのデータベースに組み込まれますのでしないより有利になります。複数の登録申請が一度で済むサービスを行うサイトもあります。有名なところは「一発太郎」さぶみっと!JAPAN 等があります。検索エンジンについては、検索エンジンについてを参考にしてください。登録申請する場合は 登録申請からすぐには登録が反映されません。ある程度期間(1〜4週間)をみる必要があります。

13.検索ロボットに拾われたいのですが。

ソースの記述の仕方で検索ロボットに拾われる可能性が高くなります。初心者でもできる!ロボット型エンジン対策を参考にしてください。ページの更新頻度の多さや他のサイトからのリンク数が多い、ページの内容不足、工事中のページがある等も関係するようです。

14.アップロード(UP)した画像が表示されないのですが・・・。

初めてHPをインターネット上で見た時、一番多い疑問が画像が上手く表示されていないというこではないでしょうか?理由はいろいろですが、次の原因が多いと思います。
ブラウザ上に「×」マークが表示されている場合について。 ?画像が表示されない を参考にしてください。

15.PCの環境が違っても横スクロールが出ない方法はないでしょうか?

横幅を指定しないページでは、文章が見る側のブラウザサイズに応じて自動的に改行されますので横スクロールは出ません。その中に絶対サイズで配置されている内容や画像がある場合は気をつけましょう。画像は絶対サイズですので、画像サイズより小さなブラウザサイズでは、スクロールが発生します。また、大きいブラウザサイズでHPを作って上手く表示されていても、小さなブラウザサイズで見ている側では、横スクロールが表示されてしまいます。ブラウザサイズを少し小さくして作成することも大事です。 どうしても横スクロールが出てしまう場合は文字の大きさを小さくする、画像の大きさを小さくする工夫をしてみましょう。

ある程度見る側の横幅を想定し、テーブルを使ってページの横幅を決める方法があります。 <table width="600"> のように指定し、テーブルの横幅を固定します。ページの横幅がwidth="600"を超えないので、見やすいページになります。 width="600" の数値は 600〜800 以内ぐらいがいいでしょう。 このテーブルの中に HP の内容を納めます。この場合でも内容が指定幅よりを超えないように各セルの横幅を調整します。
<table width="100%">と相対的に横幅をな指定をすれば、見ている側の現時点でのブラウザサイズの大きさに対して相対的にテーブルの幅が決まります。ブラウザ画面全体に上手く表示され、横スクロールは出ません。(この場合もテーブル内に絶対サイズで横幅を指定する内容には気を付けましょう。)

テーブルのサイズを指定したいを参考にしてください。 WEB上のメジャーなサイトはほとんどテーブルを使ったレイアウトをしています。YAhoo!は、現在(2004年8月確認)width="675" の横幅のテーブルを中央に配置しています。富士通ではwidth="100%を使っているようです。

16.素材やさんにフォントがあるじゃないですか。どうやって使えばいいのか教えて下さい。

自分のPCで使えるフォントは決まっています。その場所はスタート→設定→コントロールパネル→「フォント」フォルダを見ればわかります。フォントは Officeや他のソフトをインストールした場合、自動的にそのソフト独自のフォントも追加されます。 素材やさんにあるフリーフォントを使う場合は、使いたいフォントを自分のPCにダウンロードして、このフォルダに追加すると使えるようになります。HPに利用するには、少し気をつけなければならないことがあります。それは、ダウンロードしたフォントを使って上手く表示されても、他のパソコンで上手く表示できません。HPを見る側にも同じフォントがなければせっかく素敵なフォントを使ってデザインしても、見る側のPCでの標準フォントで表示されてしまいます。HPではフォントを画像にして使う必要があります。

17.画像をリンクにしたいのですが、a href="・・・"をどこにいれたらよいのかわかりません。

文字列(テキスト)にリンクを張る場合は <a href="ジャンプ先のURL">HOME</a> と指定します。HOME の文字をクリックするとジャンプ先に移動することができます。画像にリンク張る場合は、HOME のテキストの代わりに画像を指定すればいいだけです。
<a href="ジャンプ先の URL"><img src="画像のファイル名" width="" height="" alt="" border="0"></a>
とテキスト(HOME)ところに画像を imgタグで指定します。width="" height="" は画像自体の横縦の大きさ、alt は画像の説明をします。border="0" は画像にリンクを張ると画像の周りに青い枠線が付いてしまうのを消すことができます。
HOMEへのリンクボタン←<a href="index.html"><img src="icon_home.gif" width="22" height="21" alt="HOMEへのリンクボタン" border="0"></a>

18.自分のPCのブラウザで上手く画像が表示できるのにUPすると表示できない原因を教えてください。

ファイルの指定が原因と思います。 HTMLファイルから画像を表示するための指定が PC 内で通用する指定になっているからです。 例えば <img src="c:\My Dcuments\hp\flower.gif"> と flower.gif 画像のある場所を指定すると、c ディスクの My Dcuments フォルダ内に hp フォルダがあって、そのフォルダ内の flower.gif を表示します。これはローカル(自分のPC)で通用するファイル指定になります。この指定でUPした場合、HTMLファイルの指定の flower.gif がローカル指定なのでUP上での画像の保存先ではありません。WEB上では画像が無いと判断され「×」と表示します。 自分の HP 内でのファイル指定の基本は HTML ファイル(ソースを記述したファイル)を基点にしてどの場所に表示させたいファイルがあるか指定する必要があります。(相対パスといいます。)HTMLファイルと画像 flower.gif が同じ hp フォルダ内にあるにある場合は、HTMLファイルから見た画像指定は <img src="flower.gif"> になります。この指定であれば、ローカルでもインターネット上でも上手く画像が表示されます。

19.ホームページを公開したいんだけれど、ホームページのアドレス(URL)ってどうやって決めるんですか?

インターネットを利用してホームページ(HP)を見ているということは、どこかのプロバイダーに加入していると思います。たいていのプロバイダーは、あなたの HP をインターネット上で表示するために必要な専用のスペースをサービスとして提供してくれます。専用のスペースの URL は、ブロバイダーと契約した時に決められているか、初めて HP を作るときに決めるかどちらかと思います。プロバイダーとの契約書があれば確かめてください。そのようなサービスがない、利用したくない場合は有料(レンタルサーバー)、無料スペースを利用することもできます。有料の場合の URL は、ある程度自分の好きな名前を付けることが出来ます。無料の場合の URL は、そのサイトの規約に従って決まります。無料ですので、会員登録や広告が表示されます。有名な無料 HP スペースにはCOOL ONLINE Yahoo!ジオシティーズ isweb 楽天広場 などがあります。

20.どうやってカウンターをとりつけられるんですか?

カウンターを HP に設置すると、何人の方が訪問してくれたかを知ることができます。 カウンターを設置するには、プロバイダーで用意されているものや無料で提供しているサイトのものを利用する、または自分で設置する(特別な知識が必要になります)方法があります。 プロバイダーや無料を利用する場合はいたって簡単です。用意されているカウンタを申し込みますと、カウンターのソースをメールなどで教えてくれますので、そのソースをコピーしてHPの設置したい場所に貼り付けるだけです。カウンターの文字スタイルやフレームの選択は番号付きのサンプルを見て指定されている番号をソースの中に記述すれば、好みのカウンターが設置できます。または、カウンターのソースが決まっていて、そのソースに自分のホームページアドレスやカウンター画像番号を記述するだけの場合もあります。詳しくは各サービスの説明に従いましょう。 カウンターを設置しよう を参考にしてください。

■HOME / サイト案内へ