課題まとめサイト

制作演習

• うちのにゃんこ｜htaccessのリダイレクト、タッチアイコン設定
• 日本の四季｜複数ページ
• 既存サイトのトレース｜LOFT
• 楽しいおかず｜アダプティブレイアウト
• 枝豆隊長｜レスポンシブ
• PENGUIN Cafe
• CAFE DE FELICA｜ファビコンを設定
• スプリットレイアウト
• 海外家具ECサイトのトレース｜スマホでハンバーガーメニュー
• APIを使用したシングルページ
• APIを使用したシングルページ|スムーススクロール版
• AOSを実装してみる
• 曲線を使ったデザインとmixItUp
• おくもとクリニック｜カンプからのコーディング
• パララックス風のページ制作
• videoタグを背景に使う｜スマホで静止画切り替え
• 無限スクロール｜別ページを続けて表示
• thai-nama｜Sassを使ってレスポンシブサイト
• 第4回実技試験｜コーポレートサイト風
• 第5回実技試験｜フェリカLP
• 第6回実技試験｜動画を使用したレスポンシブサイト

HTML・CSS

• 1カラムレイアウト
• 2カラムレイアウト
• background-attachmentの練習
• 2カラムレイアウト(Cafe de Ferlca）
• CSSスプライト
• ヒーローヘッダーとゴーストボタン
• 2カラム演習
• 高解像度ディスプレイ用の設定
• 縦書きとルビを振ってみる
• テキストアニメーション
• background-clipで文字をクリッピング
• レスポンシブイメージの設定
• ルートパスの設定
• 第1回実技試験
• フォントサイズを画面幅に応じて可変
• ドロップダウンメニュー
• CSSでクリッピング1
• CSSでクリッピング2
• CSS3アニメーション｜ホバーアクションでキャプションを表示
• CSS3アニメーション｜1
• CSS3アニメーション｜2
• CSS3アニメーション｜3
• ポジション基礎
• min-width使い方
• 演習問題｜01
• 演習問題｜02
• 演習問題｜03
• 演習問題｜04
• 演習問題｜05
• 演習問題｜06
• 演習問題｜07
• 演習問題｜08
• 演習問題｜09
• 演習問題｜10

JavaScript

• クリックイベントで画像置換
• クリックイベント｜サムネイル編
• テスト練習
• 第2回実技試験
• 配列の使い方1
• 配列の使い方2
• 配列の使い方3
• Dateオブジェクトを使って時間を取得する
• 西暦を取得しコピーライト部分に表示させる
• setIntervalの使い方
• jsでデジタル時計を作る
• 日付を取得して表示
• おみくじの結果をランダムに表示
• DOMの使い方
• DOMの使い方|CSSの変更
• DOMの使い方|カスタムプロパティ
• 画像の差し替え(altも一緒に）
• ランダムで画像の差し替え
• for文の基礎
• for文で九九の表1
• for文で九九の表2
• お問い合わせフォームの作成
• function関数の使い方
• 関数の使い方|演習問題1
• 関数の使い方|演習問題2
• if文を使ってみる｜ランチ代
• if文を使ってみる｜7倍数
• 複数分岐の練習
• if分でクイズを作ってみる
• if文の復習
• if文の複雑な分岐
• 論理演算子を使ったif文|andの時
• 論理演算子を使ったif文|notの時
• 論理演算子を使ったif文｜orの時
• Mathオブジェクトを使ってランダムで画像を表示させる1
• Mathオブジェクトを使ってランダムで画像を表示させる2

jQuery

• bxsliderの実装
• lightboxの実装
• タブパネルの作成
• 第3回実技試験
• ハンバーガーメニュー
• テキストの取得と変更
• クリックするたびにテキストの変更
• スムーススクロールの実装
• 複数ボタンのスムーススクロール
• スクロールイベントの基礎1
• スクロールイベントの基礎2
• resizeイベントの設定
• slideToggleとresize|その１
• slideToggleとresize|簡単な方
• attrを使って属性を取得1
• attrを使って属性を取得2
• jQueryでアニメーション
• Ajaxの基礎
• アコーディオンパネル
• jQuery基礎
• class名を挿入、削除
• class名を挿入、削除2
• slideToggleでメニュー表示
• Clickイベントとthis1
• Clickイベントとthis2
• paginathing.jsを使ってみる

PHP

• 初めてのPHP
• PHPの記述方法
• PHPでの配列
• 時間の取得｜東京オリンピックまで
• 時間の取得｜修了式まで
• for文の使い方
• プルダウンメニューをfor文で
• while文の使い方
• お問い合わせフォーム

wordpress

• サイト100選
• TravelSketch

グラフィック

photoshop

• GIFアニメ
• 焼印風のロゴ
• メゾティント加工
• クリニックカンプ
• cafe_de_felicaカンプ
• フェリカLPメイン(オリジナル)
• バナー（トレース）｜ローソンフレッシュ
• バナー（トレース）｜平成建設
• バナー（トレース）｜マキアージュ
• バナー（トレース）｜sweet_mommy
• バナー（トレース）｜titivate
• バナー（トレース）｜USEN
• バナー（トレース）｜送料無料
• バナー（オリジナル）｜ワイズアライアンスPC
• バナー（オリジナル）｜ワイズアライアンスSP
• バナー（オリジナル）｜パラゴン
• バナー（オリジナル）｜クリスマス
• クライアントワーク｜カンプPC
• クライアントワーク｜カンプSP
• クライアントワーク素材｜キービジュアル１
• クライアントワーク素材｜キービジュアル2
• クライアントワーク素材｜キービジュアル3
• クライアントワーク素材｜イメージ図
• クライアントワーク素材｜ボタン１
• クライアントワーク素材｜ボタン２
• 自作色鉛筆画入り年賀状

Illustlator

• アピアランス機能を使ったPOP
• アートブラシでロゴを作る2
• アートブラシでロゴを作る2
• 図形の組み合わせでイラスト
• ロゴを作る1
• ロゴを作る2
• 花菱文様
• 雪輪文様
• ペンローズの三角形
• イラレでカンプ

XD

• クライアントワークワイヤーフレーム