Q&A
実現したいこと
付属画像１のヘッダー内にあるボタンの一番左の隙間を小さくしたいのですが、出来ずに困っています。
付属画像の赤いペンで書いた左端の部分です。
付属画像１
試したこと
ｃｓｓのスタイルシート内のheader {
z-index: 9999;
padding-right: 4%;
padding-left: 4%;
この padding-left:の値を4%から1%に変更しても余白が変わりません。
header.min-header {の padding-left:を小さくしても変化なし。先に進めづに途方に暮れています。
回答よろしくお願いいたします。
その他の情報
ちなみにソースコードは念のためすべて書き出しています。
responsiveのスタイルシートはスマートフォンの横幅が640PX以下の場合はハンバーガーメニューが表示されるように、レスポンシブのコードを記載しています。
付属画像１はPCの画面の写真です。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="robots" content="noindex,nofollow"> 6 <title></title> 7 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <link rel="stylesheet" href="companyhptoppage.css"> 11 <link rel="stylesheet" href="responsive.css"> 12 13 <script src="jquery-3.6.0.min.js"></script> 14 15<script> 16 $(function() { 17 const hum = $('#hamburger, .close') 18 const nav = $('.sp-nav') 19 hum.on('click', function(){ 20 nav.toggleClass('toggle'); 21 }); 22 }); 23 </script> 24</head> 25<body> 26 <header id="header"> 27 28 <nav class="pc-nav slide-right show"><!--クリックして色を換えるボタンとアニメーション--> 29 <ul> 30 <li><a href="#" class="button">会社概要</a></li> 31 <li><a href="#" class="button">事業内容</a></li> 32 <li><a href="#" class="button">弊社の強み</a></li> 33 <li><a href="#" class="button">採用情報</a></li> 34 <li><a href="#" class="button">お問い合わせ</a></li> 35 36 37 </ul> 38 </nav> 39 <nav class="sp-nav"><!--スクロールしても文字を上に維持する--> 40 <ul> 41 <li><a href="#" class="button">会社概要</a></li> 42 <li><a href="#" class="button">事業内容</a></li> 43 <li><a href="#" class="button">弊社の強み</a></li> 44 <li><a href="#" class="button">採用情報</a></li> 45 <li><a href="#" class="button">お問い合わせ</a></li> 46 <li class="close"><span>閉じる</span></li> 47 </ul> 48 </nav> 49 <div id="hamburger" class="slide-right show"> 50 <span></span> 51 </div> 52 </header> 53 <div class="main-visual"> 54 <div class="slide-bottom show"> 55 <h2>WEB DESIGN <span>IS</span> YOUR FUTURE</h2> 56 57 </div> 58 </div> 59 60 <section id="about"> 61 <h2 class="slide-bottom show">ABOUT<span></span></h2> 62 <p class="slide-bottom show">IT総合コンサルティング会社です。</p> 63 </section> 64 <section id="service"> 65 <h2 class="slide-bottom show">SERVICE<span></span></h2> 66 67 <p class="slide-right show">詳しくは会社概要や事業内容のページをご参照下さい。</p> 68 <div class="slide-bottom show"><a href="#" class="button">⇧TOPへ </a></div> 69 70 </section> 71 <footer> 72 <small>footer</small> 73 </footer> 74<script> 75 //フェードイン用のコードです 76 $(function(){ 77 $(window).on('load scroll', function() { 78 $(".show").each(function() { 79 var winScroll = $(window).scrollTop(); 80 var winHeight = $(window).height(); 81 var scrollPos = winScroll + (winHeight * 0.9); 82 if($(this).offset().top < scrollPos) { 83 $(this).css({opacity: 1, transform: 'translate(0, 0)'}); 84 } 85 }); 86 }); 87 }); 88 //フェードイン用のコードはここまでです 89 90 //ヘッダーの高さと背景色の変更 91 $(function () { 92 const header = $('#header'); 93 $(window).on('load scroll' ,function () { 94 var headerHeight = header.innerHeight(); 95 96 $(window).on('scroll' ,function () { 97 if ( $(this).scrollTop() > 100 ) { 98 header.addClass('min-header'); 99 } else { 100 header.removeClass('min-header'); 101 } 102 }); 103 }); 104}); 105</script> 106</body> 107</html> 108
css
1@charset "utf-8"; 2* { 3 box-sizing: border-box; 4} 5body { 6 margin: 0; 7 padding: 0; 8 height: 100%; 9 font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; 10 background-color: #fff; 11 letter-spacing : 0.2em; 12} 13header { 14 z-index: 9999; 15 padding-top: 30px; 16 padding-right: 4%; 17 padding-bottom: 10px; 18 padding-left: 4%;/*padding30pxはボタンの上の余白の大きさ10pxは下の余白の大きさ*/ 19 position: fixed; 20 top: 0; 21 width: 100%; 22 background-color: transparent; 23 display: flex; 24 align-items: center; 25 transition: all .2s ease-out; 26} 27header.min-header { 28 padding-top: 10px; 29 padding-right: 4%; 30 padding-bottom: 10px; 31 padding-left: 4%; 32 background-color: #293f4d; 33} 34h1 { 35 margin: 0; padding: 0; 36 font-size: 20px;/*トップ画面一番左上の会社のタイトルの文字の大きさ*/ 37} 38a { 39 text-decoration: none; 40 color: #fff; 41} 42p { 43 line-height: 2; 44} 45nav { 46 margin: 0 0 0 auto; 47} 48ul { 49 list-style: none; 50 margin: 0; 51 display: flex; 52} 53li { 54 margin: 0 0 0 15px;/*トップ画面の上部のボタンとボタンの間のすき間全て左側の余白が15ｐｘ*/ 55 font-size: 14px;/*ボタン内の文字の大きさ*/ 56} 57.main-visual { 58 display: flex; 59 justify-content: center; 60 align-items: center;/*トップ画像にある文字を画像の核の中央にする*/ 61 height: 100vh;/*トップ画像の高さ例えば８０ｖｈだと８０％の縦表示になる。縮小ではなく消える*/ 62 background: url('main_visual.jpg') top center / cover no-repeat; 63} 64 65/*トップ画像の中央の文字*/ 66.main-visual h2 { 67 margin: 0 0 40px 0; 68 font-size: 30px; 69 font-weight: normal; 70 color: rgb(231, 98, 243); 71} 72.sp-nav { 73 display: none; 74} 75 76/*リンクボタン*//*会社概要など*/ 77a.button { 78 display: block; 79 width: 200px;/*ボタンの横幅*/ 80 margin: 0 auto; 81 padding: 15px 30px; 82 text-align: center; 83 border: 1px solid #fff; 84 transition: all .3s ease-out; 85} 86/*マウスで色を換えるボタン*/ 87a.button:hover { 88 color: #505050; 89 background-color: #fff; 90} 91/* section */ 92.flex { 93 display: flex; 94} 95section { 96 overflow: hidden; 97 text-align: center; 98 padding: 100px 0; 99} 100section h2 { 101 margin: 0 0 50px 0; 102 color: #293f4d; 103 text-align: center; 104} 105section p { 106 color: #293f4d; 107} 108 109 110#service { 111 background-color: #f7f7f7; 112} 113 114 115#service p { 116 margin: 0 0 40px 0; 117} 118#service a.button { 119 color: #293f4d; 120 border: 1px solid #293f4d; 121} 122#service a.button:hover { 123 color: #fff; 124 background-color: #293f4d; 125} 126/* footer */ 127footer { 128 padding: 50px 0 20px; 129 background-color: #293f4d; 130 text-align: center; 131} 132 133 134 135/* フェードイン用のCSS */ 136 137/* 上からフェードイン */ 138.slide-top { 139 opacity: 0; 140 transform: translate(0, -20px); 141 transition: all 1s ease-out; 142 } 143 144/* 下からフェードイン */ 145.slide-bottom { 146 opacity: 0; 147 transform: translate(0, 20px); 148 transition: all 1s ease-out; 149 } 150 151 /* 左からフェードイン */ 152.slide-left { 153 opacity: 0; 154 transform: translate(-20px, 0); 155 transition: all 1s ease-out; 156 } 157 158/* 右からフェードイン */ 159.slide-right { 160 opacity: 0; 161 transform: translate(20px, 0); 162 transition: all 1s ease-out; 163 } 164 165 166
responsivecss
1/*幅640px以下の場合ハンバーガーメニューを適応する*/ 2/*幅640px以下の場合ハンバーガーメニューを適応する*/ 3@media screen and (max-width: 640px) { 4 /*ハンバーガーメニュー*/ 5 .pc-nav { 6 display: none; 7 } 8 .sp-nav { 9 z-index: 1; 10 position: fixed; 11 top: 0; 12 left: 0; 13 width: 100%; 14 height: 100vh; 15 display: block; 16 width: 100%; 17 background: rgba(0, 0, 0, .8); 18 opacity: 0; 19 transform: translateY(-100%); 20 transition: all .2s ease-in-out; 21 } 22 #hamburger { 23 position: relative; 24 display: block; 25 width: 30px; 26 height: 25px; 27 margin: 0 0 0 auto; 28 } 29 #hamburger span { 30 position: absolute; 31 top: 50%; 32 left: 0; 33 display: block; 34 width: 100%;/* 三本線一番上の線の長さ */ 35 height: 2px;/*三本線一番上の線の余白や太さ */ 36 background-color: #fff;/* 三本線一番上の線の色 */ 37 transform: translateY(-50%); 38 } 39 #hamburger::before { 40 content: ''; 41 display: block; 42 position: absolute; 43 top: 0; 44 left: 0; 45 width: 100%;/* 三本線の真ん中の線の長さ */ 46 height: 2px;/*三本線の真ん中の線の余白や太さ */ 47 background-color: #fff;/* 三本線の真ん中の線の色 */ 48 } 49 #hamburger::after { 50 content: ''; 51 display: block; 52 position: absolute; 53 bottom: 0; 54 left: 0; 55 width: 100%;/* 三本線の一番下の線の長さ */ 56 height: 2px;/*三本線一番下の線の余白や太さ */ 57 background-color: #fff;/* 三本線の一番下の線の色 */ 58 } 59 /*スマホメニュー*/ 60 .sp-nav ul { 61 padding: 0; 62 display: flex; 63 flex-direction: column; 64 justify-content: center; 65 align-items: center; 66 height: 100%; 67 } 68 .sp-nav li { 69 margin: 0; 70 padding: 0; 71 } 72 .sp-nav li span { 73 font-size: 15px; 74 color: #fff; 75 } 76 .sp-nav li a, .sp-nav li span { 77 display: block; 78 padding: 20px 0; 79 } 80 /*-閉じるアイコンー*/ 81 .sp-nav .close { 82 position: relative; 83 padding-left: 20px; 84 } 85 .sp-nav .close::before { 86 content: ''; 87 position: absolute; 88 top: 50%; 89 left: 0; 90 display: block; 91 width: 16px; 92 height: 1px; 93 background: #fff; 94 transform: rotate( 45deg ); 95 } 96 .sp-nav .close::after { 97 content: ''; 98 position: absolute; 99 top: 50%; 100 left: 0; 101 display: block; 102 width: 16px; 103 height: 1px; 104 background: #fff; 105 transform: rotate( -45deg ); 106 } 107 .toggle { 108 transform: translateY( 0 ); 109 opacity: 1; 110 } 111 .main-visual { 112 padding: 0 4%; 113 } 114 h2 { 115 line-height: 1.6; 116 text-align: center; 117 } 118 /* section */ 119 #service ul li { 120 width: 50%; 121 } 122} 123table { 124 max-width: 700px; 125 margin: 0 auto; 126 color: #aaa; 127}
回答1件
0
ベストアンサー
cssを下記のように編集するとおそらくPCのメニューは中央揃えになると思います。
css
1nav { 2 margin: 0 0 0 auto; 3} 4 ↓ 5nav { 6 margin: 0 auto 0 auto; 7} 8 9/*追加*/ 10.min-header li:first-of-type{ 11 margin-left: 0; 12}
投稿2021/08/04 09:59
総合スコア1293
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/05 08:53