ホームページ制作入門

ホームページのアップロードに必要なFTPソフトで
FFFTPというソフトについて、説明致します。

FFFTPは既に開発が終わっており、セキュリティ面を考えるとFTPSソフトの方が良いとの事ですが…
最初はFFFTPの方が分かりやすいと思うので、ここで紹介致します。


FFFTP入手方法
①vector(http://www.vector.co.jp/)にアクセスします。
②vectorの検索窓にFFFTPと入力して検索します。
③検索結果より、FFFTP exe版を選択します。
④ダウンロードをクリックすると、自動でダウンロードを始めようとしますので、
ダウンロードするのかの確認が出た場合は、「保存」で自分の分かる場所に保存してください。
⑤保存したファイルを見ると、exeファイルが入っていますので、ダブルクリックするとインストールされます（画面の案内に従ってインストールしてください）。
※ダウンロードするのは、zip版でも構いません。若干インストール方法が異なると思います。


インストールが終了すると、スタートメニュー、デスクトップなどにFFFTPのアイコンが出来ると思います。
ダブルクリックでFFFTPを起動する事が出来ます。

ホームページを公開するためにはサーバーが必要です。
レンタルサーバーの中には、無料のレンタルサーバーもあります。
広告が表示されることになりますが、ホームページ制作を始めたばかりの段階なら、
無料のレンタルサーバーで充分だと思います、


無料レンタルサーバーの主な制約として、
・広告が表示される
・CGIやPHPなどのサーバーに負荷をかけるスクリプトを使用できない
等が挙げられます。

※サーバーにより異なりますので、詳しくは各サーバーのホームページをご確認ください。


今回は、「NINJA TOOLS」という無料でホームページスペースを貸してくれるサービスの利用方法を簡単に説明します。

①まずは、NINJA TOOLS（http://www.ninja.co.jp/）にアクセスしてください。
②新規登録のバナーをクリックしてください（私が確認した時点ではページの右上にありました）。
③パソコンのメールアドレスを入力して送信してください（持っていない場合は、Yahoo!やGoogleなどのフリーメールでも登録可能です）。
④入力したメールアドレス宛にすぐにNINJA TOOLSからメールが届きますので、メールを確認して、メール内の本登録のURLをクリックしてください。
⑤新規ユーザー登録の画面になりますので、必要事項をすべて入力して、「上記の利用規約に同意して、本登録」をクリックしてください。
※登録メールアドレスとパスワードの組み合わせは、ログイン時に必要になります。忘れない様にしておきましょう。
※画像認証の文字は読みづらい場合は、変更する事が出来ます。
※利用規約は、クリックすると別ウィンドウで開きます。
⑥登録完了ページに移動したら、NINJA TOOLSへの登録完了です。


登録メールアドレスとパスワードが分からなくならない様に、メモするなどして、気をつけておきましょう。

ホームページで最初に勉強するのが「HTML」です。

その次に「CSS」を勉強することになると思います。


「HTML」と「CSS」

この2つを勉強しておけば、見た目のきれいなホームページを作る事が出来るようになります。


役割としては、

HTML　⇒　ページの構造を記述する
CSS　右　ページのデザインを記述する

となっています。


例えば、
HTMLの役割は、

ページの最初にサイト名を書いて、
次にキャッチコピーを書く。
その次に画像を入れて
その次に説明文を書いて
その次に表を書く
･･･

この様な、ページ内の構造はHTMLで書くことになります。




では、CSSの役割は何なのかというと、

サイト名のフォント明朝体で、色は赤色、フォントサイズは20pxにする
キャッチコピーは、黒で書く
画像は、500px×500pxで、文章との隙間を20pxあける
説明文は、文章を二重線の枠で囲む、
表は背景にこの画像を使用して、文字を太字にする
･･･

この様に、HTMLで書いたそれぞれの要素の、サイズや色、枠線や隙間など、
デザインに関するものを書いていきます。

※「px = ピクセル」は、長さの単位です。




実はHTML側でもデザインを指定する事が出来るのですが、

これは推奨されていない上、HTMLのソースが見づらくなってしまうので、

最初から、「HTMLとCSSは別にする」という前提で勉強した方が良いかと思います。

※「ソース = ソースコード」は、ここではHTMLのテキストの内容の意味で使っています。

ホームページを制作していると、意味のわからない用語が沢山出てくると思います。

その中の「ディレクトリ」という言葉について説明します。

ディレクトリとは・・・フォルダの事です。





なぜわざわざ名称を変えるのかが分からないのですが、

一般に、自分のパソコンの中にあるフォルダは、フォルダと言いますが、
サーバー内にあるフォルダはディレクトリと言います。


詳しく知らないので、もしかしたら何か意味があるのかもしれませんが

サーバー内のフォルダはディレクトリという

と覚えておけば、当面は大丈夫だと思います。

拡張子を表示する方法についてご説明します。

Windowsの場合、

初期設定で、
登録されている拡張子は表示しない

となっていますので、ホームページ制作などの際に拡張子を変更して保存するためには、
登録されている拡張子も表示する必要があります。

※Macは使っていないので、知りません。



拡張子を表示する方法
拡張子はフォルダオプションとして設定されています。

WindowsXPの場合
フォルダを開き、
「ツール」⇒「フォルダオプション」⇒「表示」と選択します。

設定項目の下の方で、
「登録されている拡張子は表示しない」
にチェックが入っていると思いますので、
チェックを外して、適用またはOKをクリックして、設定画面を閉じてください。



Windows Vistaの場合
フォルダを開き、
左上にある「整理」⇒「フォルダと検索のオプション」を選択します。
あとは、XP同様、
「表示」⇒「登録されている拡張子は表示しない」のチェックを外す
⇒適用またはOKをクリックして、設定画面を閉じてください。


Windowsの他の方法について
手元に実機がないので、確認できませんが、おそらく似たような方法で設定可能だと思います。


確認方法
今まで拡張子が表示されていなかったファイルを確認してみてください。
ファイル名の最後に拡張子が表示されていれば成功です。