カテゴリ

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

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

本記事では、

[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]

このような人に向けて下記の内容を解説します。

[box03 title=”目次【記事の内容】”]

  1. ホームページを作成する方法

[/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]

[/jin-iconbox12]

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

[jin-iconbox12]

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

[/jin-iconbox12]

レンタルサーバーの契約

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

mixhost↓

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

エックスサーバー↓

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

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

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

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

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サイト制作の仕事を発注すると、フリーランサーが応募してくるので、その中から良さそうな人を選んで依頼する、という感じです。

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

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

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

RELATED POSTS

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

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

プログラミングのイベントに参加しても成長しない人の特徴

プログラミングの学習は、知識の詰め込みじゃない

友達がいない ＝ 「最強の武器」になる理由

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

【筋トレ】1日1回でも筋肉はつく【継続が命】

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

COMMENT FORM

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です