<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>all</title>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="C.css" type="text/css" id="stylesheet">
</head>
<body>
<label for="design">選択してください</label>
<select id="design">
<option value="C">C</option>
<option value="D">D</option>
</select>
<div>
<input type="button" value="Check" id="checkButton">
</div>
<!-- ヘッダー -->
<div id="header">
<header class="site-header design-C">
<div class="header-list">
<img src="image/view_cloud01_01.png" alt="site-logo" class="header-logo">
<ul>
<li class="menu"><a class="menu1-url menu1" href ="#">ホーム</a></li>
<li class="menu"><a class="menu2-url menu2" href ="#">メニュー</a></li>
<li class="menu"><a class="menu3-url menu3" href ="#">メニュー</a></li>
<li class="menu"><a class="menu4-url menu4" href ="#">メニュー</a></li>
</ul>
</div>
</header>
<header class="site-header design-D">
<div class="header-list">
<ul class="menu-1">
<li class="menu"><a class="menu1-url menu1" href ="#">ホーム</a></li>
<li class="menu"><a class="menu2-url menu2" href ="#">メニュー</a></li>
</ul>
<img src="image/view_cloud01_01.png" alt="site-logo" class="header-logo">
<ul class="menu-2">
<li class="menu"><a class="menu3-url menu3" href ="#">メニュー</a></li>
<li class="menu"><a class="menu4-url menu4" href ="#">メニュー</a></li>
</ul>
</div>
</header>
</div>
<!-- //ヘッダー -->
<!-- メインコンテンツ -->
<div id="main">
<!-- トップイメージ -->
<div id="top-image">
<div class="top-image design-C design-D">
<img src="image/sample3.jpg" alt="top-image" class="top-img">
<h2 class="img-text top-image-text">サンプルテキストサンプル</h2>
</div>
</div>
<!-- //トップイメージ -->
<!-- アバウト -->
<div id="about">
<div class="about design-C">
<h1 class="about-title1">サンプルタイトル</h1>
<p class="about-text1">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>
<div class="about design-D">
<h1 class="about-title1">サンプルタイトル</h1>
<div class="about-texts">
<p class="about-text1">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<img src="image/sample3.jpg" alt="about-image" class="about-img1">
</div>
</div>
</div>
<!-- //アバウト -->
</div>
<!-- //メインコンテンツ -->
<!-- フッター -->
<footer class="footer">
<p>Copyright (C) 2018-2021 SKIP - Shonai Koeki Information Project - . All Rights Reserved.</p>
</footer>
<!-- //フッター -->
<script>
function buttonClick(){
let designSelect = document.getElementById('design');
let num = designSelect.selectedIndex;
var css = document.getElementById("stylesheet");
css.setAttribute("href", designSelect[num].value + ".css");
console.log('選択されているのは ' + designSelect.value + ' です');
}
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', buttonClick);
console.log("デザイン変更JS読み込み");
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/textchange.js"></script>
</body>
</html>
