コーポレイトサイトをHTML&CSSで作成しよう

本チュートリアルでは、HTML コーディングを学びます。

Web制作のフローを理解しよう

基本的に、Web制作は以下の4つのフローで進められます。

1. 要件定義
2. デザインカンプ作成
3. HTML コーティング
4. WordPress化

要件定義とは、ヒアリングや打ち合わせを通じて、顧客が何を求めているのかを明確にする作業のことです。要件定義を通じて顧客の求めているサイトイメージを明確にしたあと、Webデザイナーがサイトの完成イメージ（デザインカンプ）を作成します。このデザインカンプをもとにWebサイトの制作を行います。

本チュートリアルでは、「3. HTML コーティング」を扱います。

なお、デザインカンプとは以下のようなものです。

このチュートリアルで制作するもの

弊社のコーポレイトサイト（会社の公式サイト）を再現して作ってみましょう。

チュートリアルでは各コードの解説を行いますが、コーディングに関する知識がゼロの状態だとチュートリアルの完走が難しくなるため、以下の受講条件を満たした状態で取り組むようにしましょう。

このチュートリアルのゴール

• ゼロからHTML / CSSでコーポレイトサイトを作れるようになる

受講条件

条件 1：HTML/CSS の基礎がわかる

まずは、基本的な HTML/CSS の扱い方を知っている必要があります。本チュートリアルでは、そもそもの「HTML とは？」のように基本的な部分の解説は割愛しています。

HTML と CSS が Web ページをコーディングする上で、それぞれどのような役割を担っているのかは無料のチュートリアルなどで学ぶようにしましょう。

>> Web サイト制作の基本となる HTML・CSS を学ぶ

条件 2：JavaScript の基礎がわかる

本チュートリアルで制作するコーポレートサイトでは、JavaScirpt を活用したインタラクション処理（ページ内リンクのスムーズなスクロール、コンテンツがふわっと浮き上がるフェードイン機能など）を実装します。

JavaScript についても、HTML/CSS 同様に基本的な扱い方を習得しておきましょう。

>> Web サイト制作の基本となる JavaScript を学ぶ

条件 3：Bootstrap の基礎がわかる

従来の Web サイト制作では、1 つの Web サイトを作り上げるには、大量の CSS コードを記述する必要がありました。しかし、現在では Web サイトを構成する汎用的なパーツを集めた「フレームワーク」と呼ばれる技術を利用できるようになり、CSS コードを全く書かずに、見た目の整った Web ページをコーディングできるようになっています。

Web 制作を本業とする制作会社では、フレームワークを使わずに独自の CSS 実装だけで Web サイトを制作することも多々ありますが、デザインパターン（頻出度の高い Web サイトのレイアウトパターン）を学ぶ意味でも、まずはフレームワークを活用した Web サイトの制作方法を習得しましょう。

本チュートリアルでは、Web 制作のフレームワークとして人気の高い「Bootstrap」を利用しています。Bootstrap についても、まずは基本的な知識を無料のチュートリアルなどで学ぶようにしましょう。

>> Web サイト制作を効率よく行うフレームワークとして Bootstrap を学ぶ

条件 4：PHP の基礎がわかる

本チュートリアルの応用編として用意されている WordPress 編のカリキュラムでは、デザインカンプからコーディングした HTML モックを最終的に WordPress 化する方法を学びます。

HTML/CSS だけでコーディングした静的な Web サイトを作るには、PHP を習得する必要はありませんが、実際の Web サイト構築では、HTML で制作した Web ページを WordPress 化するまでが一連の業務となります。

応用編の WordPress では、オリジナルテーマ開発という手法で WordPress 化されたコーポレートサイトを構築していくので、PHP の前提知識が必要となります。

PHP についても、基本的な知識を無料のチュートリアルなどで学ぶようにしましょう。

>> WordPress のテーマ開発に必要な PHP を学ぶ

まとめ

この章では、本チュートリアルを完走するために必要となる受講条件について確認しました。

これらの基礎知識をベースに、本チュートリアルを通して実践的な Web 制作のスキルを習得していきましょう。

次のレッスンは「HTML・CSSの開発環境を準備しよう」です。