ボタンのwidthとheightを指定しても効かない

現在、勉強としてサイトの模写をしていいます。ボタンを作っているのですが、widthとheightを指定しても効きません。

ちなみにボタンはclass=".about_btn"です。width:340px; height:80px;と指定しいますが効きません。display:inline-block;にしてるせいで動かないのかと思ったのですが、display:flexと書いていました。

勉強しているサイトは、ちなみにこちらです。→https://sugiyama-kagu.com/
（こちらのサイトでは、ちなみにボタンはclass="com_btn"としてされています。）

勉強中ですので、優しく教えていただけると助かります。よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7    <script src="effect.js"></script>
8    <link rel="stylesheet" href="stylesheet.css">
9    <title>杉山家具製作所</title>
10</head>
11<body>
12    <div class="loading-wrap">
13        <div id="loading">
14            <div class="loading-img">
15                <img src="https://sugiyama-kagu.com/wp/wp-content/themes/sugiyama/img/common/logo_loading.svg">
16            </div>
17        </div>
18        <!-- ヘッダー -->
19        <div id="wrap">
20            <header class="header">
21                <div class="logo">
22                    <img src="https://sugiyama-kagu.com/wp/wp-content/themes/sugiyama/img/common/logo.svg">
23                </div>
24                <div class="header-right">
25                    <nav class="header-navi">
26                        <ul>
27                            <li><a href="about.html">杉山家具製作所について</a></li>
28                            <li><a href="product.html">製品について</a></li>
29                            <li><a href="work.html">納品事例</a></li>
30                            <li><a href="company.html">会社情報</a></li>
31                        </ul>
32                    </nav>
33                    <a href='#' class="recruit-button">採用情報</a>
34                    <a href='#' class="contact-button">お問い合わせ</a>
35                </div>
36            </header>
37            <div id ="slick-list">
38                <li><img src="images/main_01.jpg"></li>
39                <!-- <li><img src="images/main_02.jpg"></li> -->
40                <!-- <li><img src="images/main_03.jpg"></li> -->
41                <!-- <li><img src="images/main_04.jpg"></li> -->
42                <!-- <li><img src="images/main_05.jpg"></li> -->
43            </div>
44            <section class="news news_padding">
45                <h2 class="news_title">NEWS</h2>
46                <ul class="news_list">
47                    <li><a href="https://sugiyama-kagu.com/2020/07/29/%e6%9d%89%e5%b1%b1%e5%ae%b6%e5%85%b7%e8%a3%bd%e4%bd%9c%e6%89%80web%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/">
48						<p class="date">2020/07/29</p>
49						<p class="category"><span>お知らせ</span></p>
50						<p class="title ellipsis">公式Webサイトをリニューアルしました</p>
51					</a></li>
52                </ul>
53                <a href＝# class="contact_link">お知らせの一覧</a>
54            </section>
55        </div>
56        <section class="philosophy font_green">
57            <div class="text_area">
58                <h2 class="com_title">
59                    <p class="en">our philosophy</p>
60                    <p class="ja">杉山家具製作所の家具づくり</p>
61                </h2>
62                <p class="text">
63                    ただものを詰め込むためだけの
64                <br class="text_sp">
65                    家具ではあってはいけない。
66                </br>
67                    間に合わせの家具であってもいけない。
68                </br>
69                    ものが溢れる豊さではなく、
70                </br>
71                    こころが豊かになるような
72                <br class="text_sp">
73                家具づくりをするべきである。
74                </p>
75                <div class="btn_wrap">
76                    <a href="about.html" class="about_btn">
77                        <span>杉山家具製作所について</span>
78                    </a>
79                </div>
80            </div>
81            <img src="images/philosophy.jpg" class="philosophy_photo">
82        </section>
83        <section class="quality　font_green padding">
84            <h2 class="com_title center">
85                <p class="en">commitment to quality</p>
86                <p class="ja">杉山家具製作所の製品について</p>
87            </h2>
88            <ul class="quality_list">
89                <li>
90                    <a href="product.html">
91                        <picture>
92                            <img src="images/product_link_01.jpg">
93                        </picture>
94                    </a>
95                    <h3 class="title com_arrow">製品の種類</h3>
96                 </li>
97                    
98                <li>
99                    <a href="wood.html">
100                        <picture>
101                            <img src="images/product_link_02.jpg">
102                        </picture>
103                    </a>
104                    <h3 class="title com_arrow">木材の種類</h3>
105                </li>
106                <li>
107                    <a href="technology.html">
108                        <picture>
109                            <img src="images/product_link_03.jpg">
110                        </picture>
111                    </a>
112                    <h3 class="title com_arrow">技術・設備</h3>
113                </li>
114            </ul>
115
116        </section>
117
118</body>
119</html>

CSS
1*{
2    margin:0;
3    padding:0;
4    box-sizing:border-box;
5    
6}
7body{
8    font-family: toppan-bunkyu-mincho-pr6n, "ヒラギノ明朝 Pro W3", "HiraMinPro-W3", "游明朝","Yu Mincho","YuMincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;    
9    font-size: 16px;
10    letter-spacing: 0.12em;
11}
12.loading-img{
13    width:230px;
14    height:755px;
15    position: absolute;
16    left: 0;
17    right: 0;
18    margin: auto;
19    top: 43%;
20    display:none;
21}
22
23.header{
24    height:120px;
25    width: 100%;  
26    display: flex; 
27    text-align:right;
28    justify-content: space-between;
29    background-color: #fff;
30
31}
32
33.header .logo{
34    width:200px;
35    margin-left: 60px;
36    align-self: center;
37
38}
39
40nav ul li{
41    list-style:none;
42    margin-right: 50px;
43
44}
45.header-right a {
46    text-decoration: none;
47}
48
49nav ul{
50    display:flex;
51   
52}
53
54header .header-right {
55    display:flex;
56    align-items:center;
57    font-size: 14px;
58    letter-spacing: 0.07em;
59}
60
61.header-right a.recruit-button{
62    height: 120px;
63    line-height: 120px;
64    text-align: center;
65    width:120px;
66    border-left: 1px solid #dcddda;
67    border-right: 1px solid #dcddda;
68}
69
70a.contact-button{
71    width: 200px;
72    background-color: #4e5346;
73    height: 120px;
74    color: #fff;
75    line-height: 120px;
76    text-align: center;
77}
78#slick-list li{
79    display: block;
80
81}
82#slick-list li img{
83    list-style: none;
84}
85.news{
86    display: flex;
87    align-items: center;
88    padding: 0 20px;
89
90}
91
92.news_title{
93    font-size: 15px;
94    color: #4e5346;
95    width: 100px;
96}
97
98.news_list li a{
99    display:flex;
100    text-decoration:none;
101}
102.news_list li{
103    list-style:none;
104}
105.date{
106    font-size: 13px;
107    width: 90px;
108    margin-right: 10px;
109}
110.category {
111    font-size: 11px;
112    width: 110px;
113}
114.category span {
115    border: 1px solid #dcddda;
116    display: inline-block;
117    padding: 0 5px;
118    letter-spacing: 0.12em;
119}
120.title{
121    font-size: 14px;
122    letter-spacing: 0.14em;
123    display: inline-block;
124    max-width: 100%;
125}
126
127.news_padding{
128    max-width: 1062px;
129    margin: 60px auto 0;
130}
131.contact_link{
132    width: 170px;
133    font-size: 13px;
134    letter-spacing: 0.14em;
135    margin-left: 15px;
136    background: url(https://sugiyama-kagu.com/wp/wp-content/themes/sugiyama/img/common/arrow_green_right.svg) right top 6px/60px 4px no-repeat;
137}
138
139.news .news_list{
140    width: calc(100% - 285px);
141}
142.philosophy{
143    margin-top: 150px;
144    display: flex;
145    justify-content: flex-end;
146
147}
148
149.text_area{
150    width: 41%;
151    margin-top: 37px;
152    padding-right: 10px;
153    padding-left: 80px;
154}
155
156.text{
157    letter-spacing: 0.14em;
158    line-height: 3.75em;
159    margin-top: 55px;
160}
161.com_title .ja{
162    font-size: 14px;
163    letter-spacing: 0.14em;
164    margin-top: 12px;
165}
166
167.com_title .en{
168    font-size: 35px;
169    letter-spacing: 0;
170}
171
172.about_btn{
173    width: 340px;
174    height:80px;
175    border: 1px solid #4e5346;
176    line-height: 80px;
177    border: 1px solid #4e5346;
178    font-size: 15px;
179    letter-spacing: 0.14em;
180    text-align: center;
181
182}
183a.about_btn span{
184    display: inline-block;
185    padding-right: 80px;
186    background: url(https://sugiyama-kagu.com/wp/wp-content/themes/sugiyama/img/common/arrow_green_right.svg) right center/60px 4px no-repeat;
187}
188.padding{
189    margin-top: 167px;
190    padding: 0 20px;
191}
192.com_title {
193    color: #4e5346;
194    font-weight: normal;
195}
196.font_green{
197    color: #4e5346;
198}
199.philosophy_photo{
200    width: 59%;
201    max-width: 825px;
202}
203a{
204    color: inherit;
205}
206.center{
207    text-align: center;
208}
209.quality_list{
210    display: flex;
211    justify-content: space-between;
212    max-width: 1230px;
213    margin: 95px auto 0;
214
215}
216.quality_list li{
217    width: calc((100% - 13%)/3);
218
219}
220.quality_list li h3{
221    margin-top: 47px;
222    color: #4e5346;
223
224}
225ul{
226    list-style: none;
227}
228img{
229    width: 100%;
230
231}
232.com_arrow{
233    display: inline-block;
234    padding-right: 80px;
235    background: url('https://sugiyama-kagu.com/wp/wp-content/themes/sugiyama/img/common/arrow_green_right.svg') right center/60px 40px no-repeat;
236}

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

回答3件

ベストアンサー

about_btnがついているaタグはデフォルトだとdisplay:inlineなので、width等が効かないので、displayをblock等にする必要があります。

投稿2020/08/19 13:43

kmtr

総合スコア213

dreamland

2020/08/19 13:55

ありがとうございます。display:blockにしたらできました！

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

.about_btn を指定しているのはaタグかと思いますが、
aタグはインライン要素です。

その為、そのままでは幅や高さの指定が効きません。

css
1.about_btn{
2    width: 340px;
3    height:80px;
4    border: 1px solid #4e5346;
5    line-height: 80px;
6    border: 1px solid #4e5346;
7    font-size: 15px;
8    letter-spacing: 0.14em;
9    text-align: center;
10    display: block; //追加
11}

ブロック要素として指定してあげるとどうでしょうか？

投稿2020/08/19 13:43

phiar_poet

総合スコア230

dreamland

2020/08/19 13:54

ありがとうございます。display:blockにしたらできました！

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

CSS
1.about_btn {
2    width: 340px;
3    height: 80px;
4    border: 1px solid #4e5346;
5    line-height: 80px;
6    border: 1px solid #4e5346;
7    font-size: 15px;
8    letter-spacing: 0.14em;
9    text-align: center;
10    display: inline-block;/* ADD */
11}