Other 記述例
other.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Other | 課題サイト</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="jsjq.html">JavaScript<br>jQuery</a></li>
<li><a href="psai.html">Photoshop<br>Illustrator</a></li>
<li><a href="#" class="current">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_other">
<h2>【サイト設計・WPなど 制作ポイント】</h2>
<ul>
<li>企画立案・要件定義で条件を作成</li>
<li>条件を前提に、ワイヤーフレームとカンプ作成</li>
<li>自作したルールをもとにコーディング</li>
<li>WordPressの記事を更新することで上位表示を実践</li>
</ul>
</div>
<div class="container">
<ul class="other">
<li><a href="PDFのURL">
<img src="img/comp.webp" alt="企画・要件定義">
<h3>企画・要件定義</h3>
</a></li>
<li><a href="other/rule/index.html" target="_blank">
<img src="img/rule.webp" alt="コーディングルール">
<h3>コーディングルール</h3>
</a></li>
<li><a href="other/washoku/index.html">
<img src="img/washoku.webp" alt="和食の魅力">
<h3>和食の魅力</h3>
</a></li>
<li><a href="other/wedding/index.html">
<img src="img/wedding.webp" alt="Wedding Party">
<h3>Wedding Party</h3>
</a></li>
<li><a href="other/school/index.html">
<img src="img/school.webp" alt="ABC英会話スクール">
<h3>ABC英会話スクール</h3>
</a></li>
</ul>
</div>
</main>
<footer class="footer">
<p id="update">更新日：2024年12月20日</p>
</footer>
</body>
</html>
.key_visual_other {
padding: 60px 6vw 20px 27vw;
width: 100%;
height: 400px;
background: url(../img/main4.webp) no-repeat center center / cover;
color: #fff;
}
.key_visual_other h2 {
margin-bottom: 10px;
}
.key_visual_other ul {
padding-left: 2.5rem;
list-style-type: disc;
}
.key_visual_other li {
margin-bottom: 4px;
line-height: 1.3;
}
.other {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
column-gap: 10px;
row-gap: 40px;
margin-top: -200px;
margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
.key_visual_other {
padding: 20px 1.0rem 0 1.2rem;
width: 100vw;
height: 240px;
background: url(../img/sub4.webp) no-repeat left center / cover;
}
.key_visual_other h2 {
font-size: 0.95rem;
text-align: center;
}
.key_visual_other ul {
font-size: 0.875rem;
}
.key_visual_other li {
margin-bottom: 4px;
line-height: 1.2;
}
.other {
margin-top: -80px;
}
}
script.js
document.querySelector('#navButton').addEventListener('click', () => {
document.querySelector('html').classList.toggle('open');
});
