• HOME
  • HTML/CSS
  • Webサイトを制作するためのHTML/CSSの始め方を解説
  • HTML/CSS
  • progate
  • Visual Studio Code
  • レンタルサーバー

Webサイトを制作するためのHTML/CSSの始め方を解説

Webサイトを制作するためのHTML/CSSの始め方を解説

Webサイトを開設したいけど何から始めたらいいかわからないという人もいると思います。商品やサービスの販売や紹介、ブログのためにWebサイトを作りたくても初めはわからないことだらけです。

Webサイトを始めるにはHTML/CSSの知識が必要です。また、HTML/CSSを始めるまでの事前準備やコードを書き終わった後のWebサイトの公開までの手順も知っておく必要があります。

外注もできますが価格が10万円～がほとんどであり、資金に余裕がなければできません。反対に自分でできるようになれば、コストの削減になります。本記事では初心者でもWebサイトを制作するためのHTML/CSSの始め方を解説します。

HTML/CSSでWebサイト制作の始め方

HTML/CSSでWebサイトを制作するために以下の手順で行います。

  1. 環境構築
  2. HTML/CSSの勉強
  3. HTML/CSSでサイトを作る
  4. 作ったサイトをサーバーにアップロードする

初めてWebサイト制作をする人は1～4までやる必要がありますが、一度やってしまえば3と4の繰り返しになります。ただし、HTML/CSSの勉強は常に続けることをおすすめします。１つのWebサイトに使われる知識はHTML/CSSの一部です。

他のサイトや新しいWebサイト制作に挑戦して知識に深みを持たせることをおすすめします。知識に広さや深みがあれば、自作サイトだけでなく、Webサイト制作の依頼を受けることができるようになります。

新たな収入源となる可能性も高いので、知識は常にアップデートすることをおすすめします。

始め方①：HTML/CSSの環境構築

HTML/CSSを始めるための環境をPC内に構築します。環境構築というと難しいイメージがあるかもしれませんが、HTML/CSSでは以下の２つを用意するだけです。

  • ブラウザ
  • テキストエディタ

ブラウザはWebページの表示をさせるためのアプリです。PCを買えばインターネットエクスプローラーやMicrosoft Edgeなどのブラウザが用意されているため、初めは特別に用意する必要はありません。

しかし、ユーザーはGoogle ChromeやFireFoxなど様々なブラウザを使用しています。ブラウザによって表示のされ方が若干違うので、ある程度慣れてきたら他のブラウザも用意してください。

テキストエディタは「メモ帳」などのテキストを書くためのツールです。WindowsのPCに標準を搭載されているメモ帳でもいいですが、コーディングのしやすいエディタが無料で公開されています。

自動でタグが入力されたり、予測変換システムがあるなど、効率的にミスが少なくコードを書けるので、コーディングに特化したエディタを使うことをおすすめします。おすすめのエディタは「Visual Studio Code」です。

本記事公開時点ではVisual Studio Codeの人気があります。利用者数が多いことから、たくさんの情報がWeb上にあるため初心者にもおすすめです。

始め方②：HTML/CSSの勉強

学習サイトや入門本で基礎知識を得る

事前準備ができたら、学習サイトや入門本で基礎知識を習得します。まずコードが書けなければ、Webページを制作することができません。まず、HTMLのタグの役割や書き方、CSSのセレクタ、プロパティと値で何ができるかを学ぶことをおすすめします。

おすすめの学習方法はオンラインのプログラミング学習サービスである「Progate」です。Progateはブラウザ上でコードを書きながら、プログラミングを学習するサービスです。初心者でも感覚的に理解できるため、最初に学ぶにはおすすめです。

Progateはブラウザ上でコードを書けるため、自分のPC上でエディタを使ってコードを書く必要がありません。しかし、一通り終わったら、自分のPC環境上でもコードを書いて、同じようにWebページを表示できるか確認することをおすすめします。

おすすめの流れとしては「Progate(HTML/CSSコース）を一周」⇒「用意したエディタで同じコードを書く」⇒「エディタで書いたコードが正しく表示されるか確認する」です。

実際のサイトやデザインファイルからページを作る

Progateなどの学習サイトや入門本である程度コードが書けるようになったら、実際のWebページを再現する「模写コーディング」やWebサイト上で無料に公開されているデザインファイルからコーディングに挑戦してみましょう。

Web サイトを作る流れに慣れることで、コーディングに自信がつきます。また、基礎学習では見えなかった課題や前後のコードの影響を自分で分かるようになります。模写におすすめのサイトは以下の通りです。スライドショーなどの機能はHTML/CSSでの実装は難しいので無視してOKです。

また、無料のデザインファイルを公開しているおすすめのサイトは以下の通りです。

本サイトでも無料のデザインファイルを公開しています。

【無料】実務のスキルが身に付くコーディング教材（初心者編）

始め方③：HTML/CSSで自作サイトを作る

デザイン

一通りHTML/CSSでWebサイトを作れるようになったら自作サイトを作ります。自作する上で初心者が躓くのがデザインです。今までは、与えられたデザインをコードするだけでしたが、自作となるとデザインを作らなければ行けないと思ってしまいます。

しかし、イチから全部作る必要はありません。自分のサイトの目的とよく似たサイトを見つけて構成を少し変えるだけでもOKです。例えば、ブログサイトでデザインが気に入ったものがあれば、流用しましょう。

その中でサイドバーをつけるや項目を増やすなど自分なりのアレンジを加えれば十分自作サイトと言えます。デザインが決まらなくて進まないならば、お気に入りのサイトを参考にする方がいいです。

コードを書く

デザインが決まったら、コードを書きます。コードを書くことに関しては勉強してきたことを使っていけばできるはずです。しかし、その中でどうしてもできないことがあればGoogle検索で答えを見つけてください。

初心者が悩むポイントは多くの人が通っています。Webで検索すれば、質問サイトに似たような質問があったり、ブログで解決方法を示している人もいます。検索のコツは何ができないかを明確にして単語で区切ることです。

例えば、要素の横並びが等間隔ならない場合です。悩みは「htmlの要素が等間隔で横並びにならないこと」です。検索は「html　要素　横並び　等間隔」です。単語数は2～4個がおすすめです。

始め方④：作ったサイトをサーバーにアップロードする

サイトが完成したらサーバーにアップロードします。サーバーにアップロードすることでWeb上に公開されます。レンタルサーバーを契約することで誰でも簡単にWebサイトを公開することができます。

おすすめのレンタルサーバーは以下の通りです。コストやサーバーの速度、サポートなど総合的に自分に合ったものを選ぶことをおすすめします。

まとめ

HTML/CSSの始め方は「エディタを用意する」⇒「学習する」の２ステップです。さらに、Webページを公開するまでに「Webページを自作する」⇒「サーバーにアップロードする」という操作が必要になります。

多く感じるかもしれませんが、一つ一つは難しくありません。ステップごとに基礎をしっかり理解し、進めていけばあなたもWeb制作エンジニアの仲間入りです。