Q&A
footer部分のborderが適応されない。
コード<!doctype html> < <footer> <div class="contact"> <div class="container"> <div class="contacter"> <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 class="contacter"> <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 class="contacter"> <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 class="contacter"> <div class="contact-list"> <a href="#" class="fab fa-facebook-f fa-3x"></a> <a href="#" class="fab fa-twitter fa-3x"></a> <a href="#" class="fas fa-camera-retro fa-3x"></a> <ul class="contact-lister"> <li><a href="#">利用規約</a></li> <li><a href="#">プライバシー</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> </div> <div class="contacter"> <div class="flex-auto"> <a href="#" >Airbnb Global Services Limited 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> <p>© 2019 Airbnb, Inc. All rights reserved.</p> </div> </div> <div class="money"> <a href="#">日本語</a> <a href="#">JPY-￥</a> </div> </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>
に言語を入力
コード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: 40px;
}
li {
list-style: none;
}
.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;
}
.contact-list a:hover {
color: #767676;
}
.fab {
font-weight: 4
margin-right: 5px;
}
footer .contact .container {
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
}
footer .contact .container .contacter {
box-sizing: border-box;
width: 25%;
}
footer .contact .container .contacter:last-child {
box-sizing: border-box;
width: 100%;
display: flex;
border-bottom: 1px solid lightgray;
}
.flex-auto {
/* padding-top: 15px; /
flex: none;
/ border-top: 1px solid #767676; /
/ display: flex; */
青字の上にborderを入れたい！
この画像のようにしたい！
どなたかアドバイスお願いします！！
回答1件
0
ベストアンサー
手順としては、
①footerメニューの以下の部分をひとつのタグでまとめる。
②まとめたタグにスタイルをあてる
という感じです。
①は下記のようにdivでまとめ、classをつけます。
THML
1<div class="copy"> 2 <div class="contacter"> 3 <div class="flex-auto"> 4 <a href="#" >Airbnb Global Services Limited 5 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> 6 <p>© 2019 Airbnb, Inc. All rights reserved.</p> 7 </div> 8 </div> 9 <div class="money"> 10 <a href="#">日本語</a> 11 <a href="#">JPY-￥</a> 12 </div> 13</div>
②はまとめたclass="copy"にスタイルをあてます。
CSS
1.copy { 2 border-top: 1px solid #CCC; 3 width: 100%; 4 margin-top: 20px; 5 padding-top: 20px; 6}
class名や線の色、余白はその都度調整ください。
投稿2019/04/18 13:18
総合スコア281
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/20 04:15