WEB 1
Start HTMLの基本コードを入れる
これから作成するWEBページの基本となります。
保存(save)する時は必ずフォルダーを確認して、アルファベットの小文字のファイル名をつけましょう。
HTML/（例）index.html CSS/（例）style.css
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
CSS
@charset "utf-8";
D01 はじめてのWEBページ
Braketsを使って作ってみよう！
■ Web Page ／スタート
D02 はじめてのCSS
画像(Photo)を入れる・ページに色をつける
■ Web Page ／画像とCSSの使い方
■ Download／mask.zip
D03 WEBサイトを作る（となりのトトロ）
htmlのマークアップとスタイルシートの練習。
■ サンプル表示 ／となりのトトロ
■ How to Make ／トトロのページを作る 【Coding】
■ Download／03totoro.zip
Note.1 Page layout／ページのレイアウトについて
レイアウトサンプルページ
Note.2 Photoshopで作るGIFアニメーション
GIFアニメーション作り方 ／練習用ファイルDL animation.zip
Note.3 インフォーメーションページへGIFアニメを入れる
インフォメーションページ／練習用ファイルDL information.zip
D04 Summer vacation（1カラム）
レイアウトの基本、画像の並べ方
■ サンプル表示 ／Summer vacation
■ How to Make ／Summer vacation 【Coding】
■ Download／04summer.zip
D05 Ice Cream Shop（2カラム）
画像のリサイズ・CSS・マークアップ
■ サンプル表示 ／Ice Cream Shop
■ How to Make ／Ice Cream Shop 【Coding】
■ Download／05ice-cream.zip
D06 リンクの練習「おさる旅館」（2カラム）
サイト内の別ページへリンクさせる練習。
■ サンプル表示 ／おさる旅館
■ How to Make ／ページリンクおさる旅館 【Coding】
■ Download／06hotel.zip
D07 ページ内リンクの練習「どうぶつえん」（1カラム）
① Mark up（マークアップ） ページ内リンクの練習。
② CSS（スタイルシート）の学習。リンクカラーや見出し背景変更など。
■ サンプル表示 ／ZOO
■ How to Make ／ページ内リンクZOO 【Coding】
■ Download／07zoo.zip
D08 演習
HTMLの基本とCSSより
1）WEBアイコン ZOOのページへアイコンを入れよう
2）box-shadow と drop-shadow（ファイル／shadow-rensyu）
3）背景のCSS（ファイル／bg-rensyu）
D09 表（テーブル）作成
表（テーブル）の作り方。いろいろなテーブルを作る練習。
■ テーブルの基本 ／テーブルの作り方
■ テーブルの基本 練習ファイル Download／ table-basic.zip
■ テーブルの応用 ／09table.pdf
■ テーブルの応用 練習ファイル Download／09table.zip
D10 問い合わせフォームの作成
フォームの基本的なマークアップ。
■ サンプル表示 ／アンケートフォーム
■ 作り方 ／フォームを作る
■ CSS ／フォームのカスタマイズ
■ Download／10form.zip
D11 リストを作ってみよう
いろいろなタイプのリストの練習。
■ サンプル表示 ／リストの装飾
■ Download／11list.zip
D12 レイアウト
Flexbox (Flexible Box Layout Module)でレイアウトを組む練習。
■ 横並びレイアウト ／Flexbox layout（ファイル／flex-b.zip）
HTMLページのレイアウト
■ ページのレイアウト ／Page layout
D13 ボタン作成
いろいろなボタンの作りかた。Flexboxを使った横並びのメニューなどの練習。
■ Source code ／HTMLの基本より・・ボタンを作る
D14 ナビゲーションメニューをページに入れる
「ネコの会社」ページ作成、ナビゲーションを入れよう
■ レイアウト＆ナビゲーションの説明はこちら(PDF)
■ サンプル表示 ／ネコの会社
■ How to Make／ネコの会社【Coding】
■ Download／neko.zip
D15 横並びレイアウトを学習「イヌの会社」
画像のレスポンシブ化、ハンバーガーメニューを右サイドへ設置、マップの埋め込み。
■ サンプル表示 ／イヌの会社
■ How to Make／イヌの会社【Coding】
■ Download／15dog.zip
D16 フルスクリーン(Full Screen) 「イヌの会社」
レスポンシブデザイン、１カラム。フルスクリーンへ変更するCSS（スタイルシート）を学習。
※ファビコン、アップルタッチアイコンの挿入も学習しよう
■ サンプル表示 ／Full-Screen イヌの会社
■ How to Make／Full-Screen イヌの会社【Coding】
■ Download／16full-dog.zip
D17 スライドショー(Slide Show) 「イヌの会社」
D16で作成したWEBページのトップ画像をスライドショーに変更します。
jQueryを使って動きのあるページに挑戦しましょう。
■ サンプル表示 ／Slide Showイヌの会社
■ How to Make／Slide Showイヌの会社【Coding】
■ Download／17slide-dog.zip
D18 サイト作成「Gift Shop」をアレンジしてください。
テーマは自由、これまで学習してきたことを活かして３ページのサイトを作成。
「Full-Screen」「Slide Show」テンプレートから選んでください。
画像のDLからリサイズ、CSSでデザイン・・・色々なアレンジをしてみましょう。
■ フルスクリーン ／ Download 18gift01.zip
■ スライドショー ／ Download 18gift02.zip
※アレンジの質問の答え
D19 CSS3アニメーション
CSS3で簡単なアニメーションを作成。
■ Download／19css_anime.zip
D20 ２カラムページ／働くぐんまちゃん
レスポンシブ２カラムページ／MarkUP・CSSのコーディング練習。
■ サンプル表示 ／働くぐんまちゃん
■ How to Make ／making1 【Coding】
■ Download／working.zip
D20-2 1カラムページに変更／働くぐんまちゃん
レスポンシブ1カラムページ／MarkUP・CSSのコーディング練習。
■ サンプル表示 ／働くぐんまちゃん2
■ How to Make ／making2 【Coding】
■ Download／working-2.zip
D21 インラインフレーム
インラインフレームのページを作成
iframeサンプルページ
インラインフレーム作成方法
Download／iframe.zip
D22 復習01
ボックスを作りながらCSSを復習しよう
■復習問題
Download／fukusyu1.zip
