HTML学習の用意②制作するサイトの準備【HTMLの書き方入門】

本講座では、WebサイトをコーディングしながらHTMLの基礎を習得します。
まずは、これから作るサイトを確認して、必要なファイルをまとめるフォルダを作りましょう。

• 1.制作するサイトの確認
• 2.Webサイト制作用のフォルダを準備
• 使用素材ダウンロード
• フォルダを作る

1.制作するサイトの確認

Illustrator基礎講座で使用したデザインをコーディングしていきます。

HTMLだけでコーディングすると左のようになり、
CSSも書くと、右のようにデザインがWebページとして再現されますよ。

本講座ではHTMLの完成、上図の左側を作ります。
CSSの作成は【CSSの書き方入門 - はじめてのWEBデザイン】で解説しています。本講座を終えた後にご受講ください。

2.Webサイト制作用のフォルダを準備

WEBサイトを作るとき、適当な場所にHTMLファイルや画像を保存するとわかりにくくなります。
コーディングしていくサイトは1つのフォルダにまとめましょう。

使用素材ダウンロード

Illustrator講座ではトップページのデザインを作りました。
HTML講座ではトップページに加えて、会社概要とお問い合わせページも作成します。

コーディングに必要な画像やテキストをご用意しております。
下記よりダウンロードして、解凍して下さい。

ダウンロードはこちら

フォルダを作る

作成するサイトの社名から、「edbase」というフォルダを作ります。
解凍した素材フォルダの中にある「images」フォルダを、丸ごと「edbase」フォルダの中に移動させてください。

赤線で囲ったような構成になっていればOKです。