ナビゲーションメニュー,HTML,CSS

ナビゲーションメニュー、HTML,CSSだけどきちんとまとめておく。

  <nav class="globalNavi">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="about.html">コンドミニアム紹介</a></li>
            <li><a href="access.html">アクセス</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
        </ul>
    </nav>

navタグで囲む

その配下にulとliタグ

CSS

.globalNavi {
  background: url("../images/gnavi_bg.png") repeat-x left top;//画像へのパス
  margin-bottom: 10px;
  border-top: 1px solid #fff; }
  .globalNavi ul {
    width: 1000px;　//全体の幅
    margin-right: auto;　//これで中央揃え
    margin-left: auto;  //これで中央揃え
    *zoom: 1;
    height: 67px; }
    .globalNavi ul:before, .globalNavi ul:after {
      display: table; //天地揃えたり、いろいろ便利
      content: "";
      line-height: 0; }

    .globalNavi ul:after { //これしておかないと後続の表示が崩れます。
      clear: both; }

    .globalNavi ul li {
      float: left;　//左揃え
      width: 250px;　//一つ一つのボタンサイズ
      height: 63px;
      margin: 3px 0 0 0;
      border-left: 1px solid #ccc;
      border-right: 1px solid #fff;
      vertical-align: middle;
      text-align: center; //普通真ん中に揃えます
      overflow: hidden; } //はみ出たものは無視しないと、形くずれます。

      .globalNavi ul li a:hover img { //マウスが乗っかったときの処理
        opacity: 0.8; //上記のようにボタンの上に来ると薄く表示
        filter: alpha(opacity=0.8);
        -ms-filter: "alpha( opacity=$alpha )"; }

      .globalNavi ul li:last-child {//ボタンの左に縦の棒の線が入っているので、最後のボタンにはcssで追加
        border-right: 1px solid #ccc; }

      .globalNavi ul li a {
        color: #333;
        text-decoration: none;
        padding: 22px 0px;
        display: block;
        font-weight: bold;
        text-align: center; }
        .globalNavi ul li a:hover {
          background-color: rgba(255, 255, 255, 0.8); }

CSSもきちんとかけないといけない。

参考にした本 この本おすすめです。

https://www.amazon.co.jp/WordPress-%E4%BB%95%E4%BA%8B%E3%81%AE%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%82%B5%E3%83%83%E3%81%A8%E4%BD%BF%E3%81%88%E3%82%8B-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%95%99%E7%A7%91%E6%9B%B8-Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E9%A4%8A%E6%88%90%E8%AC%9B%E5%BA%A7-%E4%B8%AD%E5%B3%B6-%E7%9C%9F%E6%B4%8B/dp/4774173800/ref=sr_1_3?ie=UTF8&qid=1539685506&sr=8-3&keywords=wordpress