宮城大学の2021年度卒業研究・制作展の広報用webサイトを制作しました。
概要
基本情報
リンク : 宮城大学 2021年度 卒業研究・制作展
ソースコード : 佐々木かなるのgithubページ
公開日 : 2022 / 2 / 9
制作期間 : 2週間
作業範囲
- ローディングアニメーション作成
- コーディング
- .htaccess作成
webデザインは専門の友人にお願いしました。
制作環境
- デザイン : Figma
- サーバー : さくらサーバー Apache
- バンドル : webpack5
- ソースコード管理 : git github
設計
ローディングアニメーション
ローディングアニメーションはパフォーマンスに悪影響を及ぼさないようにSVG画像とCSSのみで作成しました。

講師・学生データ読み込み
講師・学生データは後からデザインやデータの変更がしやすいようにjsonファイルにまとめました。それをjavascriptのfetch関数で取得し、createElementでHTMLに挿入しています。


ハンバーガーメニュー
ハンバーガーメニューの動きも全てCSSで実装しています。inputのチェックボックスをdisplay:none;で設置し、その真偽値で表示 / 非表示の切り替えをしています。
ハンバーガメニューを表示している時に別の場所をタップした時だけjsで検知してチェックボックスに反映させるようにしています。

.haccess作成
httpとhttps、wwwありと無しでアクセスできてしまっていたので、.htaccessを設置してhttps://www.myu-design.jp/sotsuten2021に統一しました。
以下設置した.htaccessです。
<IfModule mod_rewrite.c>
RewriteEngine on
# http -> https
RewriteCond %{HTTPS} off
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# + www
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule .* https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>