Marine Cafe
（架空カフェ）
（架空カフェ）
WEB
課題
コーディング
トレース
担当部分：コーディング
制作期間：約5日
使用ツール：HTML/CSS Visual Studio Code
制作期間：約5日
使用ツール：HTML/CSS Visual Studio Code
概要
職業訓練校の課題として作成。
講師が作成した仕様書・ワイヤーフレーム・デザインカンプが渡された上で、コーディングのみを一から行いました。
講師が作成した仕様書・ワイヤーフレーム・デザインカンプが渡された上で、コーディングのみを一から行いました。
＜＜ Prev
WORKS
つくったもの
- ALL
- WEB
- DTP
WEB
デザイン
コーディング
ナイトカフェ「ハリネズミの夜」（架空カフェ）
WEB
デザイン
コーディング
ポートフォリオサイト（このサイト）
WEB
コーディング
トレース
ENGBODY（架空ジム）
WEB
コーディング
トレース
Wed Design Conference (架空セミナー)
WEB
コーディング
トレース
START（架空企業）
WEB
課題
コーディング
トレース
Kissa（架空カフェ）
WEB
課題
コーディング
トレース
Codera（架空プログラミング塾）
WEB
課題
コーディング
トレース
Healthem（架空企業）
WEB
課題
コーディング
トレース
Bloom（架空フラワーアレンジメント教室）
WEB
課題
コーディング
トレース
Marine Coffee（架空カフェ）
DTP
課題
はがき
Illustrator
観葉植物専門店（架空）
広告はがき
広告はがき
DTP
課題
チラシ
Illustrator
食器イベント（架空）
来場促進用配布チラシ
来場促進用配布チラシ
DTP
課題
チラシ
Illustrator
ふれあい動物園（架空）
来場促進用チラシ
来場促進用チラシ
DTP
課題
はがき
Illustrator
眼鏡店（架空）
新規開店宣伝用ポストカード
新規開店宣伝用ポストカード
DTP
課題
はがき
Photoshop
結婚式の招待状（架空）
DTP
課題
フライヤー
Photoshop
Kunii Chihiro写真展（架空）
フライヤー
フライヤー
DTP
課題
チラシ
Photoshop
椅子の展覧会（架空）
来場促進用配布チラシ
来場促進用配布チラシ
DTP
課題
はがき
Photoshop
レストラン（架空）
新規開店宣伝用ポストカード
新規開店宣伝用ポストカード
WEB
デザイン
コーディング
ナイトカフェ「ハリネズミの夜」（架空カフェ）
WEB
デザイン
コーディング
ポートフォリオサイト（このサイト）
コーディング
トレース
ENGBODY（架空ジム）
コーディング
トレース
Wed Design Conference (架空セミナー)
コーディング
トレース
START（架空企業）
課題
コーディング
トレース
Kissa（架空カフェ）
課題
コーディング
トレース
Codera（架空プログラミング塾）
課題
コーディング
トレース
Healthem（架空企業）
課題
コーディング
トレース
Bloom（架空フラワーアレンジメント教室）
課題
コーディング
トレース
Marine Coffee（架空カフェ）
DTP
課題
はがき
Illustrator
観葉植物専門店（架空）
広告はがき
広告はがき
DTP
課題
チラシ
Illustrator
食器イベント（架空）
来場促進用配布チラシ
来場促進用配布チラシ
DTP
課題
チラシ
Illustrator
ふれあい動物園（架空）
来場促進用チラシ
来場促進用チラシ
DTP
課題
はがき
Illustrator
眼鏡店（架空）
新規開店宣伝用ポストカード
新規開店宣伝用ポストカード
DTP
課題
はがき
Photoshop
結婚式の招待状（架空）
DTP
課題
フライヤー
Photoshop
Kunii Chihiro写真展（架空）
フライヤー
フライヤー
DTP
課題
チラシ
Photoshop
椅子の展覧会（架空）
来場促進用配布チラシ
来場促進用配布チラシ
DTP
課題
はがき
Photoshop
レストラン（架空）
新規開店宣伝用ポストカード
新規開店宣伝用ポストカード
完成例としてHTMLファイルも一緒に渡されたので、コーディングは見ずに、
ブラウザで完成例を照らし合わせながら、 1px単位でコーディングを行いました。
授業では習わなかった部分は、自分で調べてコードを覚えていきました。