CSSで色を付けたい

前提・実現したいこと

現在画像1のようになっています。文字の周りにだけ色がついていています。画像2のように全体に色を付けたいです。

画像1 現在の状態

画像2 理想の状態

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
5
6    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
7    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
8    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
9
10    <style>
11    body {
12      padding-top: 10px;
13    }
14
15    .index {
16      background-color: red;
17    }
18    </style>
19  </head>
20
21  <body>
22    <div class="container">
23      <ul class="list-group">
24        <li class="list-group-item"><span class="index">1</span><span>name001</span></li>
25        <li class="list-group-item"><span class="index">2</span><span>name002</span></li>
26        <li class="list-group-item"><span class="index">3</span><span>name003</span></li>
27      </ul>
28    </div>
29  </body>
30</html>
31

試したこと

Chromeの開発者ツールで要素を1つづつ調べたところli class="list-group-item"に対してpadding: .75rem 1.25remがCSSフレームワークのBootstrapによって付けられている事がわかりました。おそらくこのパディングが原因で全体に色がついていません。

しかし、どのようにすればこのパディングを無視して色を付けられるかが分かりません。

補足情報（FW/ツールのバージョンなど）

Bootstrap 4.5.0

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

回答1件

ベストアンサー

bootstrapをcss側で上書きすれば可能です。

css
1.list-group .list-group-item {
2  padding: 0;
3}
4
5.list-group .list-group-item span {
6  padding: .75rem .5rem;
7  display: inline-block;
8}

投稿2020/07/18 13:18

FrontEnd_Japan

総合スコア271

退会済みユーザー

2020/07/18 13:36

ご回答ありがとうございます。実現できました。しかし、よく見ると、はみでていました。 https://i.imgur.com/1VOhUWn.png おそらくspanに対しての背景色を指定した為、上位要素のborder-radiusを無視した状態になっていそうです。最初と最後の要素で`border-top-left-radius`と`border-bottom-left-radius`を利用すれば回避できそうですが「上位要素にフィットする形のCSS」というのはCSSの仕様上難しいでしょうか…？

FrontEnd_Japan

2020/07/18 14:07

いいえ、できると思いますよ。ソースコードを少し修正しました。 .list-group .list-group-item { padding: 0; } .list-group .list-group-item span { padding: .75rem .5rem; display: inline-block; width: 1.5rem; border-top-left-radius: inherit; } .list-group .list-group-item:last-child span { border-bottom-left-radius: inherit;

FrontEnd_Japan

2020/07/18 14:13

100%正確に揃えることは難しいですが、利用者側が気になる程度ではなければ問題ない気がします。備考ですが、Bootstrapを取り入れるがCSSで上書きまつりになると改修性が低くなるので、Bootstrapを利用する場合はBootstrapのドキュメントに則って利用するのをオススメします。

退会済みユーザー

2020/07/18 14:30

なるほど、inheritというのがあるのですねありがとうございます。 CSSフレームワークを利用した場合、カスタマイズを考えると色々なところを考慮してCSSを書く必要があるのですね…。ありがとうございました。地道に覚えていきます。

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