Q&A
コードはマークダウンのcode機能を利用してご提示ください。
前提・実現したいこと
もっと詳しく と書かれているところにcolorプロパティで緑色をつけたいのですが、article全体に色が付いてしまいます。
どう変えればいいいのでしょうか？？
ここに質問の内容を詳しく書いてください。
該当のソースコード
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <title>My portfolio</title> </head> <body> <header> <div class="header-container"> <h1>My portfolio</h1> <p>初めてのwebサイト</p> </div> </header></body> </html><div class="top-wrapper"> <div class="top-container"> <h1>記事一覧</h1> </div> <div class="articles"> <div class="article"> <img src="article1.jpg"> <p>パソコン</p> </div> <div class="article"> <img src="article2.jpg"> <p>初心者</p> </div> <div class="article"> <img src="article3.jpg"> <p>中国</p> </div><div class="article"> <img src="article4.jpg"> <p>ニュース</p> </div> <div class="details"> もっと詳しく </div> </div> </div> </div> <footer> <div class="container"> <div class="footer-logo"> My portfolio </div> <div class="footer-list"> <a href="#">ホーム</a> <a href="#">採用</a> <a href="#">お問い合わせ</a> </div> </div> </footer>
該当のソースコード
*{
box-sizing:border-box;
margin: 0px;
padding-left:15px;
padding-right:15px;
}
.header-container{
background-color:gray;
margin-bottom: 0px;
height: 110px;
font-size: 15px;
position: relative;
top: 0;
right: 10;
z-index: 10;
opacity: 0.8;
width:100%;
}
.header-container h1{
padding-left: 60px;
}
.header-container p{
padding-left: 60px;
}
.top-container{
padding-top: 100px;
}
.article {
display:block;
float:left;
width:50%;
text-align: center;
}
.article p{
margin-top:0px;
margin-bottom: 30px;
}
.top-container h1{
padding-left:60px;
}
.details{
font-size:25px;
background-color: green;
}
footer{
height:300px ;
background-color: skyblue;
margin-top:1000px;
}
.footer-logo{
float:left;
font-size: 30px;
}
.footer-list a{
float:right;
display: block;
padding-right: 20px;
font-size: 20px;
}
回答2件
0
.articleをfloatにしているので.detailsが上位.articlesいっぱいまで
広がっています
投稿2020/02/14 01:37
総合スコア116468
0
ベストアンサー
こんな感じ？
css
1.details span{ 2 font-size:25px; 3 background-color: green; 4}
html
1 <div class="details"> 2 <span>もっと詳しく</span> 3 </div>
投稿2020/02/14 01:27
編集2020/02/14 01:28
総合スコア876
ありがとうございます！！spanタグで囲むやり方があったんですね！
https://developer.mozilla.org/ja/docs/Web/HTML/Element/span
spanタグについてはこの辺とか参考にしてくださいー
ご丁寧にありがとうございます！????♂️参考になりました！
あなたの回答
tips
プレビュー
