
こんにちは、マルユメ@ブロガーです。
本記事では、
[chat face=”chara1.png” align=”left” border=”gray” bg=”gray” style=”maru”]ホームページを作成する方法が知りたい![/chat]
[chat face=”chara2.png” align=”left” border=”red” bg=”red” style=”maru”]ホームページを作成したいけど、方法がわからない![/chat]
[chat face=”chara3.png” align=”left” border=”blue” bg=”blue” style=”maru”]ホームページを作成するオススメの方法が知りたい![/chat]
このような人に向けて下記の内容を解説します。
ホームページを作成する方法↓
1.HTML・CSSを直接書く
2.はてなぶろぐを使う
3.WordPressを使う
4.外注する手軽にブログ書きたい → 2
サイトを作って稼ぎたい → 3
一からサイトを作りたい → 1
サイト欲しいけど自分で作業はめんどくさい → 4— マルユメ@ブロガー (@maruyumeblog) November 2, 2019
[box03 title=”目次【記事の内容】”]
- ホームページを作成する方法
[/box03]
実際にプログラミングを独学で1年以上勉強してきた経験をもとに、ホームページを作成する方法を解説します。
この記事を読めば、ホームページを作成して公開する方法がわかります。
1. 【プログラミング】ホームページを作成する方法【4つ】
方法は、以下の通りです。
[jin-iconbox12]
- HTML・CSSを直接書く
- ブログサービスを使う
- ツールを使う
- 外注する
[/jin-iconbox12]
順番に説明していきます。
HTML・CSSを直接書く
一つ目の方法は、HTML・CSSを直接書く方法です。
この方法を実践すべき人は、
[jin-iconbox12]
- HTML・CSSを習得したい
- webサイトを一から作れるようになりたい
- web系のエンジニアになりたい
- webサイトの構造を深く理解したい
[/jin-iconbox12]
このように考えている人です。
理由としては、
[jin-iconbox12]
- html・cssを習得したい → 自分で書きながら作るので、十分習得できる
- webサイトを一から作れるようになりたい → 自分で一からコーディングするので、一から作れるようになります。
- web系のエンジニアになりたい → エンジニアになりたいなら、コードを書くべき
- webサイトの構造を理解したい → 一から作るので、深く理解できる
[/jin-iconbox12]
こんな感じ。
HTML・CSSを書いてみよう
これだけだと、いまいちイメージがわかないと思うので、ちょっとだけhtmlとcssを書いてみようと思います。
その前に、まずはエディタがないと始まらないので、持ってない方は適当なものをインストールしましょう。
おすすめのエディタ3選↓
[jin-iconbox12]
- atom
- visual studio code
- sublime text
[/jin-iconbox12]
インストールしたら、早速書いていきます。
とはいえ、やることは簡単で、以下のコードをエディタで書いてindex.htmlとして保存すればOKです。
めんどくさい人は、コピペでもいいですよ。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<p>これはサンプルページです</p>
</body>
</html>
結果を確認するには、index.htmlをダブルクリックして、ブラウザで開きます。
今回は、ボディ内に「これはサンプルページです」というテキストを入力したので、画面上に「これはサンプルページです」と表示されているのがわかると思います。
基本的には、こんな感じでコーディングしていきます。
html・cssを直接書きたい人の勉強方法
webサイトの作り方を学びたい人は、以下の二つから始めるとスムーズに勉強できると思います。
[jin-iconbox12]
- ドットインストール
- プロゲート
[/jin-iconbox12]
また、リファレンスをうまく活用していくことで、さらに上達すると思いますよ。
[jin-iconbox12]
[/jin-iconbox12]
作ったホームページを公開するには?
先ほど作ったindex.htmlファイルを公開するには、レンタルサーバーと独自ドメインが必要です。
レンタルサーバー↓
[jin-iconbox12]
[/jin-iconbox12]
独自ドメイン↓
[jin-iconbox12]
[/jin-iconbox12]
index.htmlを公開する具体的な手順は、以下の通り。
[jin-iconbox12]
- レンタルサーバーの契約
- 独自ドメインの取得
- ネームサーバーの設定(お名前.com)
- 取得した独自ドメインを、サーバーに追加
- サーバーのツールで、index.htmlファイルをアップロード
[/jin-iconbox12]
レンタルサーバーの契約
プランはいろいろありますが、一番安いやつで十分です。
mixhost↓
エックスサーバー↓
ちなみに、mixhostとエックスサーバーでは10日間の無料お試しがあるので、使ってみるのもアリです。
独自ドメインの取得
独自ドメインを取得するなら、お名前.com一択です。
ちなみに、.work1円とか、.xyz25円とか、かなり安いものがありますが、これは取得するときの金額で、更新するときは1000円とか3000円とかかかるので、注意してください。
ただ、1年で3000円とかなので、そんなに負担にはならないと思います。
ネームサーバーの設定(お名前.com)
続いて、ネームサーバーを設定します。これは、お名前.comNavi上で行います。
具体的な手順は、以下の通りです。
お名前.comNaviにログイン → ドメイン設定 → ネームサーバーの変更
ネームサーバーの変更画面にきたら、あとは簡単で、以下の画像の通りに設定します。
mixhost↓
xserver↓
念のため、リスト形式で載せておきますね。
mixhost
[jin-iconbox12]
- ns1.mixhost.jp
- ns2.mixhost.jp
- ns3.mixhost.jp
- ns4.mixhost.jp
- ns5.mixhost.jp
[/jin-iconbox12]
xserver
[jin-iconbox12]
- ns1.xserver.jp
- ns2.xserver.jp
- ns3.xserver.jp
- ns4.xserver.jp
- ns5.xserver.jp
[/jin-iconbox12]
取得した独自ドメインを、サーバーに追加
ネームサーバーを設定したら、次はサーバーの設定画面で、ドメインを追加します。
とはいえ、やることはめちゃくちゃ簡単なので、1分で終わります。
mixhostで説明すると、
マイページにログイン → サブドメイン → サブドメインの空欄に、取得した独自ドメインを入力
画像のサブドメインのところに、お名前.comで取得したドメインを入力して、作成をクリックします。
これで、ドメインが追加されました。
サーバーのツールで、index.htmlファイルをアップロード
最後に、index.htmlファイルをアップロードします。
方法としては以下の二つがありますが、
[jin-iconbox12]
- FTPソフトを使う
- サーバーの管理画面からアップロード
[/jin-iconbox12]
今回は、index.htmlだけをアップロードするので、より簡単な方法であるサーバーの管理画面からアップロードする方法で説明します。
といっても、やることは簡単で、
マイページにログイン → ファイルマネージャー →追加したドメインのフォルダに、index.htmlをアップロード
画像のように、ドメインのフォルダをクリックして、アップロードをクリックし、index.htmlを選択します。
ちなみに、ドメインのフォルダは、public_htmlフォルダの中にあります。
ファイルをアップロードすると、以下のように、index.htmlが追加されているのがわかると思います。
今回は、simpletimer.siteという名前のドメインに、index.htmlをアップロードしたので、実際にsimpletimer.siteにアクセスすると、これはサンプルページですというテキストが表示されているはずです。
これで、webサイトを一から作って公開することができました。
ブログサービスを使う
二つめの方法は、無料のブログサービスを使ってホームページを作る方法です。
この方法を実践すべき人は、
[jin-iconbox12]
- 今すぐブログを書きたい
- 無料でブログを書きたい
- 手軽にブログを書きたい
[/jin-iconbox12]
このような考えを持っている人です。
理由としては、
[jin-iconbox12]
- 今すぐブログを書きたい → サービスに登録するだけで、すぐ書き始めることができる
- 無料でブログを書きたい → 機能が追加された有料版もあるが、基本無料でブログが書ける
- 手軽にブログを書きたい → ブログサービスを使えば、簡単に記事を書いて投稿できる
[/jin-iconbox12]
こんな感じ。
とにかく、お金をかけず、かつすぐにブログを始めたい人向けの方法です。
おすすめのサービスとしては、
[jin-iconbox12]
- はてなブログ
- livedoorblog
[/jin-iconbox12]
この二つです。
ブログサービスには専用のアプリがあって、それを使うとスマホで記事編集してそのまま投稿できるので、かなり便利です。
電車の移動中とかって、だいたいYouTubeとか見ちゃうと思いますが、この時間をブログ執筆に回すだけで、だいぶ人生変わると思います。
ツールを使う
三つ目の方法は、ホームページを作成してくれるツールを使う方法です。
この方法を実践すべき人は、
[jin-iconbox12]
- プログラミングはできないけど、おしゃれなサイトを作りたい
- 手軽にかっこいいサイトを作りたい
- ブログで稼ぎたい
- サイトを作って稼ぎたい
[/jin-iconbox12]
こういった考えを持っている人です。
オススメのツールとしては、
[jin-iconbox12]
- WordPress
- WIX.com
[/jin-iconbox12]
この二つかなと思います。
ちなみに、目的別に分けると、
[jin-iconbox12]
- プログラミングはできないけど、おしゃれなサイトを作りたい → wix.com
- 手軽にかっこいいサイトを作りたい → wix.com
- ブログで稼ぎたい → wordpress
- サイトを作って稼ぎたい → wordpress
[/jin-iconbox12]
こうなります。
wixは、手軽にサイト作成できるけど、稼ぎたいならwordpressの方が応用力が高いです。
wordpressは、サーバーにインストールして使う
wordpressは、サーバーにインストールしてから使います。
mixhostで説明すると、
マイページにログイン → cPanelにログイン → スクリプト → WordPress
これで、以下のような画面が表示されるので、ここでWordPressをインストールできます。
外注する
最後の方法は、外注です。
この方法を実践すべき人は、
[jin-iconbox12]
- ホームページを作りたいけど、自分で作業するのがめんどくさい
[/jin-iconbox12]
このように考えている人です。
方法としてはいろいろありますが、
[jin-iconbox12]
- クラウドワークスで発注する
- ランサーズで発注する
- 制作会社に依頼する
[/jin-iconbox12]
こんな感じかなと思います。
クラウドワークスとランサーズでは、例えばwebサイト制作の仕事を発注すると、フリーランサーが応募してくるので、その中から良さそうな人を選んで依頼する、という感じです。
ちなみに、フリーランサーは個人なので、納期を守らない人もいれば、ちゃんとやってくれる人もいます。
一方、制作会社では、会社に依頼することになるのですが、ちょっと高いかなという印象があります。
どの方法が自分に合っているか、じっくり考えてみてください。