【初心者向け】基礎のHTMLコーディング手順とやり方まとめ【 WEBサイト制作】

2018年10月8日2022年8月15日

どうもWEB系フリーンラスのがむしゃらワーカーしゅう丸(@shumarukiti)です！

この記事では、

ホームページ制作に興味があってコーディングに挑戦したいけど、何から始めればいいかわからないな。コーディング手順と勉強方法もついでに知りたいな。

という疑問にお答えします。

この記事を書いている僕は未経験からプログラミングスクールでコーディングを勉強してWEB制作でご飯を食べるエンジニアになりました。
コーディングが出来るようになると、空いた時間にさくっとホームページ制作で稼げるようになります。

本記事では初心者向けにコーディング手順と勉強方法について語ります。
コーディングは勉強さえすれば誰でも身に付くスキルなので、ぜひこの記事を読んで挑戦してみてください。

TechAcademy：完全オンラインの大手スクール。
※1週間の無料体験授業あり。
TECH::EXPERT：オフラインの転職型スクール。
※転職できなければ受講料全額返金制度あり
WebCampPRO：転職を目標にプログラミングを学びたい方

プログラミングスクールでサクッと学びたい人は、TechAcademyがおすすめです。1週間の無料体験授業があるので、まずはどんなものか体感してみましょう。一歩踏み出すことが大切です。

\クリックするとTechAcademy公式HPに移動します/

TechAcademyの無料体験はこちら

〜本記事の内容〜

コーディング手順は5ステップです【初心者向け】
初心者のコーディング学習方法は3つ
初心者は実案件でコーディングスキルを上げるべき

コーディング手順は5ステップです【初心者向け】

コーディング手順は下記の5ステップです。

ステップ①：ファイル・フォルダを作る
ステップ②：制作するホームページのレイアウトを確認する
ステップ③：HTMLを書く
ステップ④：CSSでデザインを整える
ステップ⑤：レスポンシブ対応にする

〜実際に作るホームページ例〜

実際に上記のようなヘッダー、メイン、フッター、サイドで構成された基礎的なWEBサイトを作る手順について解説していきます。

制作の流れや、必要な知識がどんなものか知って欲しいので、全てを理解する必要はありません。ざっくり流れを理解しましょう。

ステップ①：ファイル・フォルダを作る

まずは制作するホームページのファイル・フォルダを作ります。

今回作るWEBサイトに必要なファイル・フォルダはこんな感じ。

奈良公園（フォルダ）
ーindex.html（ファイル）
ーstyle.css（ファイル）
ーimg（フォルダ）

必要なファイル・フォルダは作るWEBサイトによって異なりますが、だいたい上記の構成でOKです。

index.htmlにHTMLを書いて、style.cssにレイアウトを整えるCSSを書いて行きます。imgフォルダには画像を入れます。

ステップ②：制作するホームページのレイアウトを確認する

HTMLを書く前に作るホームページの構造を確認します。

WEBサイトはパーツが合わせってできているので、パーツに分解することで制作が楽になります。

今回は上記のようにパーツわけしました。

パーツわけせずにHTMLを直接書いてしまうと、初心者のうちは構造がごちゃごちゃになって途中で投げ出してしまいます。なので紙に構造を書いて、構造を理解する癖をつけておくことをおすすめします。

ステップ③：HTMLを書く

ここまできたらさっそくHTMLを書いて行きましょう！

必要最低限のコードはこんな感じ。

簡単にそれぞれのコードについて解説しておきます。

!DOCTYPE html … htmlを書くという宣言です。ないとエラーの原因になります。
meta charset … 文字エンコーディングのことです。
title … ホームページのタイトルです。タブ等に表示されます。
meta name=”description” … ホームページの紹介文です。
meta name=”viewport” … レスポンシブに対応させるためのコードです。

header … この中にheaderを書いて行きます。
main … この中にmainを書いて行きます。
side … この中にsideを書いて行きます。
footer … この中にfooterを書いて行きます。

とりあえずこのコードさえあればホームページの基盤はOK。