WEBスクールで学んだこと Site Maps (practice)

演習 NO. タイトル ページ内容
HTML5 / Java Script
スマホ対応 JQuery mobile JQuery mobileを作成する
スマホ対応 位置情報の取得 位置情報の取得（成功・失敗）
API video API その２ 複数のボタンで動画を扱う
API video API その1 動画を扱う
API audio API その２ 複数のボタンで音声を調整する
API audio API その1 音声を扱う
mediaquery メディアクエリ 画面の大きさによってカラムを変える
グラフバー prgress/meter 進捗を表示するprogressバーと、数量を表すmeter
API webfont pc内のフォントファイルに依存しないフォント
API webstrage 一度保存したデータが、ページを閉じてopenしたら再度表示される
canvas アニメーション 球体が行き来するアニメーションを作成する
canvas グラフの作成 canvasで折れ線グラフを作成する
canvas 静止画像の作成 canvasで図形を描画（矩形・多角形・直線・塗円・円弧・曲線）
Java Script
ゲーム じゃんけんゲーム じゃんけんゲームで勝ち負けを判定する
CHANGE()関数 タイマーによる制御 タイマーsetIntervalを使用し、画像を書き換える
DOM 記述方法 テキストの一部を書き換える
prompt promp入力を求める 入力した内容を表示する
confirm confirmゲームの作成 はい、キャンセルゲームの作成
confirm confirmダイアログ 確認ダイアログ
alert alertダイアログ 警告やメッセージを表示するダイアログ
配列 new Array 月が順番にドロップダウンで表示される
繰り返し for文 繰り返し+１ずつ増えていく計算
条件分岐 switch文 日本の日時を表示する
関数 関数の呼び出し ボタンを押したらWELCOM関数が起動する
CSS3
CSS3 アニメーション（もみじ） 円が紅葉に変化する
CSS3 アニメーション（キーフレーム） 透明になったり、色が変化しながら動く図形
CSS3 アニメーション（トランスフォーム） hoverすると回転しながら大きくなる
CSS3 アニメーション（MacDock風） hoverすると球体が大きくなる
CSS3 アニメーション（図形） 動き続けるアニメーション
CSS3 アニメーション（文字） hoverした時に変化するアニメーション
CSS3 スタイル練習 自分で好きなスタイルを適応する
CSS3 CSS3のスタイル 影・角丸・反射・グラデーション
HTML5 基本
form 入力フォーム [入力フォーム]１０種類
ページ演習 HTML5の基本（その２） HTML5で作るページ（その２)
ページ演習 HTML5の基本（その１） HTML5で作るページ（その１)
PHP
form フォーム phpでformを作成
計算 四則計算 phpで四則計算

▼HTML + CSS

ホームページ作成
html page 001 ＊ECOLOGY リスト<li>を使用したコンテンツページ
html page 002 ＊川崎アワード バナーを配置した実践的なTOPページ
B 001 ＊アクアゾーン・プログラム 背景画像を加工したページ
B 002 ＊ GREEN COLUMN ぱんくずリスト、テキスト中心のページ
B 007 ＊青空フリマ ヘッダーや背景に画像を使用/一般的な告知ページ
ページレイアウト
B 003 Homepage Title タイトルの作成：画像を使用したロゴ作成
B 004 Homepage Title ヘッダーの作成：画像を加工し配置( header flower )
B 005 コンテンツのタイトル 縦に可変するページ （可変box枠が内側)
B 006 ページレイアウト <div>でboxで区分けしたレイアウト
B 008 PHOTO ALUBUM アルバムのように画像を整列（listは使用しない）
B 009 タブ ( タブカラーに連動した罫線色 ) タブをクリックすると、タブの色と同じ色の罫線色になる
B 010 画像のレイアウト position指定 で画像を配置する
B 011 ページ構成レイアウト <div>でBOX枠のを配置する
B 012 フォームform カラーで体裁を整えたフォーム
form フォームform ( fieldset） fieldsetと画像を使用したフォーム
B 013 重なったBOXのレイアウト Z-indexを使用してBOX枠を重ねる
B 014 table の作成 色で体裁を整えたtable( 夜の章 ）
<li> リストの基本
list001 行頭記号付きlist リストマークつきのリスト ( htmlのみで記述 ）
list002-1 imgに直接画像を配置 画像をリストマークに使用
list002-2 list-style-imageで指定 リストマークをlist-style-imageで画像指定
list002-3 background-imageで指定 リストマークをbackground-imageで画像指定
list003-1 ul,liにborder指定 ul,liにborderを指定した縦並びのリスト
list003-2 border指定、class使用 liのみborder指定、class使用
list004 a:hoverに背景色設定 a:hover（マウスオーバー）時に背景色を変える
list005 menu（横並びlist配置） テキストのみでリストメニューを横並びに整列させる
list006 menu（背景色適用） 横並びのテキストメニューに背景色でナビBARを作成
list007 menu(画像適用) 画像を使用して、ナビBARを作成
navibar ナビゲーションバーの作成 背景画像の座標を指定してナビBARを作成（SOFT BANK)
wood_navi ナビゲーションバーの作成 背景画像の座標を指定してナビBARを作成(wood_navi)

▲top