jsjq.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript / jQuery | 課題サイト</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
</head>
<body>
<header class="header">
<div class="container">
<h1><a href="index.html"><img src="img/title.svg" alt="課題サイト"></a></h1>
<nav class="gnav" id="gnav">
<ul>
<li><a href="index.html">Web Site</a></li>
<li><a href="#" class="current">JavaScript<br>jQuery</a></li>
<li><a href="psai.html">Photoshop<br>Illustrator</a></li>
<li><a href="other.html">Other</a></li>
</ul>
</nav>
<div class="nav_button" id="navButton">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<main class="main">
<div class="key_visual_jsjq">
<h2>【JS / jQ 制作ポイント】</h2>
<ul>
<li>JavaScriptの基本アルゴリズムの演習を「コンソール」と「ブラウザ」に表示</li>
<li>イベントによるDOM操作をいろいろなバリエーションで記述</li>
<li>アニメーションの動きは、jQueryを中心に学習</li>
</ul>
</div>
<div class="container">
<ul class="jsjq">
<li><a href="jsjq/dark/index.html">
<img src="img/dark.webp" alt="01 ダークモード">
<h3>01 ダークモード</h3>
</a></li>
<li><a href="jsjq/input_text/">
<img src="img/input_text.webp" alt="02 入力された文字">
<h3>02 入力された文字</h3>
</a></li>
<li><a href="jsjq/arithmetic/index.html">
<img src="img/arithmetic.webp" alt="03 四則演算">
<h3>03 四則演算</h3>
</a></li>
<li><a href="jsjq/even_odd/index.html">
<img src="img/even_odd.webp" alt="04 偶数奇数">
<h3>04 偶数奇数</h3>
</a></li>
<li><a href="jsjq/payment/index.html">
<img src="img/tax.webp" alt="05 消費税計算">
<h3>05 消費税計算</h3>
</a></li>
<li><a href="jsjq/birthday/index.html">
<img src="img/birthday.webp" alt="06 誕生日までの残数">
<h3>06 誕生日までの残数</h3>
</a></li>
<li><a href="jsjq/for_total/index.html">
<img src="img/for_total.webp" alt="07 整数の合計">
<h3>07 整数の合計</h3>
</a></li>
<li><a href="jsjq/luck/index.html">
<img src="img/luck.webp" alt="08 おみくじ">
<h3>08 おみくじ</h3>
</a></li>
<li><a href="jsjq/dice/index.html">
<img src="img/dice.webp" alt="09 サイコロ">
<h3>09 サイコロ</h3>
</a></li>
<li><a href="jsjq/swap_image/index.html">
<img src="img/swap_img.webp" alt="10 画像置換">
<h3>10 画像置換</h3>
</a></li>
<li><a href="jsjq/accordion/index.html">
<img src="img/accordion.webp" alt="11 アコーディオンパネル">
<h3>11 アコーディオンパネル</h3>
</a></li>
<li><a href="jsjq/bxslider/index.html">
<img src="img/bxslider.webp" alt="12 bxSlider">
<h3>12 bxSlider</h3>
</a></li>
<li><a href="jsjq/lightbox/index.html">
<img src="img/lightbox.webp" alt="13 Lightbox">
<h3>13 Lightbox</h3>
</a></li>
</ul>
</div>
</main>
<footer class="footer">
<p id="update">更新日：2024年12月20日</p>
</footer>
</body>
</html>
.key_visual_jsjq {
padding: 60px 6vw 20px 27vw;
width: 100%;
height: 400px;
background: url(../img/main2.webp) no-repeat center center / cover;
color: #fff;
}
.key_visual_jsjq h2 {
margin-bottom: 10px;
}
.key_visual_jsjq ul {
padding-left: 2.5rem;
list-style-type: disc;
}
.key_visual_jsjq li {
margin-bottom: 4px;
line-height: 1.3;
}
.jsjq {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
column-gap: 10px;
row-gap: 40px;
margin-top: -200px;
margin-bottom: 40px;
}
.jsjq img {
margin-bottom: 10px;
}
.jsjq h3 {
text-align: center;
}
@media screen and (max-width: 767px) {
.key_visual_jsjq {
padding: 20px 1.0rem 0 1.2rem;
width: 100vw;
height: 240px;
background: url(../img/sub2.webp) no-repeat left center / cover;
color: #fff;
}
.key_visual_jsjq h2 {
font-size: 0.95rem;
text-align: center;
}
.key_visual_jsjq ul {
font-size: 0.875rem;
}
.key_visual_jsjq li {
margin-bottom: 4px;
line-height: 1.2;
}
.jsjq {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
margin-top: -80px;
}
}
script.js
document.querySelector('#navButton').addEventListener('click', () => {
document.querySelector('html').classList.toggle('open');
});
