Q&A
HTML, CSSを追記していただけませんか？
ul menu内のPROFILE GRAPHIC MUSIC CONTACTの欄を下にスクロールしてもページ上部に固定したく、menu内にposition:fixed;を入れたのですが実際にやってみるとページ上部に固定はできたのですがPROFILE GRAPHIC MUSIC CONTACTが左に行ってしまいhpのロゴや背景の白色が固定されません。
menu内にbackground:white;を入れても写真のようにはならず、PROFILE GRAPHIC MUSIC CONTACTの周囲にのみ白色が適用されてしまいました。
スクリーンショットのようにページ上部をきれいに固定するにはどうしたらよろしいでしょうか。
ご教授お願いいたします。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--インストールしたfontawesomeを読み込む--> <link rel="stylesheet" href="css/styles.css"> <!--作ったCSSを読み込む--> <meta bane="viewport" content="width=device-width, initial-scale=1.0"> <!--スマホで開いたとき度の幅で描画するかの設定--> <title>nitta</title> </head> <body> <div class="top"> <ul class="menu" > <!-- <li>PROFILE</li>--> <!-- <li>GRAPHIC</li>--> <!-- <li>MUSIC</li>--> <!-- <li>CONTACT</li>--> <!-- --> <a href="#contact" class="btn"> CONTACT </a> <a href="#music" class="btn"> MUSIC </a> <a href="#graphics" class="btn"> GRAPHICS </a> <a href="#profile" class="btn"> PROFILE </a><!-- このhrefで指定したものを別のとこのid=""で指定してジャンプする--> </ul> <p><img src="img/rogo.png"></p><!--ロゴ--> </div> <header> <section class="icon"> <p><img src="img/profile.png"></p> </section> <section class="profile"> <h2 id="profile">PROFILE</h2><!--ここでidを指定し、メニューから移動する--> <div class="photo-show"> <img src="img/pro1.jpg"> <img src="img/pro2.jpg"> <img src="img/pro3.jpg"> <img src="img/pro4.jpg"> </div> <div class="text"> <p>自転車に乗ったり音楽やったりデザインをしています。</p> </div> </section> <section class="gra"><!--section2--> <h2 id="graphics">GRAPHICS</h2> <div class="container"> <div class="item"> <img src="img/gra1.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra2.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra3.jpg"> <p>hello. hello. hello. hello.</p> </div> </div> <div class="container"> <div class="item"> <img src="img/gra1.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra2.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra3.jpg"> <p>hello. hello. hello. hello.</p> </div> </div> <div class="container"> <div class="item"> <img src="img/gra1.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra2.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra3.jpg"> <p>hello. hello. hello. hello.</p> </div> </div> </section> <section class="music"> </section> <section class="music"> <h2 id="music">MUSIC</h2> <div class="music-container"> <div class="music-wrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/nul4IXdX8HE" frameborder="0" allowfullscreen></iframe><!--youtubeの埋め込みリンク--> </div> </div> </div>- </section> <section class="contact"> <h2 id="contact">CONTACT</h2> </section> </header> <footer> <p>上に戻る</p> <div class="sita"> </div> </footer>
CSS
@charset "utf-8"; /* background-image: url("../img/wallpaper.jpg");*/ body{/*初期設定、余計なmargin,paddingを0に*/ font-size: 14px; font-family: Verdana, sans-serif; margin: 0; padding: 0; color: #333; background: #f2f2f2; /*初期設定*/ } p{/*行間がゆったりする*/ line-height: 2; } .top { width: 90%; margin: 0 auto; } .menu { display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ list-style: none; padding: 0; margin: 0; /*余計なマージンパディング取る、*/ float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ } /*------------ボタンアニメーション---------------------*/ .btn::before { content: ''; position: absolute; bottom: 0%; left: 0px; width: 100%; height: 1px; background: #000000; display: block; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1); transition: transform 0.4s cubic-bezier(1, 0, 0, 1) } .btn:hover::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1) } .btn{ padding: 15px 100px; margin:10px 4px; color: #000000; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:inline-block; display: inline-block;/*横にする設定*/ cursor: pointer; margin: 15px; padding: 0; display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ } /*---------------------------------*/ .top img { display: inline-block;/*横にする設定*/ width: 50px; height: 50px; text-align: left; cursor: pointer; } .container{/*ここで90％の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 左右に一定の空きができる*/ width:80%; margin: 0 auto; } .text{ width:80%; margin: 0 auto; max-width: 350px;} section{ background: #fff;/*ここを消してbodyに画像指定すると背景が設定できる*/ padding: 60px 0; } section h2{/*文字を中央ぞろえ、下にマージン空き*/ text-align: center; } .icon{ /*背景画像*/ background-image: url("../img/wallpaper.jpg"); background-repeat: no-repeat; background-attachment: fixed;/*背景を固定している*/ background-position: center; padding-bottom: 600px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/ } .icon img{ display: block; margin-left: auto; margin-right: auto; width: 150px; height: 150px; } /*PROFILE*/ .profile .item{/*newsの囲っているやつを中央揃え*/ text-align: center; } .profile p{/*テキストまで中央になってしまったのでここで解除する*/ text-align: left; } /*features同様アイテム同士の空き*/ .profile .item{/*写真と文字を囲っているfeaturesの下の空き*/ margin-bottom: 10px; } .profile .item:last-child{/*これにだけ指定という意味*/ margin-bottom: 0; } /*GRAPHICS*/ .gra .container{ display: flex; justify-content: space-between;/*均等に余白が空く設定*/ } .gra .item{/*graに入っている画像と文字に対して30%*/ width: 30%; text-align: center; margin-bottom: 10px; } .gra .item img{/*画像が30％だとちゃんと見えないので画像だけ100%に*/ width: 100%; } .gra p{/*テキストまで中央になってしまったのでここで解除する*/ text-align: left; } .gra .item:last-child{/*これにだけ指定という意味*/ margin-bottom: 0; } /*画像アニメーション*/ .photo-show { height: 440px; /*表示したい大きさ*/ margin: 30px auto; /*縦余白30pxは任意*/ max-width: 100%; /*position: relative;*/ width: 300px; /*表示したい大きさ、height と合わせる*/ } .photo-show img { animation: show 8s infinite; -webkit-animation: show 8s infinite; border-radius: 50%; /*height: auto;*/ max-width: 100%; opacity: 0; position: absolute; /*画像を全て重ねる*/ } /*アニメーション*/ @keyframes show { 0% {opacity:0} 20% {opacity:1} 30% {opacity:1} 40% {opacity:0} } @-webkit-keyframes show { 0% {opacity:0} 20% {opacity:1} 30% {opacity:1} 40% {opacity:0} } /*各画像のアニメーションの開始時間をずらす*/ .photo-show img:nth-of-type(1) { animation-delay: 0s; -webkit-animation-delay: 0s; } .photo-show img:nth-of-type(2) { animation-delay: 2s; -webkit-animation-delay: 2s; } .photo-show img:nth-of-type(3) { animation-delay: 4s; -webkit-animation-delay: 4s; } .photo-show img:nth-of-type(4) { animation-delay: 6s; -webkit-animation-delay: 6s; } /* .photo-show img:nth-of-type(5) { animation-delay: 8s; -webkit-animation-delay: 8s } .photo-show img:nth-of-type(6) { animation-delay: 10s; -webkit-animation-delay: 10s; } .photo-show img:nth-of-type(7) { animation-delay: 12s; -webkit-animation-delay: 12s; } .photo-show img:nth-of-type(8) { animation-delay: 14s; -webkit-animation-delay: 14s; }*/ /*マウスが画像に重なった際、動きを止めて四角くする*/ .photo-show img { transition: 0.2s; -webkit-transition: 0.2s; } .photo-show:hover img { animation-play-state: paused; -webkit-animation-play-state: paused; border-radius: 0; } /*MUSIC*/ .music-container{/*ここで90％の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 左右に一定の空きができる*/ width: 80%; margin: 0 auto; } .music iframe{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .music-wrapper {/*padding-topかbottomで％を指定するとcssで、widthに対する比率となる、56.25はyoutubeの16:9の比率を指定*/ padding-bottom: 56.25%; height: 0; position: relative; } /*画面が570px以上になったとき*/ @media (min-width: 570px){ .container{ width: 570px; } .music-container{ width:570px; } } /*画面が570px以上になったとき*/ @media (min-width: 820px){ .container{ width: 820px; } .music-container{ width:820px; } }```
追記しました！
バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
回答2件
0
根本的に問題が多すぎます。
まず、ヘッダーの背景がbodyに設定されていますが、これではヘッダーをfixedしたところで追従されるわけありません。これは、ロゴも同様です。.topをfixedにし、そこに背景色を設定することで解決します。
その他にも、ulタグを使用しているのにliタグを使用していない（これはうまくいかなかったので外されたのかもしれません）、mainタグで囲まれるべきところがheaderタグで囲まれているなど問題が山積しています。おそらく、この問題が解決しても他のところで詰まるでしょうから、今一度本などで勉強されることをお勧めします。
以下ではヘッダーの高さを100pxに固定し、liタグをinline-blockにしてtext-alignで右寄せにしています。
html
1<div class="top"> 2 <ul class="menu" > 3 <li> 4 <a href="#contact" class="btn"> 5 CONTACT 6 </a> 7 </li> 8 <li> 9 <a href="#music" class="btn"> 10 MUSIC 11 </a> 12 </li> 13 <li> 14 <a href="#graphics" class="btn"> 15 GRAPHICS 16 </a> 17 </li> 18 <li> 19 <a href="#profile" class="btn"> 20 PROFILE 21 </a><!-- このhrefで指定したものを別のとこのid=""で指定してジャンプする--> 22 </li> 23 </ul> 24 <p><img src="img/rogo.png"></p><!--ロゴ--> 25 </div>
css
1.top { 2 width: 100%; 3 margin: 0 auto; 4 background: #f2f2f2; 5 height: 100px; 6 position: fixed; 7} 8 9.menu { 10 list-style: none; 11 padding: 0; 12 margin: 0; /*余計なマージンパディング取る、*/ 13 text-align: right; 14 height: 50px; 15 line-height: 50px; 16 width: 90%; 17 margin: auto; 18} 19.menu li { 20 display: inline-block; 21 height: 50px; 22 margin: auto; 23 padding: 25px 15px; 24} 25 26.btn { 27 padding: 15px 100px; 28 margin:0px 15px; 29 color: #000000; 30 font-family: sans-serif; 31 text-transform: uppercase; 32 text-align: center; 33 position: relative; 34 text-decoration: none; 35 display:inline-block; 36 cursor: pointer; 37 padding: 0; 38 display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ 39}
投稿2020/03/02 23:50
総合スコア757
0
写真のようにはならず
⇒写真のブラウザはクローム（Windows版）で、
思い通りに動いているファイルがダウンロード済（ローカルで動かしている物）であれば、
クロームで表示しながらF12キーを押して、該当のHTMLとCSSがどうなっているか確認し、
現状のHTMLとCSSと比較するのが良いかと思います。
投稿2017/07/14 06:49
総合スコア760
あなたの回答
tips
プレビュー
