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

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

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

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

CSS

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

Q&A

解決済

3回答

803閲覧

flex box を使ってfooter部分を横並びにして見やすくしたい

rei007

総合スコア15

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/04/17 10:16

HTML&CSS コード ```### 前提・実現したいこと 横並びにしたいのですが、 display: flex;にしているのにflexが効かなかったり、項目が縦になったりします。 ### 発生している問題・エラーメッセージ ![イメージ説明](356ca4e0e88576da5c29e880bb510bd1.png) ``` エラーメッセージ!! 項目が横並びにならないのと文字が縦になってしまいます! 下の画像のようにflexを使って横並びにしたいです。 ```![イメージ説明](d29e6ac2022f73d2e2c985c985afd15b.png) ``` ### 試したこと div classを増やしてみたりulにclassを持たせてみたが駄目でした。 色々自分でも調べましたが行き詰まってしまいました。 ```ここに言語を入力 コード html ``` <!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://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="favicon" href="img/437460254_fav.ico"> <title>現地の人から借りる家、体験&スポット - Airbnb</title> </head> <body> <header> <div class="header"> <div class="header-left"> <img class="logo" src="img/airbnb-icon-18.jpg"class="fas fa-search" width="30px" height="30px"> <!-- <form class="fas fa-search" action="#" method="get"> --> <input type="search" type="text" placeholder="探す"> <!-- </form> --> </div> <div class="header-right"> <a class="host" href="#">ホストを始める</a> <a class="help" href="#">ヘルプ</a> <a class="register" href="#">登録する</a> <a class="login" href="#">ログイン</a> </div> <!-- <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible" fade show> <button type="button" class="close" deta-dismiss="alert" aria-label="閉じる"> <span aria-hidden="true">&times;</span> </button> <i class="far fa-comment-dots fa-lightgreen"></i> 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 </div> </div> --> </header> <div class="main"> <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible" fade show> <button type="button" class="close" deta-dismiss="alert" aria-label="閉じる"> <span aria-hidden="true">&times;</span> </button> <i class="far fa-comment-dots fa-lightgreen"></i> 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 </div> <div class="container"> <div class="text"> <h1>旅を送ろう。</h1> <p>Airbnbギフトカードで、世界をぐんと身近に</p> <button class="btn btn-light">ギフトカードを登録</button> </div> </div> </div> <!-- </div> --> <div class="contents"> <div class="container">   <h1>いつも完璧な贈り物</h1> <div class="boxs"> <div class="box"> <i class="far fa-envelope fa-3x fa-green"></i> <h5>簡単に使える</h5> <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> </div> <div class="box"> <i class="fas fa-stopwatch fa-3x"></i> <h5>有効期限なし</h5> <p>Airbnbのギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> </div> <div class="box"> <i class="fas fa-globe-africa fa-3x"></i> <h5>忘れられない旅</h5> <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> </div> </div> </div> </div> <div class="content-wrapper"> <div class="container"> <div class="title"> <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png"> <h1>ギフトカードをもらったら...</h1> <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p> <div class="btn-wrapper"> <a href="#" class="btn2" >ギフトカードを登録する</a> <br> <a href="#" class="btn3">Airbnbギフトカードの仕組みは?</a> </div> </div> </div> </div> </div> <footer> <div class="contact"> <div class="container"> <div class="contacter"> <div class="contact-form"> <h4>Airbnb</h4> <div class="contact-list"> <ul class="contact-lister"> <li><a href="#">採用情報</a></li> <li><a href="#">プレス</a></li> <li><a href="#">ポリシー</a></li> <li><a href="#">ヘルプ</a></li> <li><a href="#">ダイバーシティ&ビロンギング</a></li> <li><a href="#">企業情報</a></li> </ul> </div> </div> </div> <div class="contacter"> <div class="contact-form"> <h4>スタッフオススメ</h4> <div class="contact-list"> <ul class="contact-lister"> <li><a href="#">信頼&安全</a></li> <li><a href="#">お友達紹介クーポン</a></li> <li><a href="#">Airbnb Citizen</a></li> <li><a href="#">出張</a></li> <li><a href="#">ガイドブック</a></li> <li><a href="#">Airbnbmag</a></li> <li><a href="#">イベント</a></li> </ul> </div> </div> </div> <div class="contacter"> <div class="contact-form"> <h4>ホスティング</h4> <div class="contact-list"> <ul class="contact-lister"> <li><a href="#">ホストになる理由</a></li> <li><a href="#">おもてなしの心</a></li> <li><a href="#">ホストの責任</a></li> <li><a href="#">コミュニティセンター</a></li> <li><a href="#">体験を掲載</a></li> <li><a href="#">オープンホーム</a></li> </ul> </div> </div> </div> <div class="contacter"> <div class="contact-form"> <div class="contact-list"> <a href="#" class="fab fa-facebook-f"></a> <a href="#" class="fab fa-twitter"></a> <a href="#" class="fas fa-camera-retro"></a> <ul class="contact-lister"> <li><a href="#">利用規約</a></li> <li><a href="#">プライバシー</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> </div> </div> <a href="#" >Airbnb Global Services Limited 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> <p>© 2019 Airbnb, Inc. All rights reserved.</p> <a href="#">日本語</a> <a href="#">JPY-¥</a> </div> </div> </footer> <!-- <img src="img/BackgroundHomeSummer.jpg" alt="写真" width="1920" height="650"> --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> ```ここに言語を入力 コード css ```html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } html { font-family: sans-serif; } header { height: 80px; } a { text-decoration: none; } /* header-left */ .logo { margin-right: 25px; } .header-left { float: left; line-height: 80px; margin-left: 25px; } .header-left input { width: 460px; height: 48px; /* color: #eee; */ border-radius: 5px; /* background-image: "fas fa-search"; */ } /* header-right */ .header-right { line-height: 80px; display: flex; justify-content: flex-end; text-align: left; } .header-right a { font-size: 15px; color:#696969; font-weight: bolder; padding: 0 20px; } .alert { height:50px; color: black; } .main { background: url(../img/BackgroundHomeSummer.jpg); background-size: cover; height: 650px; position: relative; } .container { width: 1100px; margin: 0 auto; /* padding: 300px 0; */ /* position: absolute; */ } .text { position: absolute; color: white; top: 42%; font-weight: normal; } .contents { text-align: center; } .text p { margin-top: 20px; } .text button { margin-top:32px; padding: 10px 20px; } .contents h1 { font-size: 30px; } .box h5 { font-weight: bold; } .box p { font-size: 16px; margin-top: 24px; color: #767676; width: 80%; display: inline-block; } .boxs { display: flex; } .box { margin-top: 30px; width: 33%; } .contents { padding: 48px 0; } .far { margin-bottom: 25px; } .fas { margin-bottom: 25px; } .content-wrapper { padding: 48px 0; background: #007a87; text-align: center; padding: 48px 0: } .title { color: white; } .title h1 { margin-top: 20px; font-weight: bold; font-size: 30px; } .title p { font-size: 21px; } .btn2 { display: inline-block; margin: 20px 0 15px 0;; color: white; padding: 8px 24px; background-color: #ff5a5f; border-radius: 4px; font-weight: bold; } .btn3 { display: inline-block; color: white; opacity: 0.6; font-size: 15px; } .btn2:hover { text-decoration: none; color: white; opacity: 0.9; } .btn3:hover { text-decoration: none; color: white; opacity: 1; } .contact { margin-top: 25px; } li { list-style: none; } .contact-lister { display: flex; justify-content: space-between; } .contact-list { margin-top: 25px; width: 25%; } .contact h4 { font-size: 15px; font-weight: bold; opacity: 0.9; } .contact-list a { color:#767676; font-size: 14px; font-weight: bold; } ``` ### 補足情報(FW/ツールのバージョンなど) エディタはATOMを使用してます!

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

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

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

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

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

guest

回答3

0

ベストアンサー

下記をhead追加したところ、横並びにはなりますが、

html

1 <style> 2 footer .contact .container { 3 display: flex; 4 box-sizing: border-box; 5 flex-wrap: wrap; 6 } 7 footer .contact .container .contacter { 8 box-sizing: border-box; 9 width: 25%; 10 } 11 </style>

この部分だけはdivか何かでくくってあげないと難しいと思います。

html

1 <a href="#" >Airbnb Global Services Limited 2 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> 3 <p>© 2019 Airbnb, Inc. All rights reserved.</p> 4 <a href="#">日本語</a> 5 <a href="#">JPY-¥</a>

ここまでならこんな感じになります。

イメージ説明

もう少し手を加えて、こんな感じに変更すれば目的の形には近くなると思います。

headへの追加部分を下記に変更

html

1 <style> 2 footer .contact .container { 3 display: flex; 4 box-sizing: border-box; 5 flex-wrap: wrap; 6 } 7 footer .contact .container .contacter { 8 box-sizing: border-box; 9 width: 25%; 10 } 11 footer .contact .container .contacter:last-child { 12 box-sizing: border-box; 13 width: 100%; 14 display: flex; 15 border-top: 1px solid lightgray; 16 } 17 .flex-auto { 18 flex: auto; 19 } 20 </style>

問題の箇所を下記に変更

html

1 <div class="contacter"> 2 <div class="flex-auto"> 3 <a href="#" >Airbnb Global Services Limited 4 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> 5 <p>© 2019 Airbnb, Inc. All rights reserved.</p> 6 </div> 7 <div> 8 <a href="#">日本語</a> 9 <a href="#">JPY-¥</a> 10 </div> 11 </div>

イメージ説明

投稿2019/04/17 11:33

odyu

総合スコア548

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

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

rei007

2019/04/17 12:23

回答ありがとうございます!cssにコピペしたら横並びになりました。ありがとうございます!
guest

0

一旦footerメニューの横並びでしたら、以下のコードではいかがでしょうか?

HTML

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 10 <link rel="stylesheet" href="css/styles.css"> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 12 <link rel="favicon" href="img/437460254_fav.ico"> 13 <title>現地の人から借りる家、体験&スポット - Airbnb</title> 14 </head> 15 <body> 16 <header> 17 <div class="header"> 18 <div class="header-left"> 19 <img class="logo" src="img/airbnb-icon-18.jpg"class="fas fa-search" width="30px" height="30px"> 20 <!-- <form class="fas fa-search" action="#" method="get"> --> 21 <input type="search" type="text" placeholder="探す"> 22 <!-- </form> --> 23 </div> 24 <div class="header-right"> 25 <a class="host" href="#">ホストを始める</a> 26 <a class="help" href="#">ヘルプ</a> 27 <a class="register" href="#">登録する</a> 28 <a class="login" href="#">ログイン</a> 29 </div> 30 <!-- <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible" fade show> 31 <button type="button" class="close" deta-dismiss="alert" aria-label="閉じる"> 32 <span aria-hidden="true">&times;</span> 33 </button> 34 <i class="far fa-comment-dots fa-lightgreen"></i> 35 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 36 </div> 37 </div> --> 38 </header> 39 <div class="main"> 40 <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible" fade show> 41 <button type="button" class="close" deta-dismiss="alert" aria-label="閉じる"> 42 <span aria-hidden="true">&times;</span> 43 </button> 44 <i class="far fa-comment-dots fa-lightgreen"></i> 45 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 46 </div> 47 <div class="container"> 48 <div class="text"> 49 <h1>旅を送ろう。</h1> 50 <p>Airbnbギフトカードで、世界をぐんと身近に</p> 51 <button class="btn btn-light">ギフトカードを登録</button> 52 </div> 53 </div> 54 </div> 55 <!-- </div> --> 56 57 58 <div class="contents"> 59 <div class="container"> 60   <h1>いつも完璧な贈り物</h1> 61 <div class="boxs"> 62 <div class="box"> 63 <i class="far fa-envelope fa-3x fa-green"></i> 64 <h5>簡単に使える</h5> 65 <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 66 </div> 67 <div class="box"> 68 <i class="fas fa-stopwatch fa-3x"></i> 69 <h5>有効期限なし</h5> 70 <p>Airbnbのギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 71 </div> 72 <div class="box"> 73 <i class="fas fa-globe-africa fa-3x"></i> 74 <h5>忘れられない旅</h5> 75 <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 76 </div> 77 </div> 78 </div> 79 </div> 80 81 <div class="content-wrapper"> 82 <div class="container"> 83 <div class="title"> 84 <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png"> 85 <h1>ギフトカードをもらったら...</h1> 86 <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p> 87 <div class="btn-wrapper"> 88 <a href="#" class="btn2" >ギフトカードを登録する</a> 89 <br> 90 <a href="#" class="btn3">Airbnbギフトカードの仕組みは?</a> 91 </div> 92 93 </div> 94 </div> 95 </div> 96 </div> 97 98<footer> 99 <div class="contact"> 100 <div class="contact-inner"> 101 <div class="contacter"> 102 <div class="contact-form"> 103 <h4>Airbnb</h4> 104 <div class="contact-list"> 105 <ul class="contact-lister"> 106 <li><a href="#">採用情報</a></li> 107 <li><a href="#">プレス</a></li> 108 <li><a href="#">ポリシー</a></li> 109 <li><a href="#">ヘルプ</a></li> 110 <li><a href="#">ダイバーシティ&ビロンギング</a></li> 111 <li><a href="#">企業情報</a></li> 112 </ul> 113 </div> 114 </div> 115 </div> 116 <div class="contacter"> 117 <div class="contact-form"> 118 <h4>スタッフオススメ</h4> 119 <div class="contact-list"> 120 <ul class="contact-lister"> 121 <li><a href="#">信頼&安全</a></li> 122 <li><a href="#">お友達紹介クーポン</a></li> 123 <li><a href="#">Airbnb Citizen</a></li> 124 <li><a href="#">出張</a></li> 125 <li><a href="#">ガイドブック</a></li> 126 <li><a href="#">Airbnbmag</a></li> 127 <li><a href="#">イベント</a></li> 128 </ul> 129 </div> 130 </div> 131 </div> 132 <div class="contacter"> 133 <div class="contact-form"> 134 <h4>ホスティング</h4> 135 <div class="contact-list"> 136 <ul class="contact-lister"> 137 <li><a href="#">ホストになる理由</a></li> 138 <li><a href="#">おもてなしの心</a></li> 139 <li><a href="#">ホストの責任</a></li> 140 <li><a href="#">コミュニティセンター</a></li> 141 <li><a href="#">体験を掲載</a></li> 142 <li><a href="#">オープンホーム</a></li> 143 </ul> 144 </div> 145 </div> 146 </div> 147 <div class="contacter"> 148 <div class="contact-form"> 149 <div class="contact-list"> 150 <a href="#" class="fab fa-facebook-f"></a> 151 <a href="#" class="fab fa-twitter"></a> 152 <a href="#" class="fas fa-camera-retro"></a> 153 <ul class="contact-lister"> 154 <li><a href="#">利用規約</a></li> 155 <li><a href="#">プライバシー</a></li> 156 <li><a href="#">サイトマップ</a></li> 157 </ul> 158 </div> 159 </div> 160 </div> 161 </div> 162 <a href="#" >Airbnb Global Services Limited 163 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> 164 <p>© 2019 Airbnb, Inc. All rights reserved.</p> 165 <a href="#">日本語</a> 166 <a href="#">JPY-¥</a> 167 </div> 168 169 170 </footer> 171 <!-- <img src="img/BackgroundHomeSummer.jpg" alt="写真" width="1920" height="650"> --> 172 <!-- Optional JavaScript --> 173 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 174 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 175 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 176 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 177 </body> 178</html>

CSS

1ul, ol, li, 2h1, h2, h3, h4, h5, h6, p, div { 3 margin: 0; 4 padding: 0; 5} 6 7html { 8 font-family: sans-serif; 9} 10 11header { 12 height: 80px; 13 14} 15 16a { 17 text-decoration: none; 18} 19 20 21 22 23/* header-left */ 24.logo { 25 margin-right: 25px; 26} 27 28.header-left { 29 float: left; 30 line-height: 80px; 31 margin-left: 25px; 32} 33 34.header-left input { 35 width: 460px; 36 height: 48px; 37 /* color: #eee; */ 38 border-radius: 5px; 39 /* background-image: "fas fa-search"; */ 40} 41 42/* header-right */ 43.header-right { 44 line-height: 80px; 45 display: flex; 46 justify-content: flex-end; 47 text-align: left; 48} 49 50.header-right a { 51 font-size: 15px; 52 color:#696969; 53 font-weight: bolder; 54 padding: 0 20px; 55 56 57} 58 59.alert { 60 height:50px; 61 color: black; 62} 63 64 65 66 67 68 69.main { 70 background: url(../img/BackgroundHomeSummer.jpg); 71 background-size: cover; 72 height: 650px; 73 position: relative; 74} 75 76 .container { 77 width: 1100px; 78 margin: 0 auto; 79 /* padding: 300px 0; */ 80 /* position: absolute; */ 81} 82 83 .text { 84 position: absolute; 85 color: white; 86 top: 42%; 87 font-weight: normal; 88} 89 90.contents { 91 text-align: center; 92} 93 94.text p { 95 margin-top: 20px; 96} 97 98.text button { 99 margin-top:32px; 100 padding: 10px 20px; 101} 102 103.contents h1 { 104 105 font-size: 30px; 106} 107 108.box h5 { 109 font-weight: bold; 110} 111 112.box p { 113 font-size: 16px; 114 margin-top: 24px; 115 color: #767676; 116 width: 80%; 117 display: inline-block; 118} 119 120.boxs { 121 display: flex; 122} 123 124 125.box { 126 margin-top: 30px; 127 width: 33%; 128} 129 130.contents { 131 padding: 48px 0; 132} 133 134.far { 135 margin-bottom: 25px; 136} 137 138.fas { 139 margin-bottom: 25px; 140} 141 142 143.content-wrapper { 144 padding: 48px 0; 145 background: #007a87; 146 text-align: center; 147 padding: 48px 0: 148} 149 150.title { 151 color: white; 152} 153 154.title h1 { 155 margin-top: 20px; 156 font-weight: bold; 157 font-size: 30px; 158} 159 160.title p { 161 font-size: 21px; 162} 163 164.btn2 { 165 display: inline-block; 166 margin: 20px 0 15px 0;; 167 color: white; 168 padding: 8px 24px; 169 background-color: #ff5a5f; 170 border-radius: 4px; 171 font-weight: bold; 172} 173 174.btn3 { 175 display: inline-block; 176 color: white; 177 opacity: 0.6; 178 font-size: 15px; 179} 180 181.btn2:hover { 182 text-decoration: none; 183 color: white; 184 opacity: 0.9; 185} 186 187.btn3:hover { 188 text-decoration: none; 189 color: white; 190 opacity: 1; 191} 192 193 194.contact { 195 margin-top: 25px; 196} 197 198li { 199 list-style: none; 200} 201 202.contact h4 { 203 font-size: 15px; 204 font-weight: bold; 205 opacity: 0.9; 206 207} 208 209.contact-list a { 210 color:#767676; 211 font-size: 14px; 212 font-weight: bold; 213 214} 215 216/* 追加コード */ 217footer { 218 width: 1140px; 219 margin: auto; 220} 221.contact-inner { 222 display: flex; 223} 224.contacter { 225 width: calc(100% / 4); 226}

.contact-listerにflex指定していましたが、このクラスを囲う大枠のdivに指定してあげないと全体が横並びになりません。

HTMLはfooter内の構造、ならびにclassを変更しました。
CSSは一部削除の上、一番下に追加コードを記述しました。

codepenで実装確認しています。

投稿2019/04/17 10:36

編集2019/04/17 10:43
otamunote

総合スコア281

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

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

rei007

2019/04/17 12:22

回答ありがとうございます!参考にさせていただきます。
guest

0

footterにdisplay:flexを指定していますか?

投稿2019/04/17 10:24

researcher

総合スコア87

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

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

rei007

2019/04/17 12:21

回答ありがとうございます!footerにflexしてなかったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問