質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3192閲覧

Bootstrap4で要素を均等に振り分ける

HozDer

総合スコア25

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/15 17:57

前提・実現したいこと

ヘッダーにある、ホーム、商品紹介、業務内容、事業者情報、お問い合わせを
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 使用

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

col-sm-autocol-smにするとHeaderに書かれているリンクは等間隔になるかと思います!

html

1<div class="row"> 2 <a class="button col-sm" href="#">ホーム<br><span class="font-size">HOME</span></a> 3 <a class="button col-sm" href="#">商品紹介<br><span class="font-size">INTRODUCTION</span></a> 4 <a class="button col-sm" href="#">業務内容<br><span class="font-size">SERVICES</span></a> 5 <a class="button col-sm" href="#">事業者情報<br><span class="font-size">PROFILE</span></a> 6 <a class="button col-sm" href="#">お問い合わせ<br><span class="font-size">CONTANCT</span></a> 7</div>

で、それを囲っているrowに対して幅900pxとしてあげると900pxになります!

css

1div.row{ 2 width: 900px; 3}

投稿2019/06/16 01:33

hatsu

総合スコア1809

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HozDer

2019/06/16 03:15

返信ありがとうございます。 hatsuさんの通りに進めるとできました。 CSSのセレクタ?の設定の仕方がまだまだ未熟みたいでしたね。。 助かりました、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問