トップページ -> ホームページ作成の方法

ホームページ公開までの道のり

完全な素人ですが，ホームページの公開は意外と簡単でしたので，コンテンツの水増しのためにやり方を載せておきます．
この程度の文字だけのページであればHTMLの知識が全くなくてもレンタルサーバー FTPソフトを利用してすぐに公開することができます．
順を追って説明していきます.

ホームページ作成の手順

レンタルサーバーをレンタルする
FTPソフトをインストールする
htmlファイルを書く
htmlファイルをサーバーにアップロードする

レンタルサーバーをレンタルする

ホームページを公開するにはサーバーが必要です．自前でサーバーを用意する方法や，サービスの充実した有料のレンタルサーバーをレンタルすることもできるのですが，今回はテストですので無料のレンタルサーバーを借りることにしましょう．私の借りている XFREE というレンタルサーバーの利用登録をしましょう．
まず，ページ下部の「無料レンタルサーバーご利用お申込み」をクリックしメールアドレスを入力します．

入力したメールアドレスに届いたメールのURLより会員情報の入力を行います．
利用登録が終了したらXFREEにログインし管理パネルからHTMLサーバーの「利用を開始する」をクリックします．

これで，レンタルサーバーを借りることができました．試しに現在のサイトの状況を確認してみましょう．「ドメイン設定」からドメイン名を確認し， "example".html.xdomain.jp に飛んでみましょう．まだ，コンテンツをアップロードしていないので何も表示されませんね．

FTPソフトを使ってhtmlファイルをアップロードすることでサイトを表示できます．次はFTPソフトのインストールをしましょう.

FTPソフトのインストールをする

次にFTPソフトをインストールします．有名なものがいくつかあるらしいのですが，ここではとりあえずFFFTP(*)を利用することにします．窓の杜よりFFFTPをダウンロードします．ダウンロードが完了したらファイルを開き，インストールを進めます．

デフォルトの状態でインストールが完了したら，デスクトップ上にFFFTPのショートカットアイコンができます．試しに一度開いてみるとホスト一覧という画面が出てきますが，ひとまず放置してhtmlファイルを書いていきましょう．
* Linuxやmacで動作するかわかりません． filezilla は linuxやmacでも動作するようです．

htmlファイルを書く

ウェブサイトを表示するためにhtmlファイルを書いていきます．自動入力などの機能の付いたエディターを使って書くのが便利ですが，テスト用なのでひとまずメモ帳でhtmlファイルを書きます．以下をコピペまたは写経して，ファイル名を index.html として分かりやすい場所に保存してください．


<html lang="ja">

<head>
<meta charset="utf-8"/>
<link rel="icon" type="image/png" href="icon.png">
<title>
    タイトル入力
</title>
</head>

<body>
    <h1>
        ヘッダー タイトルとか
    </H1>

    <p>
        pはparagraphのp
    </p>

    <h2>
        箇条書き
    </h2>

    <ul>
        <li> 仮コンテンツ1
        <li> 仮コンテンツ2
        <li> 仮コンテンツ3
    </ul>

</body>

</html>

保存したファイルをChromeやEdgeなどを使って開くと以下のように表示されると思います．

これをサーバーにアップロードすることで他の人からも見れるようにします．

htmlファイルをサーバーにアップロードする

FTPソフトを使って先ほど作成したhtmlファイルをサーバーにアップロードします．「ホスト一覧」から「新規ホスト」を選択し，サーバーとの接続設定を行います．

とりあえず，「ホスト設定名」は "接続1" とでもしておきます．ここは任意です．
XFREEの「サーバー管理パネル」の「サーバー情報」を確認し，FFFTPの接続設定のホスト名には "example".html.xdomain.ne.jp のようなXFREEのホスト名を入力します．

次に「ドメイン設定」を確認し， "example".html.xdomain.jp をユーザー名に入力します．

最後に，サーバーの利用登録時に入力したパスワードをパスワード欄に入力して「OK」を押せば接続設定が完了します．
正常に接続できると以下のような画面が表示されます．右側にあるファイルはすべてデフォルトの画面を表示するためのファイルであり必要ないためすべて削除します．画面の左側から先ほど作成した index.html を探し，右側にドロップダウンもしくは左クリックからアップロードを選択し，サーバーにアップロードします．

サイトを開いてみて以下のような画面が表示されれば成功です．

文字化けしてしまう場合

アップロードまででき何かしらのコンテンツが表示されているが，文字化けしてしまっているという場合は文字コードの設定があっていません． FFFTPの設定をUTF-8で統一してからアップロードしなおしてみてください．

さいごに

以上でホームページの制作は終わりです．文字だけのサイトならこのようにして簡単に制作することができます．動きのあるサイトやレイアウトを細かく調整しようとするとCSS や JavaScriptの勉強が必要になる(？)のですが，管理人がそこまでのレベルに至っていないため今回はここまでです．詳しくはhtml や css, javascript で検索してみてください．色々出てくると思います．また，ウェブサイトのソースが見たければ，ブラウザの「その他のツール」から「開発者ツール(*)」をクリックするとサイトのもとになっているファイルを以下のように見ることができます．

色々見て色々試してみてください．
* 使用しているブラウザによって名前が異なります．どうしても見つからなかったら一か八かで shift + ctrl + I でも押してみてください．ChromeとEdgeならこれで開きます．