実現したいこと
htmlとcssで左側にサイドメニューを作りたいです。
前提
htmlとcssで左側にサイドメニューを作りたいのですが、位置が上手く行きません。
サイドメニュー コンテンツ
のような配置にしたいのに、
サイドメニュー
コンテンツ
のように、サイドメニューの右側にコンテンツが来ないで、下に移ってしまいます。
該当のソースコード
html
1<!DOCTYPE html>2<html>3 4<head>5 <meta charset="utf-8">6 <title>コンテンツ</title>7 <link rel="stylesheet" href="side_menu.css">8</head>9 10<body>11 <!--サイドメニュー-->12 <div class="sidemenu">13 <ul class="menu">14 <li class="menu-item">15 一つ目 16 </li>17 <li class="menu-item">18 二つ目 19 </li>20 <li class="menu-item">21 三つ目 22 </li>23 <li class="menu-item">24 四つ目 25 </li>26 </ul>27 </div>28 29 <!--メインコンテンツ-->30 <div id="contents">31 <h3>コンテンツ</h3>32 </div>33</body>34 35</html>
CSS
1html, body {2 padding: 0;3 margin: 0;4 height: 100%;5 width: 100%;6}7 8/*サイドメニュー*/9ul, li {10 margin: 0;11 padding: 0;12 list-style: none;13}14 15.sidemenu {16 height: 100%;17}18 19.menu {20 background: rgb(130, 199, 119);21 position: absolute;22 z-index: 6;23 height: 100%;24 width: 4%;25 white-space: nowrap;26 overflow: hidden;27 transition: width 0.3s ease-in-out, height 0.3s ease-in-out;28 transition-delay: 0.2s;29}30 31.menu-item {32 line-height: 30px;33}34 35.menu-item:hover {36 background: lightgrey;37 transition: background-color 0.2s ease-in-out;38 /*cursor: pointer;*/39}40 41.menu:hover {42 width: 20%;43}44 45/*メインコンテンツ*/46#contents {47 background: black;48 color:rgb(255, 255, 255);49 height: 100%;50 padding-left: 5px;51 margin-left: 4%;52 box-sizing: border-box;53 z-index: 3;54}
試したこと
contentsの方の幅を小さくしたり、floatで左右に寄せたりはしてみましたが、ダメでした。
0 コメント