アイコン、タイトル、内容を表記した商品リストの編集方法について

前提・実現したいこと

HP制作の初心者です。

現在HTML&CSSでアイコン、タイトル、内容を含めたメニュー表を製作しています。

見た目上は価格.comさんのHP(https://kakaku.com/)の「パソコン～」の表を目標として作成しているのですが、タイトルと内容をPC、携帯での表示に関わらず、アイコンと少し間を空けて、中心より右側に配置したいと考えています。

position:relativeやpaddingを使用して配置を変えようとしましたが、同じコードでもHP制作のみうまく右にズレ、他はおかしな表示になってしまいました。

この場合のタイトル、内容の動かすときは、どのようなタグを用いて動かせばよいでしょうか。

とても汚いコーディングになっていると思いますので、分かりづらくて申し訳ありませんが、どうかご教示いただけますでしょうか。

(環境：Wordpress　テーマ：vizvektor lightning)

参考までに現在の表示を添付いたします。

PC表示

携帯表示

Side-bar追加時の表示

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Flexbox</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <div class="category">
10      <a href="" class="btn category1"><i class="fas fa-laptop-house fa-position-left fa-2x"></i>HP制作<br><span class="sub"><br>デザイン<br>Wordpress<br>SEO</span></a>
11      <a href="" class="btn category2"><i class="fas fa-laptop-code fa-position-left fa-2x"></i>プログラミング<br><span class="sub"><br>プログラミング言語<br>web開発<br>アプリ開発</span></a>
12      <a href="" class="btn category3"><i class="far fa-play-circle fa-position-left fa-2x"></i>動画編集<br><span class="sub"><br>サムネイル<br>編集ツール<br>字幕</span></a>
13      <a href="" class="btn category4"><i class="far fa-image fa-position-left fa-2x"></i>デザイン<br><span class="sub"><br>イラスト<br>CGイラスト<br>アニメーション</span></a>
14      <a href="" class="btn category5"><i class="fas fa-shopping-cart fa-position-left fa-2x"></i>物販<br><span class="sub"><br>Amazon<br>メルカリ<br>輸入</span></a>
15      <a href="" class="btn category6"><i class="fas fa-chart-line fa-position-left fa-2x"></i>株<br><span class="sub"><br>証券会社<br>国内投資<br>国外投資</span></a>
16      <a href="" class="btn category7"><i class="fas fa-money-bill fa-position-left fa-2x"></i>FX<br><span class="sub"><br>為替差益<br>スワップポイント<br>レバレッジ</span></a>
17      <a href="" class="btn category8"><i class="fab fa-bitcoin fa-position-left fa-2x"></i>暗号資産<br><span class="sub"><br>ビットコイン<br>イーサリアム<br>リップル</span></a>      
18      <a href="" class="btn category9"><i class="fas fa-chart-bar fa-position-left fa-2x"></i>マーケティング<br><span class="sub"><br>webマーケティング<br>web広告<br>経営・戦略企画</span></a>
19      <a href="" class="btn category10"><i class="fas fa-desktop fa-position-left fa-2x"></i>パソコン<br><span class="sub"><br>Word<br>Excel<br>PowerPoint</span></a>
20      <a href="" class="btn category11"><i class="far fa-comments fa-position-left fa-2x"></i>言語<br><span class="sub"><br>英語<br>フランス語<br>中国語</span></a>
21      <a href="" class="btn category12"><i class="fas fa-gamepad fa-position-left fa-2x"></i>ゲーム<br><span class="sub"><br>FPS<br>MOBA<br>格ゲー</span></a>     
22    </div>
23  </body>
24</html>
25

css
1@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";
2
3*,
4*:before,
5*:after {
6  -webkit-box-sizing: inherit;
7  box-sizing: inherit;
8}
9
10html {
11  -webkit-box-sizing: border-box;
12  box-sizing: border-box;
13  font-size: 62.5%;
14}
15
16.btn,
17a.btn,
18button.btn {
19  font-size: 1.6rem;
20  font-weight: 700;
21  line-height: 1;
22  position: relative;
23  display: inline-block;
24  padding: 1rem 4rem;
25  cursor: pointer;
26  -webkit-user-select: none;
27  -moz-user-select: none;
28  -ms-user-select: none;
29  user-select: none;
30  -webkit-transition: all 0.3s;
31  transition: all 0.3s;
32  text-align: center;
33  vertical-align: middle;
34  text-decoration: none;
35  letter-spacing: 0.1em;
36  color: #212529;
37  border: 1px solid black;
38  border-radius: 0.5rem;
39  white-space: nowrap;
40}
41
42.btn:hover {
43  background-color: black;
44  color: white;
45}
46
47.btn,
48a.btn {
49  color: black;
50  background-color: white;
51  width: 25%;
52}
53
54.sub {
55  color: #797979;
56}
57
58.btn--orange:hover,
59a.btn--orange:hover {
60  color: #fff;
61  background: #f56500;
62}
63
64.fa-position-left {
65  position: absolute;
66  top: calc(50% - 0.5em);
67  left: 4rem;
68}
69
70.category {
71  display: flex;
72  flex-wrap: wrap;
73}
74
75.category btn {
76  flex: auto;
77}
78
79.category span {
80  font-size: 1rem;
81}
82
83
84
85/* スマホ向けレイアウト */
86@media(max-width:1000px) {
87  .btn,
88a.btn {
89  width: 50%;
90  font-size: 1.1rem;
91}
92  .sub {
93    display: none;
94  }
95}
96.fa-position-left {
97  position: absolute;
98  top: calc(50% - 0.5em);
99  left: 1rem;
100}
101
102

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

回答1件

ベストアンサー

下記のcssを追加してみてはどうでしょうか

css
1a.btn{
2	padding: 1rem 1rem 1rem 6rem;
3}

投稿2021/08/08 15:38

webgoto

総合スコア1293

joe0904

2021/08/08 16:17

webgoto様ご回答いただきありがとうございます。私の説明の仕方が悪く、ご指摘いただいた方法で、テスト環境(本HTMLとCSSのみ)では上手く表示されたのですが、WordpressのHP上では、サイドバーがあるせいか、それともテーマのせいなのか、コードを入力しても表示の変化が見られませんでした。(使用テーマ：BizVektor Lightning) これはどういったことが原因と考え得るか、ご検討つきますでしょうか。再度の質問となってしまい申し訳ありませんが、お力を貸して頂けましたら幸いです。

webgoto

2021/08/09 01:15

他のcssでpaddingが上書きされているのかもしれません。上書きされているならセレクタにbody .category a.btn{}のように親要素も追加することで詳細度が高くなり、このスタイルが優先されるはずです。またはセレクタに誤りがあり、適用自体されていないのかもしれません。どちらにせよブラウザのデベロッパーツールでaタグ部分に適用されているスタイルを確認すると良いと思います。

joe0904

2021/08/09 02:20

webgoto様ご回答いただきありがとうございます。教えていただいた通りセレクタを詳細に指定したら上手く表示がされました！初歩的なところまでアドバイスいただき本当にありがとうございます。 webgoto様のような心強く、お優しい先達にアドバイスいただき、私自身も知識を身につけ他の方の力になりたいなと思わせていただきました。この度は誠にありがとうございました(#^^#)

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