宮城大学の2021年度卒展webサイトを紹介

宮城大学の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>

宮城大学 卒展web

概要