cssでcolorプロパティが違う場所に適用されてしまう

前提・実現したいこと

もっと詳しく　と書かれているところに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>

<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>

</body> </html>

該当のソースコード

*{
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;
}

m.ts10806

2020/02/14 01:25

コードはマークダウンのcode機能を利用してご提示ください。

行動規範の内容に同意します

回答2件

.articleをfloatにしているので.detailsが上位.articlesいっぱいまで
広がっています

投稿2020/02/14 01:37

yambejp

総合スコア114839

ベストアンサー

こんな感じ？

css
1.details span{
2    font-size:25px;
3    background-color: green;
4}

html
1  <div class="details">
2    <span>もっと詳しく</span>
3  </div>

https://jsfiddle.net/1526okqs/

投稿2020/02/14 01:27

編集2020/02/14 01:28

sola-msr

総合スコア876

kms153

2020/02/14 01:30

ありがとうございます！！spanタグで囲むやり方があったんですね！

sola-msr

2020/02/14 01:32

https://developer.mozilla.org/ja/docs/Web/HTML/Element/span spanタグについてはこの辺とか参考にしてくださいー

kms153

2020/02/14 01:52

ご丁寧にありがとうございます！????‍♂️参考になりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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