こんにちは。初投稿です。
投稿の練習がてら自己紹介をします。

私は現在高校で数学の教員をやっています。
数学の授業で使えるようなソフトやページを作っています。

私がプログラミングと出会ったのは大学２年生の時に受けた授業でした。そこではRubyを扱い、全く理解できなかった私はプログラミングに興味を持つことはありませんでした。
しかし大学３年生の春、某大手通信制高校の長期インターンを始めたら、そのインターンではプログラミングを扱う機会がとても多く、扱う教材も面白く私はプログラミングへのめり込んでいきました。
インターンでは主に、HTML、CSS、JavaScript、python、Unity(C#)などを扱いました。紹介しているものも、ここら辺中心に作っています。

以下にインターン時代に作ったものを載せておきます。
円周率πの近似～モンテカルロ法～（HTML、JavaScript）

教員になってから作ったものは以下のものです。
サイコロを振りまくったら本当に1/6になるのか（Unity）

数学の展開、因数分解をひたすらやるゲーム（Unity）
これはまだ制作途中なので画像だけです。

サイコロと数学のゲームに関しては別記事でもう少し詳しく紹介できたらなと思います。
コメントやアドバイスをいただけると幸いです。

HTML

はじめに

レイアウト完成イメージ（例）

WEBのレイアウトを決める時は以下の３つの要素でバランスを取ると思います。

・コンテンツの大きさ（heightやwidthなど）
・コンテンツの並べ方(floatやflexboxなど)
・コンテンツ間の余白(margin)

レスポンシブデザインに対応する場合は
できるだけpx指定を避けて修正やコードの見通しを良くしたいところです。

プロジェクトが大きくなるにつれて個別のmargin設定や
flexboxのプロパティも肥大化します。

最近gridを使用した視覚性の高いデザイン方法について知ったので記事にしておきます。
※IEは非対応なのであしからず。。。。

この記事で実現したいこと

・レイアウトを視覚的にわかりやすくする
・コンテンツへ個別のmargin設定をやめる
・第３者が見ても何を設定しているかわかりやすくする（調査工数の削減）

作成（ヘッダー・フッター・サイドバー・コンテンツの聖杯レイアウト）

htmlcssの下準備

シンプルにヘッダー、コンテンツ（左、中央、右）フッターをデザインします。
わかりやすくするため各要素に色をつけておきます。

<div class="wrapper">
  <div class="header">header</div>
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
  <div class="footer">footer</div>
  </div>

.wrapper{
  height: 100vh;
}
.header{
  grid-area: header;
  background-color: red;
}
.left{
  grid-area: left;
  background-color: blue;
}
.center{
  background-color: green;
  grid-area: center;
}
.right{
  background-color: yellow;
  grid-area: right;
}
.footer{
  background-color: purple;
  grid-area: footer;
}

実行結果

gridtemplateの設置

.wrapper{
  height: 100vh;
  display: grid; /*gridの設置*/
  grid-template: /*レイアウト部分*/
  "... ...... ...... ...... ...... ...... ..."
  "... header header header header header ..."
  "... ...... ...... ...... ...... ...... ..."
  "... left   ...... center ...... right  ..."
  "... ...... ...... ...... ...... ...... ..."
  "... footer footer footer footer footer ..."
  "... ...... ...... ...... ...... ...... ..."
  ;
}

.header{
  grid-area: header; /*要素をレイアウトのどこに置くか指定*/
  background-color: red;
}
.left{
  grid-area: left; /*要素をレイアウトのどこに置くか指定*/
  background-color: blue;
}
.center{
  grid-area: center; /*要素をレイアウトのどこに置くか指定*/
  background-color: green;
}
.right{
  grid-area: right; /*要素をレイアウトのどこに置くか指定*/
  background-color: yellow;
}
.footer{
  grid-area: footer; /*要素をレイアウトのどこに置くか指定*/
  background-color: purple;
}

実行結果

grid-templateのレイアウト部分で要素の並びを決めて名前をつけ
各要素の中でgrid-areaを指定することで配置ができます。

ここから要素のサイズや余白を調整してみましょう。

要素のサイズや余白を調整

.wrapper{
  height: 100vh;
  display: grid;
  grid-template:
  "... ...... ...... ...... ...... ...... ..." 5px
  "... header header header header header ..." 150px
  "... ...... ...... ...... ...... ...... ..." 0
  "... left   ...... center ...... right  ..." 1fr
  "... ...... ...... ...... ...... ...... ..." 0
  "... footer footer footer footer footer ..." 150px
  "... ...... ...... ...... ...... ...... ..." 5px
  /5px 150px  20px   1fr    10px   200px 5px
  ;
}

.header{
  grid-area: header;
  background-color: red;
}
.left{
  grid-area: left;
  background-color: blue;
}
.center{
  background-color: green;
  grid-area: center;
}
.right{
  background-color: yellow;
  grid-area: right;
}
.footer{
  background-color: purple;
  grid-area: footer;
}

レイアウトの右端、下端で要素や余白を指定できます。
今回は外周を...で要素間を......で指定しています（任意です）

指定内容
・外周は5px
・ヘッダー・フッターは150px
・ヘッダー・フッターとコンテンツの間の余白はゼロ
・レフトとセンターの間は余白は20px
・センターとライトの間の余白は10px
・指定のない部分は残りいっぱいに表示

メディアクエリを使用して縦並びに変更

画面幅481px〜959pxまでをタブレットと想定し縦並びに変えます。
templateの記述を縦並びにするだけです。

@media screen and (min-width:481px) and (max-width:959px){ //tablet start
  .wrapper{
    grid-template: 
    "header" 150px
    "......" 20px
    "left  " 1fr
    "center" 1fr
    "right " 1fr
    "footer" 150px
    ;
  }
} //tablet end

実行結果

記述を変えればこちらも外周で余白を取ることが可能です。
要素の幅を指定しない場合はautoになります。

メリット

この記述を使用することで要素でmarginを設定する必要がなくなります。
またレイアウトの修正や変更にも強く視覚的に調整がしやすくなります。

コードの記述量もflexboxに比べても少ないですね。
繰り返しですがIEは対応できないので2025年を待ちましょう。。。。

Mana本

フォント

〇サイズ　14～18pxで設定
〇フォントの種類

Mana本

フォント

まとめ

html{
  font-size: 100%;
}

body{
  font-family: ;"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
}

〇サイズ　
おすすめは、14～18px

p{
 font-size:14px;
}

スタイルシートでfont-size:100%を指定すると。ブラウザでユーザーが指定したサイズで表示される。
その上で文字の一部分のサイズを変えたい場合は「rem」を使う。1remが100%指定のサイズと同じ。それを基準に変える。

html{
 font-size:100%;
}

.midashi{
 font-sizu:1.5rem;
}

〇フォントの種類
下は「游ゴシック」を基本としたフォントファミリー。

・「游ゴシック」を基本としたフォント設定の解説
https://blog.yoshinonaco.com/font-family-2020/
・フォント設定全般に関しての解説
https://saruwakakun.com/html-css/basic/font-family-how-to

font-family: ;"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;

〇行間設定
おすすめは、1.5～1.9の間

p{
 line-height:1.7;
}

〇文章の揃え
justifyで設定すると右端がきれいに揃う

p{
 text-align:justify;
}

〇枠と文字の間の余白
最低でも文字サイズの1～1.5倍程度のpaddingをつくる

.tekitou{
 padding:16px;
}

HTMLは1つのブロック（画面）をさらに細かいブロックに分けたり（ブロック要素）、そのブロックの中に文字等を並べる（インライン要素）ことができるプログラミング言語。また、CSS言語を用いることでその見た目を思い通りにできる。

ブロック要素

「div」や「h1」などを用いて記述可能領域を形成し、文書等を表現する要素

特徴

-ブロック要素の前後に改行が入り、要素同士は縦に整列
-横幅や高さを設定可能
-ブロックの外側余白（margin）や内側余白（padding）を設定可能

インライン要素

「a」や「span」などを用いてブロック要素内における文書等を横並びに表現する要素

特徴

-インライン要素の前後に改行は入らず、要素同士は横並びに整列
-ブロック要素内に横並びに記述する要素であるため、横幅や高さ、余白を設定できない

2つの要素を使いこなすために

CSSの「display」や「float」プロパティを用いることで、レイアウトを調整可能

CCCプロパティ	項目	意味	特徴
float:	left	要素が左に流れ、後続の要素が右側に回り込む	「clear:both」を用いることで、流れ込みを防げる
	right	要素が右に流れ、後続の要素が左側に回り込む	上と同様
display:	inline	要素がインライン化
	block	要素がブロック要素化
	inline-block	要素がインライン要素とブロック要素両方の特徴を持つ
	none	非表示にする
	flex	親要素に指定すると、子要素が横並びになる	フレックスボックスで検索

参考

WEBST
crwive

HTMLは1つのブロック（画面）をさらに細かいブロックに分けたり（ブロック要素）、そのブロックの中に文字等を並べる（インライン要素）ことができるプログラミング言語。また、CSS言語を用いることでその見た目を思い通りにできる。

ブロック要素

「div」や「h1」などを用いて記述可能領域を形成し、文書等を表現する要素

特徴

-ブロック要素の前後に改行が入り、要素同士は縦に整列
-横幅や高さを設定可能
-ブロックの外側余白（margin）や内側余白（padding）を設定可能

インライン要素

「a」や「span」などを用いてブロック要素内における文書等を横並びに表現する要素

特徴

-インライン要素の前後に改行は入らず、要素同士は横並びに整列
-ブロック要素内に横並びに記述する要素であるため、横幅や高さ、余白を設定できない

2つの要素を使いこなすために

CSSの「display」や「float」プロパティを用いることで、レイアウトを調整可能

CCCプロパティ	項目	意味	特徴
float:	left	要素が左に流れ、後続の要素が右側に回り込む	「clear:both」を用いることで、流れ込みを防げる
	right	要素が右に流れ、後続の要素が左側に回り込む	上と同様
display:	inline	要素がインライン化
	block	要素がブロック要素化
	inline-block	要素がインライン要素とブロック要素両方の特徴を持つ
	none	非表示にする
	flex	親要素に指定すると、子要素が横並びになる	フレックスボックスで検索

参考

WEBST
crwive

Reactでメディアクエリ

メディアクエリを良い感じにしてくれるreact-responsiveなる物が存在するが、微妙になんか使いにくい。
もっとなんか良い感じに使えるようにラッパーした物を定義してみる。

定数定義

なんか良い感じに使えるようにまず良い感じに定数定義をしておく。

constants.tsx

export const BreakPoint = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
} as const;
export type BreakPoint = typeof BreakPoint[keyof typeof BreakPoint];

export const WidthCriteria = {
  max: 'max-width',
  min: 'min-width',
} as const;
export type WidthCriteria = typeof WidthCriteria[keyof typeof WidthCriteria];

Criteriaってワードなんか微妙な感じがするけどまぁ。。。いいか。。。

良い感じな奴を定義

定数を引数に取る良い感じの関数を再定義する。

useMediaQuery.tsx

import { useMediaQuery } from 'react-responsive'
import { BreakPoint, WidthCriteria } from "constants";

export default (breakpoint: BreakPoint, criteria: WidthCriteria): boolean => {
  const emSize = breakpoint / 16;
  return useMediaQuery({
    query: `(${criteria}: ${emSize}em)`
  });
};

使い方はこんな感じ

import React from 'react';
import { BreakPoint, WidthCriteria } from 'constants';
import useMediaQuery from 'useMediaQuery';

const Component: React.FC = () => {
  const isMobile = useMediaQuery(BreakPoint.sm, WidthCriteria.max);
  return (
    <div>
      {isMobile ? 'mobile' : 'desktop'}
    </div>
  );
};

export default Component;

これでなんかもっと良い感じに使えるようになった。

だがまだ良い感じには程遠い

Styled-Componentsでこんな感じに使えるようにしたいが、世の中そんなに甘くない。
Hooksの外でuseを使うなってガチギレされる。

import { BreakPoint, WidthCriteria } from 'constants';
import useMediaQuery from 'useMediaQuery';

const Wrapper = styled.div`
  #{useMediaQuery(BreakPoint.md, WidthCriteria.min) && `
    background-color: red;
  `};
  #{useMediaQuery(BreakPoint.lg, WidthCriteria.min) && `
    background-color: blue;
  `};
`;

const Component: React.FC = () => {
  return (
    <Wrapper>
      responsive
    </Wrapper>
  );
};

Styled-Components用に良い感じな奴を定義

良い感じにメディアクエリを処理できるMixin的な物を定義する。

mediaQuery.tsx

import { css, FlattenSimpleInterpolation } from "styled-components";
import { BreakPoint, WidthCriteria } from "constants";

export default (breakpoint: BreakPoint, criteria: WidthCriteria) => {
  const emSize = breakpoint / 16;
  return (style: FlattenSimpleInterpolation) => css`
    @media (${criteria}: ${emSize}em) {
      ${style};
    };
  `;
};

使い方はこんな感じ

import mq from 'mediaQuery';

const Wrapper = styled.div`
  ${mq(BreakPoint.md, WidthCriteria.min)(css`
    background-color: red;
  `)};
  ${mq(BreakPoint.lg, WidthCriteria.min)(css`
    background-color: blue;
  `)};
`;

const Component: React.FC = () => {
  return (
    <Wrapper>
      responsive
    </Wrapper>
  );
};

おわり

コード全文 https://gist.github.com/Karibash/15bfc974a76bca4ad6e69dfe6fc8f2c7
良い感じにメディアクエリを処理できる物が完成したが、
React初めて１週間くらいなんで、ぶっちゃけこれが正解なのか良くわからない。
マサカリ大歓迎です、待ってます。

100日チャレンジの320日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
320日目は、

おはようございます
320日目　2h
・ポートフォリオ作成

フッターの下部固定がうまくいかんなあ・・・#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) May 18, 2020

簡素な物ですが、
シンプルなプログレスバーのCSSスニペットを作ってみたので投稿。

プログレスバーとは？

プログレスバー（英: Progress Bar）とは、長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するもので、グラフィカルユーザインタフェースの要素（ウィジェット）の一つである。（Wikipediaより）

youtubeの再生時間を表示しているバー、ファイルのダウンロード中の「～％完了」のバー等が代表的ですね！
今回はjQueryを使用せずにページ全体のフォームの入力状態の進捗を表す、入力フォーム用のプログレスバーを作成してみました。

作成したCSSスニペットのサンプル

下部のタブから表示を「0.5x」(スマホの場合は横画面にすると表示されると思います)に小さくしてサンプルの入力欄に文字を入力してみて下さい。

See the Pen
Simple ProgressBar by torajiro_u (@torajiro_u)
on CodePen.

文字を入力すると、上部のバーが動きフォームの入力の進捗度合を示してくれます。
これが今回作成した機能となります。
また、上のサンプルから全体のソースの確認が可能です。

HTML部分機能内容

Javascriptのファイルを読み込ませ、「body」に「onload="taisyou()"」を設定するのみです。
「body」が読み込まれると自動でプログレスバーの動作に必要な処理が行われます。
CSSスニペットとして、導入を簡単にすることを意識して作成しました。

CSS部分機能内容

下の部分がプログレスバーに関係するcssです。

.css

/* progressbar部分
-------------------------------*/
body {
  margin: 0px;
}
.app {
  width: 100%;
  padding: 0px;
  background-color: white;
}
.progress {
  width: 100%;
  height: 10px;
  background-color: #F5F5F5;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
  transition: width 0.5s linear;
  height: 100%;
  background-color: #337AB7;
}

■「.app」がプログレスバーを配置する場所

■「.progress」がプログレスバーを表示する為の枠部分
　・背景が白のページなので色をホワイトスモークに設定しています。

■「.progress-bar」が動作するバー部分
　・transitionがバーが伸び縮みする際のアニメーションの設定です。
　・フォーム入力時のjsの処理の結果、ここにwidthの%を設定することでバーを伸び縮みさせています

JS部分機能内容

処理部分です。

.js

var step;
var forms = document.querySelectorAll("form");
var allinp = 0;
var p;

function taisyou(){
  p = new Progress(0);
  for(var i = forms.length;i--;){
    var inp = forms[i].querySelectorAll("input[type='text'],textarea,select");
    allinp += inp.length; //プログレスバーの進捗の対象を数える
    for(var j = inp.length;j--;){
      inp[j].setAttribute("onChange","koushin(this)");
    }
  }
  step = 100/allinp;//プログレスバーが一度の進捗で進む％
}

function koushin($this){//入力内容が更新されるたびにプログレスバーの進捗の状態を再計算する
  var elem = $this;
  if($this.value){
    var text = $this.value;
    elem.className = 'up';//入力内容がnullではない場合にクラス名を変更
  }else{
    elem.className = '';
  }
  var nowUp = document.getElementsByClassName('up');//変更したクラス名の数を計算
  var status = allinp - (allinp - nowUp.length);
  p = status*step;
  new Progress(p);//バーに反映させるファンクションを呼び出す
}


var Progress = (function () {
  function Progress (p) {
      this.bar = document.querySelectorAll('#prog-bar > .progress-bar')[0];
      this.p = p;
      this.update();
    };
    Progress.prototype.update = function () {
      this.bar.style.width = this.p + '%';
    };
    return Progress;
}());

■「taisyou()」ファンクション
　・bodyが読み込まれると同時に処理が走ります。
　・バーの進捗を初期化（０％）します。
　・form配下のinput等バーの進捗に影響を与えさせる要素の数を算出します。
　・100をバーの進捗に影響を与える要素の数で割り1進捗で何%進むか設定します。
　・バーの進捗に影響を与える要素に「onChange="koushin(this)"」イベントを設定します。

■「koushin($this)」ファンクション
　・onChangeイベントが設定された箇所に入力が行われる度に処理を実行し入力
内容を確認します。
　・入力内容がnullではない時にクラス名を「up」に変更します。
　・ページ内の「up」と名前のついたクラスの数を確認し、その時バーは何％の進捗か計算します。
　・バーに進捗を反映させるファンクションに算出した％を渡します。

■「Progress(p)」ファンクション
　・「koushin($this)」ファンクションで算出したバーの進捗率(p%)を「.progress-bar」のwidthに設定することでバーを動作させます。

最後に

今回作成した機能はとてもシンプルかつ、ほぼ最低限度動作するだけのものなので
入力の進捗率によってバーの色を変えてみたり等色々改修を加えていくのも面白そうだなと思いました。

はじめに

htmlでヘッダーやフッターを共通パーツ化する方法

こうしたことは最近ではVue.jsなどでラクに実現できてしまいますが、今回はプログラマじゃなくても保守できるように。。ということが推奨されたため、できるだけ簡素な方法で実装しました。
そして、ヘッダー部分で必要なjsが何故か読み込めず相当ハマってしまったのでその解決法もあわせて記述します。

手順

以下の方の記事が一番わかりやすく実行しやすかったです。
https://qiita.com/sho11hei12-1998/items/e9c81db697fb5d51e2af

切り分けた先の共通パーツでは、idをあらためて指定しなくてもindex.html内で指定しておけばいい感じに読み込んでくれるようです。
header内のmenuWrap部分をクリックすることで、メニュー（panel内の部分）を開閉できるようにしたい、というのが主に実現したいことです。

index.html

<!DOCTYPE HTML>
<head>
  <link rel="stylesheet" media="all" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
  <script src="js/script.js"></script>
</head>
<html>
  <body>
    <!-- header.html -->
    <header id="header"></header>
    <div>
      <h1>中身（コンテンツ）</h1>
    </div>
    <!-- footer.html 今回は使いません -->
    <footer id="footer"></footer>
  </body>
</html>

header.html

<!-- header共通ファイル -->
<div id="headerWrap">
    <h1><a href="index.html"><img src="images/logo.png" width="284" height="160" alt="logo"></a></h1>
    <nav id="mainnav">
        <p id="menuWrap">
          <a id="menu"><span id="menuBtn"></span></a>
        </p>
        <div class="panel">
            <ul>
                <li><to><a href="index.html">トップページ"</a></to></li>
                <li><to><a href="about-us.html">ご挨拶</a></to></li>
                <li><to><a href="archives.html">業績</a></to></li>
                <li><to><a href="contact.html">お問い合わせ</a></to></li>
            </ul>
        </div>
    </nav>
</div>

style.css

    .panel {
        width: 100%;
        display: none;
        overflow: hidden;
        position: relative;
        left: 0;
        top: 0;
        z-index: 100;
    }
    #menuBtn {
        display: block;
        position: absolute;
        top: 60%;
        left: 50%;
        width: 18px;
        height: 2px;
        margin: -1px 0 0 -7px;
        background: #000;
        transition: .2s;
    }
    #menuBtn:before, #menuBtn:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 18px;
        height: 2px;
        background: #000;
        transition: .3s;
    }
    a#menu .close {
        background: transparent;
    }
    a#menu .close:before, a#menu .close:after{
        margin-top: 0;
    }
    a#menu .close:before {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    a#menu .close:after {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

script.js

$(function(){
    // html 共通部分読み込み
    $("#header").load("header.html");
    $("#footer").load("footer.html");

    // 中略

    $('#menuWrap').on('click', function() {
        $(this).next().slideToggle();
        $('#menuBtn').toggleClass('close');
    },
    function() {
        $(this).next().slideToggle();
        $('#menuBtn').removeClass('close');
    });
});

上記では概ね必要最低限のソースのみ記述していますが、画面右側に開閉できるハンバーガーメニューのついたヘッダーを生成しました。いや、そのつもりでした。

さて、パーツ切り分けはできたけど

jsが効かなくなってしまった

ここまで書いたところでメニューの開閉が出来なくなってしまいました。あらやだ！
headerファイルを切り分ける前は正常にscript.jsを読み込み動いており、パーツを切り分けて$("#header").load("header.html");を追記した部分も正常に動いてくれるので、js全体を読み込んでいないわけではなさそう。

作業途中でjQueryのバージョンを変えた(1.8.0->1.9.1)こともあり、廃止メソッドのせいかな？と思い色々試してみるも効果なし。
あと何故かブラウザのデバッグにも引っかからず(理由はわかりません)

解決

https://webdesign-abc.com/tech/easy-edit/

大元のhtmlで使用しているjsの機能を使いたい場合は、共通パーツ内の最初に、必要なjsファイルを記述する必要があります。

大元のhtmlで読み込んでいるjsはheaderでは読み込んでくれないようです。
cssは何もしなくても正常に読み込んでくれるのでjsもそんなかんじとうっかり思い込んでました……。

jsを直接記述する

header.html

<!DOCTYPE HTML>
<!-- header共通ファイル -->
<script>
    $('#menuWrap').on('click', function() {
        $(this).next().slideToggle();
        $('#menuBtn').toggleClass('close');
    },
    function() {
        $(this).next().slideToggle();
        $('#menuBtn').removeClass('close');
    });
</script>
<div id="headerWrap">
    <h1><a href="index.html"><img src="images/logo.png" width="284" height="160" alt="logo"></a></h1>
    <nav id="mainnav">
        <p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
        <div class="panel">
            <ul>
                <li><to><a href="index.html"><img src="images/toppage.png" width="130" alt="トップページ"></a></to></li>
                <li><to><a href="about-us.html"><img src="images/introduce.png" width="130" alt="楽団紹介"></a></to></li>
                <li><to><a href="archives.html"><img src="images/archives.png" width="130" alt="過去の演奏会"></a></to></li>
                <li><to><a href="contact.html"><img src="images/inquiry.png" width="130" alt="お問い合わせ"></a></to></li>
            </ul>
        </div>
    </nav>
</div>

開閉できた！

見やすくするため画像にグレー背景をつけています

所感

今回のようにファイル切り分けてjs読み込むとか、DOM操作して生み出したパーツにjsを当てるときの特殊なお作法とか、js(およびjQuery)はわりと引っかかりやすいポイントありますね……。
慣れなのかな。