見出し画像

訓練学校での制作課題公開しました!

以前お話した、訓練学校の課題にて制作したサイトをポートフォリオにも追加し、公開できましたのでこちらでもご紹介します!
よければ見てやってください。
こちらから

課題の制作条件は
・プログラミング禁止(JavaScriptなど)
・下層4ページ最低作成

そのためサイトはHTMLとCSSのみで作成しています。

今回の課題にあたり、個人目標は
・ファーストビューはフル画面でやりたい
・ハンバーガーメニュー
・写真ギャラリーのモーダル
・レスポンシブ対応
・主要ブラウザとiOSに対応

それを踏まえてテーマをヘアサロンにしました。
写真をたくさん使えるし、多少デザインに寄せても違和感がないとおもったからです。

画像1

画像クリックでサイトにGo。

見せ場はやはりGallaryのモーダルとラジオボタンを使った切り替えです。
ここは是非ぽちぽち触ってやってください。
ちなみにこのギミックはスマホ版では削除しているので、PC閲覧のみです。

大変だったこと
IEへの対応とバグ
iOSのバグ
反省点
なんならモバイルファーストでつくればよかった

バグは大変でした。
1週間ほどで全体的に仕上がりブラウザ確認してIEでもろもろバグがあったので(画像プロパティ関連)修正。
締め切りまで1週間まだあったので時間に余裕はありましたが、これが納期直前とかになると焦るだろうな^^;
何事も早めに早めに、ですね。

最後はiOSのバグがあり、これは自宅でテストとしてサーバーにあげて確認時なので本当に締め切り2日前とかでした。
これもネットで対処法を検索しなんとか修正。

ローカル環境では意識しないことが多く、すごく勉強になりました!
個人的には満足のいく制作となり、次の作品への糧にします。

現在はJavaScriptにてブラウザゲームやcanvasを勉強中です。
どんどんプログラミングの世界に入れて楽しいです。

次回はこの制作サイトのアウトプットも兼ねてギミックの説明などしていきたいです!

え?ほんまに?サポートしてくれるん。 めっちゃうれしいです・:*+.\(( °ω° ))/.:+ 勉強のために使わせて頂き、さらに役立つ記事を書いていきます!