教材

回	Lesson	内容	資料
1		はじまりのはじまり	★ デザイナーをとりまく今教えた甲斐がない！？いち早く即戦力になるために独自の構成コンセプト本コラムのゴール
2	Lesson1	HTMLの基本を覚えよう！	★ 制作に必要なものを用意する基本のフォーマットを理解する HTMLタグとは文書を構造化する画像を読み込む囲まないHTMLタグもあるリンクを設定して別のWebページに飛ぶまとめ
3	Lesson2	個条書きと表組みを学ぶ	★ 1. 完成図を確認しよう 2. 個条書き 3. 表組み　～基本的な組み方～ 4. 表組み　～セルの結合～まとめ
4	Lesson3	送信フォームの作り方	★ 1. 送信フォームとは 2. 入力情報を送信する仕組み 3. 入力欄・選択肢の作り方 4. 送信ボタン 5. 送信される範囲まとめ
5	Lesson4	CSSをHTMLタグに反映させる	★ CSSとは CSSをHTMLファイルに読み込む文字の装飾を設定するすべてのHTMLタグに共通でCSSを設定するブロック要素とインライン要素「余白」に関する2つの指定余白とブロック要素・インライン要素まとめ
6	Lesson5	グループ化したHTMLタグにCSSを反映する	★ 1. HTMLタグをdivでグループ化 2. idでCSSを指定する 3. idとclassの違い 4. HTMLタグをspanでグループ化 5. グループ内のHTMLタグへCSSを指定 6. 特定のHTMLタグへCSSを指定まとめ
7	Lesson6	シンプルなメニュー	★ 1. 項目が縦並びのメニューを作る】 2. HTMLで文書を構造化 3. 文書全体への基本的なCSS設定 4. 幅の設定の不思議 5. 小見出しのデザイン 6. <ul>タグのデフォルト表示をリセット 7. 個条書きのデザインまとめ
8	Lesson7	点線で区切ったメニュー	★ 1. 点線は背景として配置する 2. 点線画像の配置位置 3. 項目文字と点線画像との間の空白を調整 4. 点線の別の描き方 5. リンクの下線を表示／非表示にするまとめ
9	Lesson8	ボタンメニュー	★ 1. マウスオーバーでビジュアルが変わる 2. HTMLファイルを作る 3. ボタンのデザインは<a>タグで 4. ボタンにデザインを設定する 5. ボタンの幅を設定し、表示の乱れを回避 6. マウスオーバーしたときの表示設定まとめ
10	Lesson9	ヘッダーメニュー	★ 1. ヘッダーはWebページの顔！ 3. 要素を貼り付ける“コルクボード”を作る 4. id「head」の設定 5. 貼り付けるパーツを用意する B. 個条書き 6. パーツを好きな位置に貼り付けるまとめ
11	Lesson10	2段組みのレイアウト	★ 1. 汎用性の高い2段組みのレイアウトを学ぶ 2. “駐車場”のイメージ！ 3. 配置するパーツを作る 4. パーツを“駐車場”に配置する 5. 駐車場にする“おまじない” 6. 余白設定の妙まとめ
12	Lesson11	3段組みのレイアウト	★ 1. 3段組みは2段組みの応用！ 2. 左段メニューの下の背景色はどう設定？ 3. 画像をパターンとして背景に敷く 4. ページレイアウトを常に中央にする方法 5. 画像に対する文字の回り込みまとめ