WEB 2
D01 CSSでデザイン
いくつかのCSSを使ってデザイン。実際に作成してみよう！（サンプル）
D01-2 jQueryで画面遷移（Screen transition）
D01で作成したページを参考にjQueryを設置してみよう（サンプル）
HTML／作り方
Download練習ファイル／screen.zip
D02 jQueryのメソッド（method）
（参考）jQuery 公式サイト https://api.jquery.com/
D03 マウスオーバーで画像に効果
マウスオーバーした時の色々な画像の効果をCSSで作成
MOUSE OVER サンプル表示
CSS／作り方
Download練習ファイル／mouseover.zip
D04 ボックスデザイン
ボックスをCSSでデザインしてみよう。
BOXサンプル表示
Download／boxdesign.zip
D05 jQueryのズームスライダーを試してみる(ZoomSlider)
Wolfページサンプル表示 ／ 写真を入れ替えてアレンジしよう
Download／wolf.zip
D06 ポートフォリオサイトの作成
ポートフォリオは、自分の履歴や能力を伝えるための作品集です。
就活で、自分に何ができるのかをアピールする大切なツールになります。
就活時までに早めに作成しましょう！
※WorksのWEB Designのサムネイルはwidth:200px × height:150 ぐら いにしてください。
※WorksのGraphic Designの画像サイズはwidth:450px × height:650pxぐらいにしてください。
1）ポートフォリオ 01 サンプル表示 ／ テンプレートのダウンロード(portfolio-01.zip）
2）ポートフォリオ 02 サンプル表示 ／ テンプレートのダウンロード(portfolio-02.zip）
※使用画像の他にファイル内にサンプル画像が入っています。
好きな画像を選らぶか自分で用意した画像を使ってください。
使用しなかった画像は全部消去（Delete）すること！！
※ABOUTページを簡略化する場合はこちらを参考
※ポートフォリオ01でトップの画像に対してブレンドモードを使用することができます。
※詳しくはこちら「ブレンドモード」
D07 TOPへ戻るボタンを作る
※作り方／Page Top Linkの作り方
サンプル表示01／サンプル表示02
Download／p-top.zip
※アレンジ用ファイル
PAGE TOP サンプル表示
Download／page_top.zip
参考：スクロールすると出てくる「TOPへ戻る」ボタン
D08 区切り線
HRを使った区切り線のデザインいろいろ
Line サンプル表示
D09 Webアイコンフォント
Webアイコンフォント「Font Awesome」を使ってみよう
Font Awesomeアイコン一覧ページ
Font Awesome使い方
練習用ファイルDownload／fontawesome-rensyu.zip
D10 jQuery Ⓐ
Photo Album／フォトギャラリーの作成（作り方説明）
ファイルDL：photo-work.zip
Tab Menu／タブメニューの作成（作り方説明）
ファイルDL：tab-work.zip
D11 jQuery Ⓑ
Hover effect／マウスオーバーでテキスト表示（作り方説明）
ファイルDL：hover-work.zip
Loop slider／写真をループさせる（作り方説明）
ファイルDL：loop-work.zip
Filtering／フィルタリング機能（作り方説明）
ファイルDL：filtering-work.zip
ZOOM／画像ZOOM（作り方説明）
ファイルDL：zoom-work.zip
D12 jQueryで作るPhotoSwipe
PhotoSwipeを使ってクリックで拡大する画像を作る
作り方 ／ サンプルと作り方
Download／photo-swipe.zip
完成したサンプルページDL
D13 ランディングページ（SpaceTravel）
ランディングページをテンプレートを使ってアレンジしてみよう！
作り方 ／ 変更の要点
1）ランディングページ1 ／ ヘッダー固定・背景変更
Download／landing.zip
D14 Vanta.js – Animated 3D Backgrounds jQuery
Webページの背景として設置する3Dアニメーションを作成
作り方 ／ Vanta.jsの使い方とページへの適用
Download／3d-animation.zip
D15 CSS、HTMLまとめ チェックしてみよう
よく使うタグやCSSプロパティ
D16 ランディングページ（前橋の下水処理のしくみ）
1）作り方 ／ 下水処理のしくみ
2）下水処理場のしくみ
Download／gesui16.zip
※Clip PathでSlant backgroundのページを参考に背景を変えてみよう
D17 Originalランディングページ作成
D13・D16で学習したことを活かしてレイアウトから全て自分で作ってみよう
作り方 ／ Landing Page Ⅱ
Download／LP.zip
Download／もっと簡単に作成➡LP-kansei.zip（写真サンプルやCSSが入っています）
D18 Scroll Snap
1）作り方 ／ 説明とポイント
2）春夏秋冬 ／ 完成ページ
Download／scroll-snap.zip
D19 パターンのBackground（Scroll Snap）
1）pattern01 ／ CSSで作るパターン
2）pattern02 ／ CSSで作るパターン
3）pattern03 ／ 画像とパターンを組み合わせる
Download／snap-bg.zip
D20 Slideshow & Background Effects
1）作り方 ／ 説明とポイント
2) 春「桜」 ／ 冬「雪」
Download／season.zip
D21 演習01
1）DEMOページ ／ サンプルとポイント
Download／ensyu-01.zip
D22 演習（バナー）
1）作り方 ／ Photoshopを使ってバナーを作成、WEBページへ入れる
Download／bannere-rensyu.zip
D23 演習（スライドショー）
1）作り方 ／ 説明とポイント
Download／slider-dl.zip
