Q&A
勉強の為サイト模写をしております。
ロゴアイコンとメニューの（はじめに）との間が広くいので、もう少し狭くしたのですが、
どうすればいいかご教授をお願い致します。
HTML
1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 10 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 11 <link rel="stylesheet" href="css/style.css"> 12 <title>Hello, world!</title> 13 14</head> 15 16<body> 17 <div class="header-banner"> 18 <a href="#"><img src="img/header_banner_text_pc07.png" alt="ヘッダーバナー"></a> 19 </div> 20 21 <div class="container"> 22 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 23 <a class="navbar-brand" href="#"><img src="img/logo.png"></a> 24 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" 25 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 26 <span class="navbar-toggler-icon"></span> 27 </button> 28 <div class="collapse navbar-collapse" id="navbarNav"> 29 <ul class="navbar-nav"> 30 <li class="nav-item"> 31 <a class="nav-link" href="#">はじめに</a> 32 </li> 33 <li class="nav-item"> 34 <a class="nav-link" href="#">料金プラン</a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-link" href="#">端末</a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-link" href="#">サポート</a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="#">店舗</a> 44 </li> 45 <li class="nav-item"> 46 <a class="nav-link" href="#">Pricing</a> 47 </li> 48 </ul> 49 </div> 50 </nav> 51 </div> 52 53 <div class="slider"> 54 <img src="img/LPGenPC_image_v3[1].png" alt="スライダー"> 55 </div> 56 57 <div class="main-contents"> 58 <img src="img/img_top_nowOrder_pc.png" alt="申込画像"> 59 </div> 60 61 <div class="container"> 62 <div class="row"> 63 <div class="col-4"> 64 <img src="img/ico_top01.png"> 65 </div> 66 <div class="col-4"> 67 <img src="img/ico_top02.png"> 68 </div> 69 <div class="col-4"> 70 <img src="img/ico_top03.png"> 71 </div> 72 </div> 73 </div> 74 75 76 77 <footer> 78 79 80 81 </footer> 82 83 84 85 86 <!-- Optional JavaScript --> 87 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 88 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 89 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 90 crossorigin="anonymous"></script> 91 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 92 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 93 crossorigin="anonymous"></script> 94 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 95 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 96 crossorigin="anonymous"></script> 97</body> 98 99</html>
CSS
1@charset "UTF-8"; 2/* *{ は全体的に反映させる記述 */ 3 4* { 5 padding: 0; 6 -webkit-box-sizing: border-box; 7 box-sizing: border-box; 8 list-style-type: none; 9 text-decoration: none; 10} 11 12.header-banner { 13 background-color: #07b53b; 14} 15 16.header-banner img { 17 margin: auto; 18 width: 30%; 19 display: block; 20} 21 22.navbar-brand img { 23 width: 60%; 24 background-color: violet; 25 display: block; 26} 27 28.navbar { 29 padding: 20px 20px; 30} 31 32.nav-item { 33 padding-left: 30px; 34} 35 36.slider img { 37 width: 100%; 38 height: 500px; 39} 40 41.main-contents img{ 42 margin: auto; 43 display: block; 44 padding-top: 20px; 45 padding-bottom: 20px; 46} 47 48.row img{ 49 margin: auto; 50 display: block; 51 padding: 70px; 52}
回答1件
0
こんな感じですか？
css
1.navbar-brand { 2 margin-right: 0; 3} 4.nav-item { 5 padding-left: 0; 6} 7.navbar-nav li.nav-item a.nav-link{ 8 padding: 0; 9}
必要に応じて加減してください。
投稿2020/01/11 03:51
総合スコア36089
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。