ホームページ制作入門

NINJA TOOLSに登録したメールアドレスとパスワードを使ってログインしてください。

NINJA TOOLSには、色々なサービスが用意されています。
管理ページに移動すると、見る事が出来ます。


①管理ページより「忍者ホームページ」の「追加する」をクリックしてください。
②必要事項を入力して「作成する」をクリックしてください。
※「ツールの名前」には、自分が分かりやすいような名前（説明）を入力します。
※アカウントは半角英数字で入力します。アカウントに対して取得できるドメインを選択します。
※この時、他の人とあまり重複しないアカウント名にしておくと、ドメインを選びやすくなります。

以上で、登録が完了です。

次に、ツールに関する情報が必要になりますので、ここで確認しておきましょう。
①NINJA TOOLSの管理ページより、上記⑧で設定した「ツールの名前」をクリックします。
②右上に、ホームページのURLが表示されていると思います。
※クリックしてアクセスしてみると、「サイト準備中」あるいは「ページが見つかりません」などの表示になるかと思います。
③「ツールのページ」の下の方に、「FTP設定」という部分があります（FTP設定は、とても重要な情報です！）


NINJA TOOLSでの無料のレンタルサーバーについてまとめると・・・
・登録メールアドレスとパスワード
・ホームページのURL
・FTPの設定情報
この3つをメモするなどして分かる様にしておくと良いと思います！

ホームページのアップロードに必要な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のテキストの内容の意味で使っています。

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

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

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





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

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


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

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

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