psai.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photoshop / Illustrator | 課題サイト</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="#" class="current">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_psai">
<h2>【PS / AI 制作ポイント】</h2>
<ul>
<li>バナートレースを通して、構図・色彩・書体について学習</li>
<li>Photoshopで切り抜き・レイヤーマスクを中心に学習</li>
<li>スマートオブジェクトで配置でオブジェクトの理解</li>
<li>ペンツールが自由に使えることを目指しました</li>
</ul>
</div>
<div class="container">
<ul class="psai">
<li><a href="psai/famima_cafe/index.html">
<img src="img/famima_cafe.webp" alt="変新！アイスコーヒー">
<h3>変新！アイスコーヒー</h3>
</a></li>
<li><a href="psai/soyjoy/index.html">
<img src="img/soyjoy.webp" alt="SOYJOY">
<h3>SOYJOY</h3>
</a></li>
<li><a href="psai/banana/index.html">
<img src="img/banana.webp" alt="BANANA BRULEE">
<h3>BANANA BRULEE</h3>
</a></li>
<li><a href="psai/gogo/index.html">
<img src="img/gogo.webp" alt="午後の紅茶">
<h3>午後の紅茶</h3>
</a></li>
<li><a href="psai/amagazine/index.html">
<img src="img/amagazine.webp" alt="AMUのマガジン">
<h3>AMUのマガジン</h3>
</a></li>
<li><a href="psai/autumn/index.html">
<img src="img/autumn.webp" alt="季節の味覚">
<h3>季節の味覚</h3>
</a></li>
<li><a href="psai/gifts/index.html">
<img src="img/gifts.webp" alt="GIFTS">
<h3>GIFTS</h3>
</a></li>
<li><a href="psai/ebi/index.html">
<img src="img/ebi.webp" alt="ごはん海老">
<h3>ごはん海老</h3>
</a></li>
<li><a href="psai/reiru/index.html">
<img src="img/reiru.webp" alt="JR西日本">
<h3>JR西日本</h3>
</a></li>
<li><a href="psai/nibea/index.html">
<img src="img/nibea.webp" alt="Angel Skin">
<h3>Angel Skin</h3>
</a></li>
<li><a href="psai/lemon_cake/index.html">
<img src="img/lemoncake.webp" alt="LEMON CAKE">
<h3>LEMON CAKE</h3>
</a></li>
<li><a href="psai/actus/index.html">
<img src="img/actus.webp" alt="ACTUS">
<h3>ACTUS</h3>
</a></li>
<li><a href="psai/ayataka/index.html">
<img src="img/ayataka.webp" alt="綾鷹 雲海茶会">
<h3>綾鷹 雲海茶会</h3>
</a></li>
<li><a href="psai/crown/index.html">
<img src="img/crown.webp" alt="CROWN">
<h3>CROWN</h3>
</a></li>
<li><a href="psai/godiva/index.html">
<img src="img/godiva.webp" alt="15 GODIVA">
<h3>15 GODIVA</h3>
</a></li>
<li><a href="psai/pop/index.html">
<img src="img/pop.webp" alt="POP-UP SHOP">
<h3>POP-UP SHOP</h3>
</a></li>
<li><a href="psai/mow/index.html">
<img src="img/mow.webp" alt="MOW">
<h3>MOW</h3>
</a></li>
<li><a href="psai/komeco/index.html">
<img src="img/komeco.webp" alt="komeco">
<h3>komeco</h3>
</a></li>
<li><a href="psai/natsumi/index.html">
<img src="img/moss.webp" alt="モスの菜摘">
<h3>モスの菜摘</h3>
</a></li>
<li><a href="psai/logos/index.html">
<img src="img/logos.webp" alt="色々なロゴ">
<h3>色々なロゴ</h3>
</a></li>
</ul>
</div>
</main>
<footer class="footer">
<p id="update">更新日：2024年12月20日</p>
</footer>
</body>
</html>
.key_visual_psai {
padding: 60px 6vw 20px 27vw;
width: 100%;
height: 400px;
background: url(../img/main3.webp) no-repeat center center / cover;
color: #333;
}
.key_visual_psai h2 {
margin-bottom: 10px;
}
.key_visual_psai ul {
padding-left: 2.5rem;
list-style-type: disc;
}
.key_visual_psai li {
margin-bottom: 4px;
line-height: 1.3;
}
.psai {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
column-gap: 10px;
row-gap: 10px;
margin-top: -200px;
margin-bottom: 40px;
}
.psai li {
padding: 10px;
background-color: #fff;
box-shadow: 0 0 4px #aaa;
border-radius: 6px;
}
.psai img {
margin-bottom: 10px;
}
.psai h3 {
font-size: 1.125rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.key_visual_psai {
padding: 20px 1.0rem 0 1.2rem;
width: 100vw;
height: 240px;
background: url(../img/sub3.webp) no-repeat left center / cover;
color: #333;
}
.key_visual_psai h2 {
font-size: 0.95rem;
text-align: center;
}
.key_visual_psai ul {
font-size: 0.875rem;
}
.key_visual_psai li {
margin-bottom: 4px;
line-height: 1.2;
}
.psai {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
margin-top: -80px;
}
.psai h3 {
font-size: 1.0rem;
}
}
script.js
document.querySelector('#navButton').addEventListener('click', () => {
document.querySelector('html').classList.toggle('open');
});
