※ ChatGPTを利用し、要約された質問です（原文：ヘッダ部分のメニューを固定）
ヘッダ部分のメニューを固定にする方法
このQ&Aのポイント
ヘッダ部分のメニューを固定にする方法を教えてください。
下記CSSでヘッダ部分のメニューを固定にした場合、コンテンツの写真がメニューの上に来てしまいます。メニュー部分を上にしてコンテンツの写真をスライドする方法を教えてください。
ヘッダ部分のメニューを固定にしている場合に、コンテンツの写真をスライドさせる方法を教えてください。
下記CSSでヘッダ部分のメニューを固定にした場合、
コンテンツの写真がメニューの上に来てしまうのですが
メニュー部分を上にしてコンテンツの写真をスライドするにはどうすればいいのでしょうか？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.viewsort-control {
display: block;
width: 100%;
height: 35px;
border-bottom: solid 1px #FF69b4;
}
.viewsort-control li {
margin: 2px 0 0 0;
display: block;
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 33px;
overflow: hidden;
border: solid 1px #bcb08a;
-webkit-border-radius: 0px;
border-radius: 0px;
background: transparent;
-webkit-box-shadow: 0px 1px 3px rgba(192, 178, 139, 0.5);
box-shadow: 0px 1px 3px rgba(192, 178, 139, 0.5);
font-size: 130%;
height: 31px;
color: #13131e;
font-weight: bold;
line-height: 32px;
text-align: center;
}
.viewsort-control li.selected-default {
width: 19%;
margin-left: 1%;
border-bottom: solid 1px #ffffff;
-webkit-background-size: 2px 38px;
background-size: 2px 38px;
}
div.imagebox {
border: 1px dashed #0000cc; /* 1.枠線 */
background-color: #eeeeff; /* 2.背景色 */
}
p.image, p.caption {
text-align: center; /* 3.中央寄せ */
margin: 0px; /* 4.余白・間隔 */
}
p.caption {
font-size: 80%; /* 5.文字サイズ */
position: absolute;
left: 0;
bottom: 3px;
color: #fff;
margin: 0;
padding: 5px 0 5px 3%;
width: 97%;
background: #000;
filter: Alpha(opacity=70);
opacity: 0.7;
}
div.imagebox {
border: 1px dashed #0000cc; /* 枠線 */
background-color: #eeeeff; /* 背景色 */
float: left; /* 左に配置 */
margin: 5px; /* 周囲の余白 */
}
.image_area {
text-align : center ;
}
.image_table {
margin-left : auto ;
margin-right : auto ;
border:none;
}
.image_td {
width: 50%;
position: relative;
}
.image_set {
width: 100%;
}
.fixed {
position: fixed;
width: 100%;
}
-->
</style>
</head>
<body>
<div class="fixed">
<ul class="viewsort-control">
<li class="selected-default">
<a>
<mark>割引マップ</mark>
</a>
</li>
<li class="selected-default">
<a>
<mark>割引マップ</mark>
</a>
</li>
</ul>
</div>
<div class="image_area">
<table class="image_table">
<tr>
<td class="image_td">
<p class="image"><img src="./photo.jpg" alt="海の写真" class="image_set"></p>
<p class="caption">キャプションですよ</p>
</td>
</tr>
</table></div>
</body>
</html>
お礼
ありがとうございます。