Edited at

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

More than 3 years have passed since last update.

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


はじめに


前提


  • HTML や CSS の制作経験がない方向け

  • 過去コーディング経験があっても、基本がよくわかってない人向け


説明

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


1. まずはこの本をやれ

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

よくわかるXHTMLとCSSによるWebサイト作成 (よくわかるトレーニングテキスト)


  • これで基本的な事は学べる

  • 入社後まず渡された本

  • 入社して一週間後に、総合演習のテストを実施

  • 熟読していれば、100点をとれるはず


この本のいいところ


  • 基礎を親切丁寧に教えてくれ、わかりやすい

  • 演習で実際に簡単なサイトを作るので、クラス、ID、疑似やアンカーリンク、テーブル、二段組など理解できる


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


  • 業務以外で与えられた宿題課題

  • 簡易な設計図を渡され、できあがったら先輩にレビューしてもらう

  • XHTML 的な書き方になっていると思うので、HTML5 をよく書いてる人にレビューしてもらい、HTML5 的な書き方も学ぶ

  • 親切な先輩は、便利な書き方も教えてくれる


3. 試しサイト作る


  • 業務以外で与えられた宿題課題

  • できあがっているサイトの画像2枚(hover on と hover off)を渡される

  • 開発期間は 3週間と3日(一週目:設計、二週目:画像切り出し、三週目:コーディング、一次レビュー、4週目:提出)→これが会社が用意してくれたスケジュールだが、前倒しで提出できそうだったので日程変更してもらった。↓

  • 開発期間は、サイト設計(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. 試しサイト作る その2


  • 更にレベルアップをしたサイト作成を実施する

  • 作成ページは、トップページ + もう1ページ

  • html, css, だけでなく、javascript の「サイドメニューをクリックしたらサブメニューが表示される動作」「トップページのメイン写真を5秒毎に3枚の写真に変更する動作」をつける

  • 手順は「3. 試しサイト作る」と同様


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


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


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


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


自分のサイトを作成


  • 6 の課題を独学できるように、自分のサイトを作成する

  • 「ドメイン」「レンタルサーバ」を契約!

  • ファイル転送用ソフトをインストール&設定

  • わくわく(余談)


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