前提・実現したいこと
ヘッダーにある、ホーム、商品紹介、業務内容、事業者情報、お問い合わせを
Bootstrap4を使い要素を均等に振り分ける
また、幅そのものも900pxくらいまで広げたい
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>test</title> </head> <body> <h1 class="title">AAAAA</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <link rel="stylesheet" type="text/css" href=https://rmultigamingsever.com/wp-content/themes/hp_sakusei/reset.css> <link rel="stylesheet" href="style2.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <!-- header --> <header> <ul class="container-fluid"> <div class="row"> <a class="button col-sm-auto" href="#">ホーム<br><span class="font-size">HOME</span></a> <a class="button col-sm-auto" href="#">商品紹介<br><span class="font-size">INTRODUCTION</span></a> <a class="button col-sm-auto" href="#">業務内容<br><span class="font-size">SERVICES</span></a> <a class="button col-sm-auto" href="#">事業者情報<br><span class="font-size">PROFILE</span></a> <a class="button col-sm-auto" href="#">お問い合わせ<br><span class="font-size">CONTANCT</span></a> </div> </ul> </header>
CSS
1body { 2 font-family: Verdana, 'Arial Black', sans-serif; 3 font-size: 20px; 4 margin: 0; 5} 6/* header */ 7header { 8 height:170px; 9} 10h1 { 11 text-align: center; 12 display: block; 13} 14.title { 15 white-space: nowrap; 16} 17.container-fluid { 18 display: flex; 19 justify-content: center; 20} 21@media (min-width: 0px) and ( max-width:576px){ 22.container-fluid { 23margin-top: 100px; 24} 25} 26.font-size { 27 font-size: 0.3vw; 28} 29ul{ 30 display: flex; 31 justify-content: center; 32 align-items: center; 33 position: inherit; 34 background-color: black; 35 font-size: 20px; 36 height: 49px; 37 line-height: 20px; 38} 39ul > a { 40 text-decoration: none; 41 text-align: center; 42 color: white; 43 font-size: 1.2vw; 44} 45.button { 46 background-color: black; 47 color: #fff; 48 text-align: center; 49} 50 51.button:hover { 52 background: #888888; 53 color: white; 54 text-decoration: none; 55 56} 57/* main */ 58.profile { 59 white-space: nowrap; 60} 61h3 { 62 margin-left: 100px; 63} 64nav > p { 65 width: 50%; 66 font-size: 12px; 67} 68table,tr,th,td { 69 border: solid black 1px; 70 line-height: 22px; 71 margin: 40px 0px 60px 0px; 72} 73 74.list { 75 background: #EEEEEE; 76 padding: 10px; 77} 78.about { 79 width: 800px; 80} 81.about2 { 82 width: 800px; 83 height: 200px; 84} 85iframe { 86 float: right; 87} 88.leftbox { 89 float: left; 90 width: 20%; 91} 92
試したこと
・header内にあるdivにwidthを設けて、col-sm-autoで調整してもらう
・table-cellの利用
補足情報(FW/ツールのバージョンなど)
Windows10 bootstrap4 使用
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/16 03:15