CSS：ナビゲーションを作る

ul(ol)セレクタにプロパティと値を設定

記述例

ul{
  list-style-type:none;/*マーカーを非表示*/
  padding-left:20px;
  padding-right:20px;
  display:flex;/*li要素を横に並べる*/
  justify-content:space-between;/*均等配置*/
}

liセレクタにプロパティと値を設定

記述例

html

<li><a href="#">メニュー</a><li>

css

ul a{

  border:solid 1px #666;

  display:block;/*ブロック要素の様に幅や高さが指定できるようになる*/

  width:130px;

  height:30px;

  color:#666;

  text-decoration:none;/*下線を非表示*/

  text-align:center;

  line-height:30px;/*display:block;を設定したことで、インライン要素に使えるvartical-alignが使えないので、縦位置をこれで調整*/

}

ul a:hover{

  background-color:#666;

  color:#fff;

}