HTML と CSS の基礎を深めたい人がやる学習例


```
研修が進んだら、更新予定
```

# はじめに
## 前提

* HTML や CSS の制作経験がない方向け
* 過去コーディング経験があっても、基本がよくわかってない人向け

## 説明

サイト制作初心者のための学習例を紹介する

# 1. まずはこの本をやれ

この本。相当穴あきだった知識が繋がり、理解が深まった

[よくわかるXHTMLとCSSによるWebサイト作成 (よくわかるトレーニングテキスト)](http://www.amazon.co.jp/%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8BXHTML%E3%81%A8CSS%E3%81%AB%E3%82%88%E3%82%8BWeb%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E6%88%90-%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8B%E3%83%88%E3%83%AC%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-%E5%AF%8C%E5%A3%AB%E9%80%9A%E3%82%AA%E3%83%95%E3%82%A3%E3%82%B9%E6%A9%9F%E5%99%A8/dp/4893116207/ref=sr_1_1?ie=UTF8&qid=1417346425&sr=8-1&keywords=%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8B+XHTML)

![画像](http://i.imgur.com/6Oe07vp.png)


* これで基本的な事は学べる
* 入社後まず渡された本
* 入社して一週間後に、総合演習のテストを実施
* 熟読していれば、100点をとれるはず


##  この本のいいところ

* 基礎を親切丁寧に教えてくれ、わかりやすい
* 演習で実際に簡単なサイトを作るので、クラス、ID、疑似やアンカーリンク、テーブル、二段組など理解できる

# 2. 試しにコードを書いてみる

* 業務以外で与えられた宿題課題
* 簡易な設計図を渡され、できあがったら先輩にレビューしてもらう
* XHTML 的な書き方になっていると思うので、HTML5 をよく書いてる人にレビューしてもらい、HTML5 的な書き方も学ぶ
* 親切な先輩は、便利な書き方も教えてくれる

# 3. 試しサイト作る

* 業務以外で与えられた宿題課題
* できあがっているサイトの画像2枚(hover on と hover off)を渡される
* 開発期間は <del>3週間と3日(一週目：設計、二週目：画像切り出し、三週目：コーディング、一次レビュー、４週目：提出)</del>→これが会社が用意してくれたスケジュールだが、前倒しで提出できそうだったので日程変更してもらった。↓
* 開発期間は、サイト設計(6日)、画像スライス(2日)、HTMlコーディング(2日)、CSSコーディング(4日)、一次レビュー(1日)、修正(2日)、最終レビュー(1日)、合計18日間。
* 大体のスケジュールをもらい、進捗報告を毎日達成率%で報告
* 週末に進捗と問題点を報告

## 設計手順

```サイト設計手順
0. 設計がどんなものか、はじめに他の人が書いたものをみせてもらう
1. 作るサイトをカラー印刷する
2. 使う要素を洗い出し、紙等に手書きで書き込んでいく

 * 見出し
 * 段落
 * リスト
 * 表組み
 * 画像
 * リンク
 * グループ化(ブロック要素、インライン要素)

3. 詳細の値をピックアップ

 * 色(画像)
 * フォントサイズ
 * フォントカラー
 * line-height
 * 各要素の margin/padding
 * 罫線(px/線種/色)
 * 各ブロックのパターン
 * 他パターンがあれば、パターンの洗い出し

4. ID/CLASS の設定
5. 再度自分でレビュー
6. コンテンツのテキストをコーディングしやすいよう、メモ帳等で書き出す(必須ではない)

```

### 設計時参考サイト

設計手順
[学校ではおしえてくれないweb制作の現場](http://web-genba.com/blog/archives/category/genba/)

コーディングルール
[ワンランク上の HTML コーディングを行うための18のポイント](http://baigie.me/sogitani/2013/11/html_step_up/)

WEB デザイン系
[バンクーバーのうぇぶ屋](http://webya.opdsgn.com/)
[Web クリエイターボックス](http://www.webcreatorbox.com/)

### メモ
* 緑の本の次に、現場の先輩等にオススメの html, css 本を聞き、それも傍ら進める
* 現場の過去制作実績サイトを比較しまくる→表記ルールが知れてよい！
* いいなと思うサイトのコードを見てみる
* タスク管理と進行管理は、[trello](https://trello.com) が便利

## 画像切り出し

* Photoshop で、画像箇所をスライスし、切り出しをする。

### 参考サイト

画像スライス
http://www.webcreatorbox.com/tech/photoshop-slice/

ガイド線
http://retouch-weblab.com/kennkyuu/guidegrid/guide.html

## HTML コーディング

* きちんと細かく設計していれば、迷う事なくコーディング完了できるはず

## CSS コーディング

* ヘッダー、ボディ、フッター毎に、何をすべきか trello リストに書き出し、1つずつ修正
* わからない表現が出てきた場合は、全て調べたものを、trello コメント欄に残しておく。後で纏めたり、見返す時に便利。
* 一次レビュー前に、ブラウザの要素の検証等で、構成チェック

## 一次レビュー

* レビュー後、修正すべき箇所を、trelloでリスト化し、どんどん修正。

## 修正

* ここまでくれば、後一息。最終レビューに向けて、納得いくまで修正。

## 最終レビュー

* ありがたき、最終レビュー。きちんとレビューしてもらえたら、終了！

```
ここまでのただの感想

サイト作成完了！初めての設計、とっても楽しかったです。
今まで目に見えない裏側のプログラムや、既にあるもののサイト更新とは違い、
すぐ目に見える成果ってのが、何より嬉しい。また次の課題も、頑張ります。
```

# 4. 試しサイト作る　その２

* 更にレベルアップをしたサイト作成を実施する
* 作成ページは、トップページ + もう1ページ
* html, css, だけでなく、javascript の「サイドメニューをクリックしたらサブメニューが表示される動作」「トップページのメイン写真を５秒毎に3枚の写真に変更する動作」をつける
* 手順は「3. 試しサイト作る」と同様

# 5. 制作ツールについてのレポート作成

* 現場で使う、制作ツールについてのレポート

# 6. 制作ツールを使ったサイト作成

* レポートの次は、サイト作成を実践

## 自分のサイトを作成

* 6 の課題を独学できるように、自分のサイトを作成する
* 「ドメイン」「レンタルサーバ」を契約！
* ファイル転送用ソフトをインストール＆設定
* わくわく（余談）

# 7. 新たなweb本のレポート作成