home / works / 宮城大学 卒展web

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