気楽にHTML

お金をかけるか、かけないか
用途と気合にあわせて色々と
サイト立ち上げ用意・早引きリンク
 1.必要なもの列挙
 2.サーバースペース
 3.FTPソフト
 4.転送前後に要確認!
 5.ついでに色んなソフトをご紹介
HTML入門 HTML頻出タグ一覧

1.必要なもの列挙

 さて、インターネット上に自身のWebサイトを公開するためには、必要なものが最低3つあります。

 1.完成したHTMLファイルやそれを収めたフォルダ
 2.サーバースペース
 3.FTPソフト

 1は他の項目で書いてきましたので省くとして、順に説明していきます。

△TOP

2.サーバースペース

 せっかく完成したHTMLファイルも、パソコンの中にあるだけではインターネットに公開することはできません。このファイルをサーバーに転送することで初めて、あなたの作成したWebページが世界に公開されることになります。
 このサーバーですが、ようはインターネットにファイルを公開するためのデータ置き場とでも考えちゃって構いません。いや、かなり乱暴な要約ですけどね。
 さて、このサーバーを用意しましょう。方法は3つあります。

 1.無料レンタルサーバーでスペースを借りる
 2.有料レンタルサーバーでスペースを借りる
 3.自分のパソコンをサーバーにしたり、ホームサーバーを使う

 3はまた別の技術や専門知識が必要になりますので、ここでは除外いたします。興味がある方は、この手の解説サイトがたくさんありますのでそちらをご参照下さい。
 そこで、一般的には1(以下無料サーバー)か2(以下有料サーバー)を使うことになります。どちらが良いかということは言えません。それぞれにメリット・デメリットがありますので、利用される方の条件にあった方をご使用下さい。
 では代表的なメリット・デメリットを表にしてみますね。

メリット デメリット
無料サーバー 無料・契約プロバイダがスペースを用意している場合がある 広告が入る(入らないところもある)・使用可能な機能が少ない・比較的スペース容量が少ない
例えば……契約プロバイダのスペース ・ ジオシティーズ など
有料サーバー 広告が入らない・使用可能な機能が多い・比較的スペース容量が大きい 金がかかる
例えば……さくらインターネット ・ ロリポップ ・ シーサイドネット など

 単純に、無料・有料のメリットとデメリットはお互いの逆になっていることが多いです。
 無料サーバーの場合、Webサイトの内容と広告の温度差が激しいサイトになることもありますので、こういった部分もサーバーを選ぶための材料にされるといいと思います。

 最近では無料サーバーでも大容量のレンタルスペースを用意していることがありますし、使用可能な機能を多く設定しているところもあります。
 有料サーバーはお金を払う分、自由度の高いWeb運営をすることができます。ただ、各社間で値段やサービスにかなりの差がありますので、複数のレンタルサーバー会社を見て回ることをお勧めします。

 どちらにも言えることですが、サーバー環境やサービスの質にはそれぞれ差がありますので、十分な下調べをしてから自分の用途に最適なところをお選び下さいね。
 それと、面倒でも『約款』や『規約』、『FAQ(よくある質問)』は熟読しましょう。各社によって禁止していることが違います。それによっては作りたいWebサイトが禁止事項に触れることになりますので、ここは特に重要ですよ。
 それでも分からないことがあれば、『お問い合わせ』で借りる前に疑問は解決しておきましょう。有料サーバーの場合、お金がかかりますからねぇ。

△TOP

3.FTPソフト

 サーバースペースを借りたなら、そこに作成したファイル等を転送します。
 それには、FTPソフトというものを用います。ここでは代表的なソフトを一つご紹介いたしますね。

 FFFTP(フリーウェア) → 公式サイト

 このFTPソフトは非常に使いやすく、僕もお世話になっています。それになにより有名なこともあって、レンタルサーバーのFAQなどで、そのサーバーでのFTP接続・設定方法を説明していることもあるのです。
 専用のサポートページなどもありますので、困ったことがあればそこを頼れるのも心強いですね。あ、でもこれはソフト開発者や、サポートページ運営者に直接問い合わせるわけじゃありませんよ、念のため。

 また、Webサイト作成支援ソフトにもこのFTP機能が備わっていることもあります。もしWebサイト作成支援ソフトの購入を考えている場合は、この機能もチェックしてみるといいかもしれません。

△TOP

4.転送前後に要確認!

 前述の『HTMLファイル』・『サーバースペース』・『FTPソフト』が用意できれば、あとは自分のパソコンにあるファイルをサーバーに転送すれば、はい、あなたのWebサイト(HP)が完成です。
 しかし、その前に、必ず、やっておかなければならないことがあります。
 それはローカルチェックです。

 ローカルチェックの“ローカル”とは、ものすごく簡単に言ってしまえば個々人のパソコンのことです。
 なのでローカルチェックは、文字通り自分のパソコン内でのHTMLファイルの動作を確認することです。チェックすることは大まかに分けて4つあります。

 1.レイアウトの崩れがないか(特にブラウザ互換など)
 2.リンク切れ(デッドリンク)していないか
 3.画像は適切なものが表示されているか
 4.誤字脱字がないか

 特にリンク切れは適切な案内ができない原因になりますので、お気をつけ下さい。
 チェックをして、納得できるものでしたら転送していよいよインターネット上に公開することになります。

 そして、アップロードが済んだら、今度はネット上でチェックを行いましょう。
 なぜなら、転送ミス(例えば転送し忘れなど)があるからです。これはリンク切れの大きな原因になりますし、画像をアップし忘れたらその画像が表示されないことになります。それに、こちらで誤字脱字に気づくことも結構あるんですよ。
 一通りチェックして、問題がなかったら完成です。
 お疲れ様でした。

△TOP

5.ついでに色んなソフトをご紹介

 FTPソフトのところでちょっと触れたので、Web作成に関わるソフトを色々ご紹介しておきますね。
 色々できるんですよ、本当に。

 Webサイト作成支援ソフト。
 これを使用すれば、初心者でもかなり綺麗な、かつ様々な効果を用いたページを作ることができます。
 有名どころをいくつか。

 Macromedia Dreamweaver → 公式サイト 製品ページ
 Adobe GoLive → 公式サイト 製品ページ
 IBMホームページビルダー → 公式サイト 製品ページ

 Dreamweaverは同企業のFlash作成ソフトとのパッケージでも売っています。Flash作品を作りたい場合は、一緒に買ったほうがお安いかもしれません。

 サイト内の画像を作るにおいて便利な(あるいは必要な)画像作成ソフトとしては。

 Adobe Photoshop (Elements) → 公式サイト 製品ページ Elements製品ページ
 Macromedia Fireworks → 公式サイト 製品ページ
 Corel Painter → 公式サイト 製品ページ
 Adobe Illustrator → 公式サイト 製品ページ

 Photoshop Elementsは比較的安く、スキャナなんか買った場合には同梱されていることもあります。デジカメ写真の赤目修整機能もありますので、便利ですよ。写真の加工や修整ソフトとして有名ですが、Web素材を作るに十分な機能も持っています。
 FireworksはWeb素材の作成に特化したソフトですので、それだけに普通のレタッチソフトにはない機能が豊富にあります。また、Fireworksは先のDreamweaverとのパッケージもあります。
 Painterは水彩画のようなイラストが描けるソフトです。Illustratorと並んで、この二つが有名なドローイングソフトですね。
 フリーソフトでも良いものがあるようなので、そちらを使用されるのもいいと思います。

 動画の場合は

 Macromedia Flash → 公式サイト 製品ページ
 Windowsムービーメーカー(フリーウェア) → 製品ページ
 Adobe Premiere(Elements) → 公式サイト 製品ページ Elements製品ページ

 などがあります。
 Flashはビデオカメラで撮った画像を編集するというよりも、写真・イラストなどの静止画をアニメーション化するものと考えていただければ分かりやすいかと思います。Flashムービー・Flashアニメなんていうものもあります。
また、企業のWebサイトはこれを使っているサイトが多いですね。効果的に使えば印象的なものが作れます。
例えばとらやさんのこのページとか。
 DVカメラなどで撮ったムービーはムービーメーカーやPremiereの方で編集などができますし、多分カメラに同梱されているソフトでも十分でしょう。

 あ、そうそう。
 学生や教育機関関係にお勤めの方は、アカデミック版というパッケージで比較的安く(製品によって変動しますが、半額以下や7割引も)ソフトウェアを手に入れることができます。
 是非、ご活用を。


 『HTML入門』でも紹介していますが、こちらにもテキストエディタを書いておきます。

 TeraPad(フリーウェア):フリーとは思えないほど優れた機能を持つテキストエディタです。 → 公式サイト
 秀丸エディタ(シェアウェア):超有名なテキストエディタで、プロ御用達。 → 公式サイト

 フリースクリプトなどでPerl・CGIも使用したいという方は、どちらかを用意しておくことをお勧めします。

△TOP

C おー、色々あるもんだ。
R まだまだいっぱいあるよ。自分の目的に一番あっているソフトを探すのも楽しいもんです。
C お前さんは全部持ってるの?
R いんや。
でもAdobe Photoshop Elements2.0、Windowsムービーメーカー、TeraPadは持ってるよ。
あ、あとFFFTPも。
C ふーん。他に欲しいのとかあんの?
R あるよー。FlashとかPremiereとかPainterとか。
ソフトじゃないけどイラストや素材を作る時のためにタブレットも欲しいし、音楽作成ソフトなんかもいじってみたい。
C ふーん。色々興味を持つなー。
R どれだけできるかは分からないけどね、興味は尽きぬよ。
C ま、頑張れ。
R あれ?なんか、冷たくない?
C いやー、別に俺にとっちゃどうでもいいことだし。
R がーん