ワークショップ

VOL01HTML入門WEBサイトを作る

このワークショップはWEBサイトに必要なものを1からから解説し、HTMLとCSS(スタイルシート)の基礎をしっかり学習して、自分でWEBサイトを作成・公開まで行います。まずはこのワークショップの対象者と目的、やること/やらないこと、そして全体の流れを紹介していきます。

この記事のポイント

  • ワークショップでやること/やらないことを明確にする
  • ワークショップの全体の流れを知る

目次

ワークショップの対象者と目標

こちらのワークショップ「HTML入門 WEBサイトを作る」は、次のような方を対象としています。

  • HTMLとか分からないけど自分でWEBサイトを作ってみたい方
  • HTML&CSSを学び直したい方

目標はHTMLとCSSの基礎を身に付けることと、WEBサイトの公開に必要なものを自分で用意できるようになることです。

このワークショップでは1つずつ自分で手を動かしながら、WEBサイトを公開するまでの一通りの流れを身に付けられるような構成となっています。
ソースコードなどはコピペもできますが、できる限り自分で打つようにしてください。

ワークショップでやること/やらないこと

このワークショップのコンセプトは「HTML/CSSの書き方を身に付けて、WEBサイトとして公開する」です。
そこで、あらかじめやること/やらないことを明確にしておきます。
まずはこのワークショップでやることからお伝えします。

やること

  • HTMLマークアップ
  • CSSコーディング
  • サーバーの契約と設定
  • サイト公開

HTMLとCSSを用意することは必須ですが、先述の通りWEBサイトを誰もが見れる状態にするためにはサーバーも必要です。
このワークショップではサーバーも自分で手配して公開するところまではカバーします。

続いて、このワークショップではやらないことをお伝えします。

やらないこと

  • WEBサイトのデザインの作成
  • JavaScriptの導入
  • レスポンシブ対応
  • WordPressなどのCMS導入

HTMLとCSSの基礎に集中して取り組むため、WEBサイトのデザイン制作についてはあらかじめ用意したものを使って進めていきます。
また、付加機能となるJavaScriptの実装、様々なデバイスで表示を最適化するレスポンシブ対応は行いません。
また、WEBサイトの管理で広く使われているWordPressのようなCMS(Contents Management System)の導入も行いません。

まずはとにかく、WEBサイトの根幹となるHTML/CSSのコードを自分で作れるようになることを目指していきましょう。

ワークショップの流れ

このワークショップの全体的な流れを、目次形式で紹介します。
上から順に進めていくことを前提としています。

WEBサイトに必要なもの
  1. WEBサイトの公開に必要なもの
  2. HTMLファイル
  3. サーバー
  4. ドメイン
  5. ブラウザ
  6. SSL証明書(https)
  7. より高機能なWEBサイトを作るためには
HTMLの基礎 文法と書き方
  1. HTMLの書き方
  2. HTMLに必ず必要な5つの要素
  3. HTMLファイルを作る
CSS(スタイルシート)の基礎
  1. CSS(スタイルシート)とは
  2. CSSを書く場所
  3. CSSの書き方
WEBサイトのデザイン
  1. 作成するWEBサイトを考える
  2. 構成を書き出す
  3. デザインを作成する
HTMLファイルを作成する
  1. デザインからHTML構造を考える
  2. デザインから画像を切り出す
  3. HTMLをマークアップ
CSSを作成する
  1. HTMLファイルにCSSを書く
  2. リセットCSSを適用する
ヘッダーのCSSを書く
  1. id、class、要素名のセレクタを使う
  2. CSSを書く
  3. CSSの解説
コンテンツのCSSを書く
  1. CSSを書く
  2. CSSの解説
フッターのCSSを書く
  1. CSSを書く
  2. CSSの解説
2ページ目を作成する
  1. 2ページ目のHTMLファイルを作成
  2. デザインからHTMLをマークアップする
CSSを外部ファイルにする
  1. トップページのCSSを外部ファイルにする
  2. 外部ファイルのCSSを読み込む
  3. 2ページ目も同じCSSを読み込む
2ページ目のCSSを書く
  1. コンテンツのCSSを書く
  2. CSSの解説
3ページ目を作成する
  1. 3ページ目のHTMLファイルを作成
  2. デザインからHTMLをマークアップする
  3. CSSを読み込む
3ページ目のCSSを書く
  1. コンテンツのCSSを書く
  2. CSSの解説
サーバーを用意する
  1. サーバーの種類
  2. レンタルサーバーを契約する
  3. ドメインを確認する
サイトを公開する
  1. FTP接続をする
  2. サイトのファイルをサーバーにアップロードする
  3. ブラウザで表示する

次回からはまずWEBサイトに必要なものから確認していきます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。