縦並びのメニューをつくる

nav,ul,liタグとCSSを使って横並びのメニューをつくる


メニュー1

メニュー2(角が丸い)

メニュー3(角が丸い、中央配置)

メニュー4(角が丸い、均等配置)

メニュー5(角が丸い、均等配置、背景黒)

メニュー6(角が丸い、均等配置、背景黒、最後のメニューだけ右端に)

メニュー7(角が丸い、均等配置、背景灰色)

htmlおよびCSS


<nav class="hmenu1">
  <ul>
    <li><a href="">メニュー1</a></li>
    <li><a href="">メニュー2</a></li>
    <li><a href="">メニュー3</a></li>
    <li><a href="">メニュー4</a></li>
  </ul>
</nav>

<style>
/* メニュー1 */
nav.hmenu1{width:100%;}
nav.hmenu1 ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  background:#eff;
}
nav.hmenu1 ul li:hover{
  background:#def;
}
nav.hmenu1 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  text-shadow: 1px 2px 3px #aaa;
}

/* メニュー2 */
nav.hmenu2{width:100%;}
nav.hmenu2 ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#eff;
}
nav.hmenu2 ul li:hover{
  background:#def;
}
nav.hmenu2 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu2 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  text-shadow: 1px 2px 3px #aaa;
}

/* メニュー3 */
nav.hmenu3{width:100%;}
nav.hmenu3 ul{
  display:flex;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#eff;
}
nav.hmenu3 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu3 ul li:hover{
  background:#def;
}
nav.hmenu3 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  text-shadow: 1px 2px 3px #aaa;
}

/* メニュー4 */
nav.hmenu4{width:100%;}
nav.hmenu4 ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#eff;
}
nav.hmenu4 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu4 ul li:hover{
  background:#def;
}
nav.hmenu4 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  text-shadow: 1px 2px 3px #aaa;
}

/* メニュー5 */
nav.hmenu5{width:100%;}
nav.hmenu5 ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#222;
}
nav.hmenu5 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu5 ul li:hover{
  background:#00f;
}
nav.hmenu5 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#fff;
  text-shadow: 1px 2px 2px #fff;
}

/* メニュー6 */
nav.hmenu6{width:100%;}
nav.hmenu6 ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#222;
}
nav.hmenu6 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu6 ul li:hover{
  background:#00f;
}
nav.hmenu6 ul li:last-child{
  margin-left:auto;
}
nav.hmenu6 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#fff;
  text-shadow: 1px 2px 2px #fff;
}

/* メニュー7 */
nav.hmenu7{width:100%;}
nav.hmenu7 ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#999;
}
nav.hmenu7 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu7 ul li:hover{
  background:#333;
}
nav.hmenu7 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#fff;
  text-shadow: 1px 2px 2px #fff;
}
</style>





Mam's WebSite