HTML実践学習17 WEBサイト制作の進め方

ITリテラシー学習
ITリテラシー学習

WEBサイト制作の進め方を初心者の方にもわかりやすく説明していきます。

WEBサイトの制作の進め方

WEBサイトの制作は慣れていない人にとっては何から手をつければ良いのかわかりません。制作の進め方は人によって変わりますが、一般的には下記の流れで制作することが基本とされています。

(1)html要素、head要素、body要素を配置
(2)doctype宣言を記述
(3)head要素内を必要な項目のみ記述
(4)body要素内で大きなブロックごとに要素を配置(header要素、nav要素、div要素、footer要素など)
(5)各ブロックごとに制作

下記は(4)まで対応したソース例です。ページの上から記述するのではなく、先に必要となる要素をブロックごとに記述してしまいましょう。全体を俯瞰して制作を進めることで、体裁や表現の揺れなどのミスを防ぐことができます。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<header>
<nav>
</nav>
</header>
<div>
</div>
<footer>
</footer>
</body>
</html>

POINT

制作はページの上から進めるのではなく、まずブロックごとに要素を並べましょう。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました