Q&A
実現したいこと
- ナビゲーションをメインビジュアルの下に配置する
前提
コーディング初心者です。
HTMLとCSSの練習として、架空の店舗のホームページを制作しています。
メインビジュアルを数枚の画像が入れ替わるアニメーションにしています。(CSSで表示する画像を定義、アニメーション設定)
発生している問題・エラーメッセージ
上の画像が実際にコーディングしているサイトです。
ナビゲーションをメインビジュアルの下に配置したいのですが、メインビジュアルに重なってしまいます。(ついでに、ナビゲーションの文字が中央ぞろえになりません…汗)
該当のソースコード
【HTML】 <div class="slider"> <div class="image"> <img src="img/main_01.jpg"> </div> <div class="image"> <img src="img/main_02.jpg"> </div> <div class="image"> <img src="img/main_03.jpg"> </div> </div> <header class="mainvisual"> <div class="rogoo"> <h1 class="rogo"> <img src="img/rogo.png"> </h1> <p class="rogo"> <img src="img/scroll.png" width="150px"> </p> </div> <div> <nav> <ul> <li><a href="index.html" class="nav_padding">ホーム</a></li> <li><a href="#news" class="nav_padding">お知らせ</a></li> <li><a href="#concept" class="nav_padding">こだわり</a></li> <li><a href="about" class="nav_padding">きこりのぱんやについて</a></li> <li><a href="#menu" class="nav_padding">メニュー</a></li> <li><a href="#shop info" class="nav_padding">店舗情報</a></li> </ul> </nav> </div> </header>
【CSS】 /* メインビジュアルのスライダー 全体設定*/ .slider{ position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100vh; z-index: -1; } /* スライダー画像 */ .slider .image{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; } /*スライドに表示する画像を定義*/ .slider .image:nth-of-type(1){ background-image: url(img/main_01.jpg); } .slider .image:nth-of-type(2){ animation-delay: 5s; background-image: url(img/main_02.jpg); } .slider .image:nth-of-type(3){ animation-delay: 10s; background-image: url(img/main_03.jpg); } /*アニメーション設定*/ .slider .image{ animation-name: anime; animation-delay: 0; animation-iteration-count: infinite; animation-duration: 15s; } /* アニメーション定義 */ @keyframes anime { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } } /* ロゴ */ .rogoo { z-index: 1; margin-top: 100px; } .rogo { display: flex; align-items: center; justify-content: center; flex-direction: column; } /* ナビゲーション */ nav{ width: 100%; padding: 20px; background-color: #EED9BD; } .nav_padding:hover { opacity: 0.3;/* ホバー時透過 */ } header ul { display: flex; } header li { list-style: none; } header a { text-decoration: none; color: #000; } .nav_padding { padding-left: 80px; }
試したこと
.imageにdisplay:blockを指定してブロック要素にしたらもしかして、と思いましたが、変わりませんでした。
調べても解決せず、困っています…。
質問の仕方や、コーディングの面でも拙い部分が多々あるかと思いますが、ご回答いただけますと本当に嬉しいです。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。