【CSS】メニューを横並びに配置する

ulタグの display を flex に設定する。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>【CSS】メニューを横並びに配置する</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">WORKS</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </body>
</html>

style.css

@charset "utf-8";

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

nav li {
  width: 200px;
  text-align: center;
}

nav li a {
  text-decoration: none;
}

今回の場合、各項目の幅が200pxのメニューが画面中央寄せで横並びに配置される。

サンプルページ

タイトルとURLをコピーしました