Bootstrapである様なスライドショーやモーダル機能などをJQueryで表現したサイトです。
制作期間:
3週間
目的:
プログラミング学習をしてきた自分がどの程度まで知識を理解し、形にできるか挑戦してみようと考え、サイト模写に近い形でこの架空のコーポレートサイトを作成しようと考えました。
実際の工場のコーポレートサイトの機能や配置を真似て、架空の工場のコーポレートサイトを作りました。
現在、HTMLファイルで各ページを制作後、WordPress化に向けて勉強をしています。
工夫した箇所:
各ページが長さのある作りだと感じたので、トップへ戻るボタンがあると便利ではないかと考え、JQueryでトップへ戻るボタンを追加しました。
使用言語:
HTML
CSS
JQuery
説明:
参考にしたサイトでは、Bootstrapのグリッドシステムを扱った配置やアニメーションかと思われますが、自分は敢えてCSSの勉強も兼ねて、Bootstrapは扱わずに、CSSのfloatやFlex box で制作しました。
ナビバーのドロワーメニューや「工場/設備」のページの画像が並んでいる部分にはモーダルとスライドショーをJQueryの練習も兼ねて取り入れております。
※こちらは現在レスポンシブ対応している途中です。
ナビバーのドロワーメニュー
「工場/設備」のページのモーダルとスライド
—作品ページへは以下からアクセス可能です—
QRコード
URL
閲覧用URL:https://kuramasa-portfolio.net/portfolio/corporatesite1/
参考にさせていただいた企業様のコーポレートサイト
http://www.shizukin.jp/