【プログラミング】ホームページを作成する方法【4つ】

2019/11/15 2019/12/19

こんにちは、マルユメ@ブロガーです。

本記事では、

[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つ】

【プログラミング】ホームページを作成する方法【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>

【プログラミング】ホームページを作成する方法【4つ】

結果を確認するには、index.htmlをダブルクリックして、ブラウザで開きます。

今回は、ボディ内に「これはサンプルページです」というテキストを入力したので、画面上に「これはサンプルページです」と表示されているのがわかると思います。

【プログラミング】ホームページを作成する方法【4つ】

基本的には、こんな感じでコーディングしていきます。

html・cssを直接書きたい人の勉強方法

webサイトの作り方を学びたい人は、以下の二つから始めるとスムーズに勉強できると思います。

[jin-iconbox12]

ドットインストール
プロゲート

[/jin-iconbox12]

また、リファレンスをうまく活用していくことで、さらに上達すると思いますよ。
[jin-iconbox12]

[/jin-iconbox12]

作ったホームページを公開するには？

先ほど作ったindex.htmlファイルを公開するには、レンタルサーバーと独自ドメインが必要です。

レンタルサーバー↓
[jin-iconbox12]

[/jin-iconbox12]

独自ドメイン↓
[jin-iconbox12]

お名前.com

[/jin-iconbox12]

index.htmlを公開する具体的な手順は、以下の通り。

[jin-iconbox12]

レンタルサーバーの契約
独自ドメインの取得
ネームサーバーの設定（お名前.com）
取得した独自ドメインを、サーバーに追加
サーバーのツールで、index.htmlファイルをアップロード

[/jin-iconbox12]

レンタルサーバーの契約

プランはいろいろありますが、一番安いやつで十分です。

mixhost↓

【プログラミング】ホームページを作成する方法【4つ】

エックスサーバー↓

【プログラミング】ホームページを作成する方法【4つ】

ちなみに、mixhostとエックスサーバーでは10日間の無料お試しがあるので、使ってみるのもアリです。

【プログラミング】ホームページを作成する方法【4つ】

独自ドメインの取得

独自ドメインを取得するなら、お名前.com一択です。

【プログラミング】ホームページを作成する方法【4つ】

ちなみに、.work1円とか、.xyz25円とか、かなり安いものがありますが、これは取得するときの金額で、更新するときは1000円とか3000円とかかかるので、注意してください。

ただ、1年で3000円とかなので、そんなに負担にはならないと思います。

ネームサーバーの設定（お名前.com）

続いて、ネームサーバーを設定します。これは、お名前.comNavi上で行います。

具体的な手順は、以下の通りです。

お名前.comNaviにログイン → ドメイン設定 → ネームサーバーの変更

ネームサーバーの変更画面にきたら、あとは簡単で、以下の画像の通りに設定します。

mixhost↓
【プログラミング】ホームページを作成する方法【4つ】

xserver↓
【プログラミング】ホームページを作成する方法【4つ】

念のため、リスト形式で載せておきますね。
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で説明すると、

マイページにログイン → サブドメイン → サブドメインの空欄に、取得した独自ドメインを入力

【プログラミング】ホームページを作成する方法【4つ】

画像のサブドメインのところに、お名前.comで取得したドメインを入力して、作成をクリックします。

これで、ドメインが追加されました。

サーバーのツールで、index.htmlファイルをアップロード

最後に、index.htmlファイルをアップロードします。

方法としては以下の二つがありますが、

[jin-iconbox12]

FTPソフトを使う
サーバーの管理画面からアップロード

[/jin-iconbox12]

今回は、index.htmlだけをアップロードするので、より簡単な方法であるサーバーの管理画面からアップロードする方法で説明します。

といっても、やることは簡単で、

マイページにログイン → ファイルマネージャー →追加したドメインのフォルダに、index.htmlをアップロード

【プログラミング】ホームページを作成する方法【4つ】

画像のように、ドメインのフォルダをクリックして、アップロードをクリックし、index.htmlを選択します。

ちなみに、ドメインのフォルダは、public_htmlフォルダの中にあります。

ファイルをアップロードすると、以下のように、index.htmlが追加されているのがわかると思います。

【プログラミング】ホームページを作成する方法【4つ】

今回は、simpletimer.siteという名前のドメインに、index.htmlをアップロードしたので、実際にsimpletimer.siteにアクセスすると、これはサンプルページですというテキストが表示されているはずです。

【プログラミング】ホームページを作成する方法【4つ】

これで、webサイトを一から作って公開することができました。

ブログサービスを使う

二つめの方法は、無料のブログサービスを使ってホームページを作る方法です。

この方法を実践すべき人は、
[jin-iconbox12]

今すぐブログを書きたい
無料でブログを書きたい
手軽にブログを書きたい

[/jin-iconbox12]

このような考えを持っている人です。

理由としては、

[jin-iconbox12]

今すぐブログを書きたい → サービスに登録するだけで、すぐ書き始めることができる
無料でブログを書きたい → 機能が追加された有料版もあるが、基本無料でブログが書ける
手軽にブログを書きたい → ブログサービスを使えば、簡単に記事を書いて投稿できる

[/jin-iconbox12]

こんな感じ。

とにかく、お金をかけず、かつすぐにブログを始めたい人向けの方法です。

おすすめのサービスとしては、

[jin-iconbox12]

はてなブログ
livedoorblog

[/jin-iconbox12]
この二つです。

ブログサービスには専用のアプリがあって、それを使うとスマホで記事編集してそのまま投稿できるので、かなり便利です。

電車の移動中とかって、だいたいYouTubeとか見ちゃうと思いますが、この時間をブログ執筆に回すだけで、だいぶ人生変わると思います。

はてなブログ

株式会社はてな無料posted withアプリーチ

livedoor Blog

LINE Corporation無料posted withアプリーチ

ツールを使う

三つ目の方法は、ホームページを作成してくれるツールを使う方法です。

この方法を実践すべき人は、

[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をインストールできます。

【プログラミング】ホームページを作成する方法【4つ】

外注する

最後の方法は、外注です。

この方法を実践すべき人は、

[jin-iconbox12]

ホームページを作りたいけど、自分で作業するのがめんどくさい

[/jin-iconbox12]

このように考えている人です。

方法としてはいろいろありますが、

[jin-iconbox12]

クラウドワークスで発注する
ランサーズで発注する
制作会社に依頼する

[/jin-iconbox12]
こんな感じかなと思います。

クラウドワークスとランサーズでは、例えばwebサイト制作の仕事を発注すると、フリーランサーが応募してくるので、その中から良さそうな人を選んで依頼する、という感じです。

ちなみに、フリーランサーは個人なので、納期を守らない人もいれば、ちゃんとやってくれる人もいます。

一方、制作会社では、会社に依頼することになるのですが、ちょっと高いかなという印象があります。

どの方法が自分に合っているか、じっくり考えてみてください。

COMMENT FORM

「プログラミングをしていると、眠くなる」→ 寝たほうがいいです。

2019/10/26

「なぜMacでプログラミングをするのですか？」→ かっこいいからです。

2019/11/16

【プログラミング】ホームページを作成する方法【4つ】

1. 【プログラミング】ホームページを作成する方法【4つ】

HTML・CSSを直接書く

HTML・CSSを書いてみよう

html・cssを直接書きたい人の勉強方法

作ったホームページを公開するには？

レンタルサーバーの契約

独自ドメインの取得

ネームサーバーの設定（お名前.com）

取得した独自ドメインを、サーバーに追加

サーバーのツールで、index.htmlファイルをアップロード

ブログサービスを使う

ツールを使う

wordpressは、サーバーにインストールして使う

外注する

RELATED POSTS

損しない投資信託の運用方法とは【分散投資が全て】

【体験記】文系大学生が一年間プログラミングを勉強した結果

「プログラミングは何から始めるべき？」← この疑問に答えます

プログラミングを勉強してwebサービスを作るには？

「プログラミングスクールを受講したけど、ついていけない(;_;)」← こうならないためにすべきこと

プログラミングとwebデザインを同時に学ぶ方法とは？

おすすめのオンラインプログラミングスクール3選【無料体験、説明会付き】

失敗しない副業の選び方【ポイントは３つある】

COMMENT FORM

PREV POST

「プログラミングをしていると、眠くなる」→ 寝たほうがいいです。

NEXT POST

「なぜMacでプログラミングをするのですか？」→ かっこいいからです。