現在職業訓練の課題制作で、レスポンシブデザインのサイトを作成中です。
このサイトのナビゲーションのハンバーガーメニューを作成中(cssで)でして、ちゃんと理解できずにネットで調べて、とりあえずの形は出来たのたのですが、下記の2点について教えて下さい。
➀装飾の仕方
┗三本線の「三」の色や大きさを変えるにはどの部分を設定すればいいのでしょうか?
┗メニュー出現時文字の位置・色・大きさ・背景色等の装飾を変えるにはのどこを設定すればいいのか教えて下さい。
➁インターフェースの部分に問題があり、三本線「三」の線の部分を押すと反応するのですが、背景部分をクリックしても反応しません、どこを設定すればいいのか教えて下さい。
▼HTMLコード
<body> <div id="inner"> <header> <img src="assets/images/top/main.png"> <h1>Granchocolate</h1> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content"> <ul> <li><a href="index.html">Top</a></li> <li><a href="#main">About</a></li> <li><a href="./product/index.html">Product</a></li> <li><a href="./news/index.html">News</a></li> <li><a href="./shop/index.html">Shop</a></li> <li><a href="./contact/index.html">Contact</a></li> </ul> <!-- nav-content --></div> <!-- nav-drawer --></div> <!-- header --></header> コード
▼cssコード
@charset "utf-8"; /* CSS Document */ *{ margin: 0; padding: 0; font-size: 100%; } /*画像縮める設定*/ img { max-width: 100%; height: auto; } /*横スクロール出さない*/ html { overflow-y : scroll; } /*inner設定*/ #inner { width: 100%; max-width: 1920px; min-width: 320px; margin: 0 auto; } /*headerフルスクリーン指定*/ /*テキストを画像の上に配置*/ header { position: relative; display: block; width: 100%; height: 93vh; height: auto; } header h1 { position: absolute; top: 35%; transform : translateY(-35%); left: 5%; color: #FFF; font-size: 650%; font-family: "Times New Roman", Times, serif; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } header #nav-drawer #nav-content ul { position: absolute; top: 20px; right: 20px; color: #F00; font-size: 18px; font-family: "Times New Roman", Times, serif; list-style: none; display:flex; justify-content: flex-end; } header #nav-drawer #nav-content ul li { padding-right: 20px; } /*ここからmessage*/ #message .caption { color: #F00; width: 15%; height: 10em; background-color: #000; font-weight: bold; } #message .caption p { padding-top: 1em; padding-left: 1em; font-size: 80%; } /*黒赤エリアを横並び指定*/ #message { display: flex; } #message .eachArea { background: #F00; height: 10em; width: 85%; } #message .eachArea h2 { padding-top: 15px; padding-left: 20px; color: #FFF; font-size: 80%; } #message .eachArea .eachArea_in { display: flex; } #message .eachArea .eachArea_in h3 { font-size: 150%; color: #FFF; /* padding-top: 10px; padding-left: 250px;*/ } #message .eachArea .eachArea_in p { font-size: 105%; color: #FFF; } /*ここからcontents*/ #contents { display: flex; justify-content: space-between; } #contents p { } #contents .contents_in h2 { color: #F00; text-align: center; font-size: 160%; margin-top: 15%; margin-bottom: 10%; line-height: 1.5; } #contents .contents_in p { color: #F00; font-size: 120%; text-align: center; line-height: 1.5; } /*ここからcontentsBlock*/ #contentBlock { background: #F00; height: 5em; text-align: right; width: 100%; } #contentBlock h2 { /*line-height: 177px;*/ padding-right: 250px; font-size: 150%; color: #FFF; font-weight: bold; } /*ここからmain*/ #main p { text-align: center; text-align: center; color: #F00; font-size: 120%; margin: 5% 10%; line-height: 1.5; } #main h2 { text-align: center; margin-top: 10%; text-align: center; color: #F00; margin-bottom: 5%; font-size: 170%; } /*mainの全画面フルスクリーン設定*/ #main .main_in { position: relative; display: block; width: 100%; height: auto; } /*Aboutの指定*/ #main .main_in h2 { position: absolute; bottom: -20%; font-size: 500%; font-weight: bold; color: #F00; left: 50%; transform: translate(-50%); } /*商品画像の指定1*/ #main .boxInner { position: relative; text-align: center; margin-bottom: 80px; } #main .boxInner dl { color: #FFF; background: #000; position: absolute; bottom: -5%; color: #F00; left: 22%; padding: 3%; } /*商品画像の指定2*/ #main .boxInner_ { position: relative; text-align: center; } #main .boxInner_ dl { color: #FFF; background: #000; position: absolute; bottom: -5%; color: #F00; left: 22%; padding: 3%; } /*ここからdivision*/ #division { position: relative; width: 100%; height: 5em; background: #F00 repeat; margin-top: 13%; } #division h2 { position: absolute; color: #F00; font-size: 5em; color: #FFF; left: 50%; transform: translate(-50%); bottom: -25%; } /*ここからbottom*/ #bottom { margin-bottom: 10%; display: block; width: 100%; height: auto; } #bottom .blockBottom { display: flex; margin-top: 10%; } #bottom .blockBottom dl { line-height: 1.5; margin-right: 10%; margin-left: 10%; color: #F00; margin-top: 10%; letter-spacing: 0.5em; } #bottom .blockBottom dl dt { font-size: 200%; } #bottom .blockBottom p { font-size: 150%; margin-right: 10%; text-align: right; display: block; color: #F00; margin-top: 50px; } #bottom .blockBottom dl dd { font-size: 110%; padding-top: 2%; } #bottom .blockBottom dl dd spn { font-size: 100%; color: #F00; } /*ここからfooter*/ footer ul { display: flex; justify-content: center; color: #FFF; padding-top: 1.5em; padding-bottom: 1.5em; } footer ul li { padding-right: 1.5em; padding-left: 1.5em; } footer p { color: #FFF; text-align: center; padding-top: 2em; padding-bottom: 2em; } footer { background: #000; color: #FFF; } /*通常状態でハンバーガー消す*/ header #nav-drawer #nav-open { display:none; } header #nav-drawer .nav-unshown { display:none; } /*ここからレスポンシブ設定*/ /*ウィンドウ幅が最大900pxまでの場合に適用*/ @media screen and (max-width: 900px) { #contents .sideOne { display:none; } #contents .contents_in { margin: auto; margin-right: auto; margin-left: auto; } header h1 { font-size: 300%; } #contents .contents_in h2 { font-size: 130%; } #contents .contents_in p { font-size: 90%; } } /*ウィンドウ幅が最大480pxまでの場合に適用*/ @media screen and (max-width: 480px) { header h1 { font-size: 200%; } #contents p { display:none; } #message .eachArea .eachArea_in { font-size: 80%; display: flex; justify-content: center; flex-wrap: wrap; } #contents .contents_in h2 { font-size: 100%; } #contents .contents_in p { font-size: 60%; } #main .main_in h2 { font-size: 200%; } #main p { font-size: 90%; } #main h2 { font-size: 110%; } footer ul { display: flex; flex-wrap: wrap; } /*ここからハンバーガーメニュー*/ header #nav-drawer #nav-open { display:block; } header #nav-drawer { position: absolute; top: 1em; right: 3em; color: #FFF; } /*チェックボックス等は非表示に*/ header #nav-drawer .nav-unshown { display:none; } /*アイコンのスペース*/ header #nav-drawer #nav-open { display: inline-block; } /*ハンバーガーアイコンをCSSだけで表現*/ header #nav-drawer #nav-open span, #nav-open span:before, #nav-open span:after { position: absolute; height: 3px;/*線の太さ*/ width: 25px;/*長さ*/ background: #555; display: block; content: ''; cursor: pointer; } header #nav-drawer #nav-open span:before { bottom: -8px; } header #nav-drawer #nav-open span:after { bottom: -16px; } /*閉じる用の薄黒カバー*/ header #nav-drawer #nav-close { display: none;/*はじめは隠しておく*/ position: fixed; z-index: 99; top: 0;/*全体に広がるように*/ left: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: .3s ease-in-out; } /*中身*/ header #nav-drawer #nav-content { overflow: auto; position: fixed; top: 0%; left: 0%; z-index: 9999;/*最前面に*/ width: 80%;/*右側に隙間を作る(閉じるカバーを表示)*/ /*max-width: 330px;*//*最大幅(調整してください)*/ height: 100%; color: #FFF; background: #000;/*背景色*/ transition: .3s ease-in-out;/*滑らかに表示*/ -webkit-transform: translateX(-105%); transform: translateX(-105%);/*左に隠しておく*/ } /*チェックが入ったらもろもろ表示*/ header #nav-drawer #nav-input:checked ~ #nav-close { display: block;/*カバーを表示*/ opacity: .5; } header #nav-drawer #nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%);/*中身を表示(右へスライド)*/ box-shadow: 6px 0 25px rgba(0,0,0,.15); } header #nav-drawer #nav-content ul { display:block; } } コード
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。