HTML & CSS
～ school works ～
2月17日 習作：石垣島観光ページ
制作時間：約3時間
ポイント：margin、paddingをうまく設定する
2月19日 習作：レストランサイト(2カラム)
制作時間：約3時間
ポイント：料理の画像をfloatで最適位置に設定する
2月21日 習作：建築散歩ガイドのページ（2カラム）
制作時間：約2時間
ポイント：背景画像をbodyのtop leftに読み込む
2月21日 習作：薬玉文様（くすだまもんよう）
～画面中央に表示～
制作時間：約1時間
ポイント：containerにposition:absoluteを設定する
3月5日 習作：企業サイト（2カラム）
制作時間：約5時間 （Illustratorでのロゴ作成、
Photoshopでのナビゲーション作成含む）
ポイント：画像使用時のナビゲーションの処理と位置合わせ
3月15日 演習：JavaScript画像置換
制作時間：約1時間
ポイント：onMouseOverで画像置換させる
3月17日 演習：MouseOver画像置換
制作時間：約1時間
ポイント：onMouseOutに this.src=を使用する
3月20日 習作：ケーキショップ キャンペーンページ
制作時間：約2時間
ポイント：複数の画像をposition:absoluteで最適位置に設定する
3月31日 習作：「楽しいおかず」サイト
制作時間：約2時間
ポイント：classとli要素で効率的にグリッドを完成させる
6月1日 習作：「ガラスの靴」キャンペーンサイト
制作時間：約4時間
ポイント：箇条書き部分に、text-indentをマイナスで設定
.png)
6月10日 習作：「豆はカラダニイイ」サイト
制作時間：約2時間
ポイント：スタイルシート1枚にデバイス別の対応を記述
.png)
6月17日 習作：レスポンシブA（可変レイアウト）
制作時間：約3時間
ポイント：日付にborder-radiusを設定する
.png)
6月18日 習作：レスポンシブB（固定レイアウト）
制作時間：約5時間
ポイント：デバイス別に4枚のスタイルシートを作成
nth-child(even) で右マージンを削除
.png)
6月19日 習作：レスポンシブC（可変+固定レイアウト）
制作時間：約5時間
ポイント：1つのclassで効率的に記事4段を作成
hoverにlinear-gradientを使用
.png)
6月21日 習作：レスポンシブ（1カラム）
制作時間：約1時間
ポイント：normarize.cssを使用
.png)
6月22日 習作：レスポンシブ（fluid）
制作時間：約2時間
ポイント：imgの幅・高さを自動に設定
IE対策に/respond.min.js, html5shiv.jsを使用
.png)
6月23日 習作：レスポンシブ（fluid & fixed）
制作時間：約2時間
ポイント：bodyにclearfixを使用
.png)
6月24日 習作：レスポンシブ（shift）
制作時間：約2時間
ポイント：header箇所にpositionとz-indexを使用
6月25日 習作：問合せフォーム
制作時間：約2時間
ポイント：formのoptionにoptgroup labelを使用
文字の強調にemを使用
.png)
7月11日 習作：レスポンシブ（グリッドデザイン）
制作時間：約3時間
ポイント：グリッドに実現にjQueryのmasonryを使用
画像のcaptionにopacityを使用
7月12日 習作：固定レイアウト（2カラム）
制作時間：約5時間
ポイント：画像の調整にz-indexを使用
input type="search"（検索ボックス）に画像を使用
7月19日 習作：Loft Topページ[模写]（グリッドデザイン）
制作時間：約3時間
ポイント：画像スライスの正確さ
margin, paddingの設定の仕方
7月20日 習作：ショッピングサイト
（2カラム可変レイアウト）
制作時間：約5時間
ポイント：positionの使用
表組み箇所にdl, dt, ddの使用
7月27日 習作：オーダーフォーム
（2カラムレイアウト）
制作時間：約5時間
ポイント：formの使用
fieldsetの使用
.png)
