ウェブログラム ~学習するな実践せよ~

「HP作成方法」から「HP公開方法」まで4ステップを解説!

Webサイトがどのような流れで作成されて、どのような流れで公開されるのかをざっくりと見ていきましょう。
実際にサイト作成に取り掛かる前に、「作成から公開まで」の全体像をざっくりとイメージするのはとてもオススメです。

先に行っておきますが、Webサイトを作るにはHTML、CSSという技術が必要になります。

ざっくりとした流れ

単純なWebサイトであれば以、以下の流れで公開までできちゃいます。
この辺は、Web制作・開発を行う上での基礎なのでしっかりと抑えておきましょう!

Webサイト作成から公開までの流れ
  1. サイト作成に必要な環境を用意する
  2. WebサイトをHTML、CSSを使って作る(コーディングする・知識をつける)
  3. サーバをレンタルして、ドメインを購入
  4. 2で作成したサイトをサーバへアップロード

※Webサービスになると、難易度は跳ね上がります(WebサービスとはSNSやAmazonのようなECサイト等々)

では、一つひとつ解説していきます。

サイト作成に必要な環境を用意する

サイトを作っていく上で、必ず必要になるものがブラウザとエディタです。

ブラウザ

ブラウザは「Chrome」や「Firefox」、「Microsoft Edge」とかですね。(IE使っていてもいいこと無いので、使わないでおきましょう。)
ブラウザはこだわりなければChromeを使いましょう。当ウェブログラムではChromeを前提に学んでいきます。

ブラウザ

エディタ

エディタというのは、HTMLやCSSというファイルを作成して、保存するためのものです。
実はWindowsのメモ帳でも書けなくはないのですが、機能が全くないのでやめておきましょう。

このHTML最速入門では、「Atomというエディタ」を使用していきます*。はじめは機能が沢山あり混乱しますが、必ず使えるようになります!

WebサイトをHTML、CSSを使って作る(コーディングする・知識をつける)

まずHTMLとCSSが、どういうものなのかをざっくりと理解しましょう。

HTMLとは

HTMLはWebサイトを作るための骨組みのようなものです。

index.html
<h1>ウェブログラムです!</h1>

このようにタグと呼ばれるもので、文字列を囲って記述します(詳しい説明は続きの記事で!)。

CSSとは

CSSはHTMLで記述した骨組みにデザインをつけるためのものです。

style.css
h1 {
color: blue;
}

このように書くことで、前のindex.htmlというファイルのh1タグの文字に色をつけてます。h1タグ内の文字「ウェブログラムです!」は青くなります。

このようにHTMLで骨組みを作って、CSSでデザインをするという流れで、Webサイトは作られます。どちらが書けてもちゃんとしたWebサイトは作れません。

サーバをレンタルして、ドメインを購入

HTMLとCSSを使ってサイトができて出来たら、いよいよ全世界に公開します。

公開する準備としてHTMLとCSSファイルを置く「サーバ」と、URLでアクセスするための「ドメイン」が必要になります。

サーバについて

HTML、CSSだけの単純なWebサイトであれば「レンタルサーバ」と呼ばれる、比較的安いサーバを借ります(初期費用1,000円位で、月額100円か~200円程度)

このサーバにHTML、CSSを置く(アップロード)することで、インターネット上に上がります(まだアクセスは出来ません)。アクセスするにはドメインが必要になります。

ドメインとは?

ドメインとは、ざっくり言うと「URL」のことです。

  • google.com
  • amazon.co.jp
  • webrogram.com

など、これらはドメインと呼ばれます。
ドメインを購入することで、自分の好きなURLで、自分のサイトにアクセスができるようになります(購入後はサーバへのドメインのヒモ付作業が必要ですが、今後説明します*)。

ドメインは初期費用1,500円くらいで、年間1,500円程度です(月額にすると100円少しですね)

サーバと合わせても月に数百円でサイトが公開できちゃいます。

※ドメインはピンきりなので、安いのだと100円以下、高いものだと5,000円ほどします(高いのはだいたい企業向けとかです)。

ちなみに「.com」のドメインは年間1,500円くらいです。

作成したサイトをサーバへアップロード

HTMLとCSSでサイトをが作成できたら、このファイルをサーバにアップロードする必要があります。
実はレンタルサーバの場合はとても簡単で、レンタルサーバの管理画面(契約時にアカウントがもらえる)からポチポチするだけでサーバにあがります。
このような画面がない場合は、Windowsであれば「FFFTP」や「WinSCP」、

MacOSであれば、「FileZilla」、「Cyberduck」のようなファイル転送ツールでアップロードが可能です。

まとめ

流れとしては、環境用意 ▶ サイト作成 ▶ サーバ・ドメイン購入 ▶ ファイルアップロードといったかんじです。

この流れは頭の片隅においておいてください。

また別のレッスン*で、実際にサーバ、ドメインを購入して、インターネット上に自分のサイトを公開するということをしていきまので、お楽しみに。