コーポレートサイト1

Bootstrapである様なスライドショーやモーダル機能などをJQueryで表現したサイトです。

                       

制作期間:

3週間

目的:

プログラミング学習をしてきた自分がどの程度まで知識を理解し、形にできるか挑戦してみようと考え、サイト模写に近い形でこの架空のコーポレートサイトを作成しようと考えました。

実際の工場のコーポレートサイトの機能や配置を真似て、架空の工場のコーポレートサイトを作りました。

現在、HTMLファイルで各ページを制作後、WordPress化に向けて勉強をしています。

工夫した箇所:

各ページが長さのある作りだと感じたので、トップへ戻るボタンがあると便利ではないかと考え、JQueryでトップへ戻るボタンを追加しました。

使用言語:

HTML

CSS

JQuery

説明:

参考にしたサイトでは、Bootstrapのグリッドシステムを扱った配置やアニメーションかと思われますが、自分は敢えてCSSの勉強も兼ねて、Bootstrapは扱わずに、CSSのfloatやFlex box で制作しました。

ナビバーのドロワーメニューや「工場/設備」のページの画像が並んでいる部分にはモーダルとスライドショーをJQueryの練習も兼ねて取り入れております。

※こちらは現在レスポンシブ対応している途中です。

ナビバーのドロワーメニュー

「工場/設備」のページのモーダルとスライド


—作品ページへは以下からアクセス可能です—

QRコード

↑閲覧用QRコード

URL

閲覧用URL:https://kuramasa-portfolio.net/portfolio/corporatesite1/

参考にさせていただいた企業様のコーポレートサイト

http://www.shizukin.jp/