HTMLとCSSでテキストの固定方法が分からないです
Q&A
解決したいこと
下の画像は左側にアコーディオンメニューがあり、中央から右側はテキストスペースとなっております。
今、タイトルとテキストを記述しましたが、アコーディオンメニューのラベルをクリックする度に2枚目のように下に下がってきます。
実現したいことは3枚目の画像のように、アコーディオンメニューのラベルをクリックしてもタイトルとテキストは一定の位置に固定できることです。
CSSの部分で何か追加すれば実現できますが何を書いたら良いか分からず困っております。
何か解決方法があれば教えてください。
できれば私が書いたプログラミングをそのまま使い(スタイルは変更せずに)、上記が実現出来るか押していただきたいです。
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>demo</title>
</head>
<body>
<div>
<div class="menu">
<input id="menu01" type="checkbox" name="tabs">
<label for="menu01">メニュー1</label>
<div class="link">
<a href="page1.1.html">リンク1</a><br>
<div class="menu1">
<input id="menu01_1" type="checkbox" name="tabs">
<label for="menu01_1">リンク2</label>
<div class="link">
<a href="page1.2.1.html">リンク3</a><br>
<a href="page1.2.2.html">リンク4</a><br>
<a href="page1.2.3.html">リンク5</a><br>
</div>
</div>
</div>
</div>
</div>
<div class="contents">
<h1>タイトル</h1>
<p>hello world</p>
</div>
</body>
</html>
/*-----------------
メニューバーのデザイン
-------------------*/
.menu {
position: relative; left:1px;
overflow: hidden;
width: 24%;
color: #000000;
}
.menu input {
position: absolute;
z-index: -1;
opacity: 0;
}
.menu label {
font-weight: bold;
line-height: 3;
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #87cefa;
font-size: 13px;
}
/* .menu1 label {
font-weight: 30px;
line-height: 3;
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #add8e6;
font-size: 13px; */
.menu .link {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
color: #333333;
background: #afeeee;
height: auto;
}
.menu .link a {
margin: 1em;
width: 450px; /* ボックスの横幅を指定する */
font-size: 13px; /* フォントのサイズを指定する */
line-height: 45px; /* 行の高さを実数値＋単位(px)で指定する */
color: #000000;
}
/* :checked */
.menu input:checked ~ .link {
max-height: 60em;
}
.menu1 input:checked ~ .link {
max-height: 60em;
}
/* Icon */
.menu label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.menu input[type=checkbox] + label::after {
content: '+';
}
.menu input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
/*-----------------
本文のデザイン
-------------------*/
.contents{
text-align: center; /* 中央寄せ */
}
0
