研修が進んだら、更新予定
はじめに
前提
- HTML や CSS の制作経験がない方向け
- 過去コーディング経験があっても、基本がよくわかってない人向け
説明
サイト制作初心者のための学習例を紹介する
1. まずはこの本をやれ
この本。相当穴あきだった知識が繋がり、理解が深まった
よくわかるXHTMLとCSSによるWebサイト作成 (よくわかるトレーニングテキスト)
- これで基本的な事は学べる
- 入社後まず渡された本
- 入社して一週間後に、総合演習のテストを実施
- 熟読していれば、100点をとれるはず
この本のいいところ
- 基礎を親切丁寧に教えてくれ、わかりやすい
- 演習で実際に簡単なサイトを作るので、クラス、ID、疑似やアンカーリンク、テーブル、二段組など理解できる
2. 試しにコードを書いてみる
- 業務以外で与えられた宿題課題
- 簡易な設計図を渡され、できあがったら先輩にレビューしてもらう
- XHTML 的な書き方になっていると思うので、HTML5 をよく書いてる人にレビューしてもらい、HTML5 的な書き方も学ぶ
- 親切な先輩は、便利な書き方も教えてくれる
3. 試しサイト作る
- 業務以外で与えられた宿題課題
- できあがっているサイトの画像2枚(hover on と hover off)を渡される
- 開発期間は
3週間と3日(一週目：設計、二週目：画像切り出し、三週目：コーディング、一次レビュー、４週目：提出)→これが会社が用意してくれたスケジュールだが、前倒しで提出できそうだったので日程変更してもらった。↓ - 開発期間は、サイト設計(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制作の現場
コーディングルール
ワンランク上の HTML コーディングを行うための18のポイント
WEB デザイン系
バンクーバーのうぇぶ屋
Web クリエイターボックス
メモ
- 緑の本の次に、現場の先輩等にオススメの html, css 本を聞き、それも傍ら進める
- 現場の過去制作実績サイトを比較しまくる→表記ルールが知れてよい！
- いいなと思うサイトのコードを見てみる
- タスク管理と進行管理は、trello が便利
画像切り出し
- 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 の課題を独学できるように、自分のサイトを作成する
- 「ドメイン」「レンタルサーバ」を契約！
- ファイル転送用ソフトをインストール＆設定
- わくわく（余談）