CSS border-style:none;が一切効かない

今Webサイトを
制作しておりまして

現段階としては
レスポンシブに対応させているところでございます。

画像を見てもらえれば分かると思いますが
レスポンシブで必要ない要素はdisplay:none;にて
領域ごと削除しておりますが

なぜか、このIT MASTERの隣の
ボーダーだけborder-style:none;で消す事が出来ません。

display:noneを行えば消す事は出来るのですが
それだとIT MASTERの要素ごと決してしまいますので
なんとしてでも、border-style:none;で削除したいと思っております。

こちらが、index.phpです。

PHP
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">
6        <title></title>
7        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.1/build/cssreset/cssreset-min.css">
8        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
9        <link rel="stylesheet" type="text/css" href="style.css">
10    </head>
11    <body>
12      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
13      <script>
14
15
16
17
18
19$(function(){
20
21
22
23$("#botton").click(function(){
24    $('#Menu a').show();
25    $('#botton').hide();
26    $('#botton2').show();
27
28});
29
30$("#botton2").click(function(){
31$("#Menu a").hide();
32$('#botton').show();
33$('#botton2').hide();
34
35
36});
37
38
39
40
41
42});
43      </script>
44      <!-- ヘッダー -->
45      <header>
46        <h1 id="Main"><a href="<?php echo esc_url( get_home_url() ); ?>">IT MASTER</a></h1>
47        <div id="Block"></div>
48          <div id="botton">≡</div>
49           <div id="botton2">X</div>
50            <div id="Menu">
51             <?php wp_nav_menu(); ?>
52              <a style="display:none;" href="">テスト</a>
53         </div>
54        <div id="Block2"></div>
55    </header>
56    <!-- ここまで -->
57    <!-- ここまで --></span>
58<!-- メインコンテンツ -->
59    <section>
60      <div id="Block3"></div>
61      <div id="MainContent">
62
63
64        <?php if (have_posts()) : ?>
65        <?php while (have_posts()) : the_post(); ?>
66
67
68          <div class="PictureContent">
69         <?php if (has_post_thumbnail()) : ?>
70         <?php the_post_thumbnail(array(100, 100)); ?>
71         <?php else: ?>
72         <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" width="150" height="150">
73         <?php endif; ?>
74        </div>
75
76
77
78                  <a class="TitleContent" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
79
80
81
82                    <p class="DataContent">
83                      <?php echo get_the_date(); ?>
84                    </p>
85
86
87
88
89
90                         <div class="PostContent"><?php the_content('続きを読む...'); ?></div>
91
92
93
94                         <?php
95                  endwhile;
96              else:
97              ?>
98
99
100              <p>Not Found Pages...</p>
101
102              <?php
103              endif;
104              ?>
105  </div>
106    </section>
107    <!-- ここまで -->

こちらがstyle.cssです。

CSS
1body{
2background-color:white;
3text-align:center;
4height:100%;
5}
6
7html{
8  height:100%;
9}
10
11a{
12color:black;
13text-decoration:none;
14}
15
16li{
17list-style:none;
18color:tan;
19}
20
21ul{
22color:tan;
23}
24
25p{
26  text-align:center;
27  color:lightgray;
28  font-size:25px;
29}
30
31h2{
32  color:lightgray;
33}
34
35#Main{
36font-size:50px;
37border-bottom-style:solid;
38border-bottom-color:burlywood;
39}
40
41#Block{
42background-color:black;
43width:20%;
44height:80px;
45float:left;
46border-bottom-style:solid;
47border-bottom-color:tan;
48}
49
50#botton{
51 display:none;
52}
53#botton2{
54  display:none;
55}
56#Menu a{
57  background-color:black;
58  color:tan;
59  width:20%;
60  height:80px;
61  float:left;
62  display:flex;
63  align-items:center;
64  justify-content:center;
65  border-bottom-style:solid;
66  border-bottom-color:burlywood;
67}
68
69#Menu a:hover{
70 color:lightgray;
71}
72
73
74
75#Block2{
76background-color:black;
77width:20%;
78height:80px;
79border-bottom-style:solid;
80border-bottom-color:burlywood;
81float:left;
82}
83
84#Categori{
85background-color:black;
86width:17%;
87height:1250px;
88padding-top:80px;
89clear:both;
90border-right-style:solid;
91border-right-color:burlywood;
92}
93
94.CategoriMenu{
95  font-size:25px;
96  border-width:1px;
97  border-bottom-style:solid;
98  border-bottom-color:#DDDDDD;
99  padding-top:30px;
100}
101
102.CategoriMenu1{
103  color:lightgray;
104  font-size:25px;
105  padding-top:15px;
106}
107
108.CategoriMenu1:hover{
109  color:tan;
110}
111
112#Block3{
113  background-color:black;
114  width:17%;
115  height:120.8px;
116  float:left;
117  border-right-style:solid;
118  border-right-color:burlywood;
119}
120
121#MainContent{
122  background-color:black;
123  width:50%;
124  float:left;
125  /*height:1450px;*/
126  min-height:1450px;
127  height:auto;
128  margin-left:8%;
129  margin-top:-1330px;
130  border-right-style:solid;
131  border-right-color:burlywood;
132  border-left-style:solid;
133  border-left-color:burlywood;
134}
135
136.PictureContent{
137  float:left;
138  padding-left:26%;
139  padding-top:40px;
140}
141
142.TitleContent{
143  color:burlywood;
144  font-size:30px;
145  padding-left:5%;
146  padding-top:60px;
147  float:left;
148}
149
150.DataContent{
151color:burlywood;
152font-size:20px;
153position:relative;
154top:-60px;
155clear:both;
156}
157
158.PostContent{
159padding-top:0px;
160overflow:hidden;
161font-size:10px;
162}
163
164.more-link{
165  color:burlywood;
166}
167
168.Block4{
169background-color:black;
170margin-left:25.1%;
171height:0.1px;
172width:50%;
173clear:both;
174top:-2px;
175position:relative;
176border-right-style:solid;
177border-right-color:tan;
178border-left-style:solid;
179border-left-color:tan;
180}
181
182.Block5{
183background-color:black;
184margin-left:25.1%;
185height:0.1px;
186width:50%;
187float:left;
188position:relative;
189top:-2px;
190border-right-style:solid;
191border-right-color:tan;
192border-left-style:solid;
193border-left-color:tan;
194}
195
196.ProfileContent{
197background-color:black;
198width:17%;
199height:1450px;
200margin-left:82.9%;
201margin-top:-1450px;
202float:left;
203border-left-style:solid;
204border-left-color:tan;
205border-top-style:solid;
206border-top-color:tan;
207color:lightgray;
208font-size:10px;
209}
210
211
212
213@media screen and (max-width: 1200px) {
214
215
216html{
217  border-style:none;
218}
219
220body{
221  background-color:black;
222  text-align:center;
223  border-style:none;
224}
225
226a{
227color:tan;
228text-decoration:none;
229border-style:none;
230}
231
232h1{
233  border-style:none;
234}
235
236#Main{
237  font-size:25px;
238  position:relative;
239  left:-50%;
240  float:right;
241  border-style:none;
242
243}
244
245#Block{
246display:none;
247}
248
249#botton{
250
251  display:block;
252  color:tan;
253  font-size:50px;
254  position:absolute;
255  top:-20px;
256  left:0px;
257}
258
259#botton2{
260color:tan;
261font-size:35px;
262position:absolute;
263top:-5px;
264left:5px;
265display:none;
266}
267
268#Menu a{
269clear:both;
270background-color:dimgray;
271position:relative;
272top:20px;
273width:70%;
274height:50px;
275margin-bottom:-20px;
276white-space:nowrap;
277display:none;
278}
279
280#Block2{
281display:none;
282}
283#Block3{
284  display:none;
285}
286
287#Block4{
288  display:none;
289}
290
291#Block5{
292  display:none;
293}
294
295#Categori{
296display:none;
297}
298
299#CategoriMenu{
300  display:none;
301
302}
303#CategoriMenu1{
304  display:none;
305}
306#MainContent{
307  display:none;
308}
309
310#ProfileContent{
311  display:none;
312}
313
314}
315

以上がコードとなります。
実現したい事としましては
レスポンシブデザインのみボーダーを全て領域毎消し飛ばしたく思います。

目的を実現すべく
アドバイスの方を頂けたらと思います。

よろしくお願いいたします。

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

回答2件

ベストアンサー

これでいけると思います。

css
1@media screen and (max-width: 1200px) {
2	.ProfileContent{
3		border-left: 0;
4	}
5}

あと一点、コードがインデントや空行で非常に見づらいのである程度整理して掲載したほうがいいですね。

投稿2016/11/09 10:09

gin

総合スコア2722

Susanoo2442

2016/11/09 12:07

回答ありがとうございます！ gin様がおっしゃられた通り classとidの違いでした！解決致しました！ありがとうございました！

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

HTML
1<!-- ここまで --></span>

これが不要な気がします。出力されたHTML（ブラウザで「ページのソースを表示」）を確認して、要素がきちんと終了タグの数があっているかや "" の閉じ忘れとかを確認してみてください。

投稿2016/11/09 10:10

kei344

総合スコア69407

Susanoo2442

2016/11/09 11:09

回答ありがとうございます。もう一点お聞きしたいのですが現在、PC用とスマホ用でスタイルシートを分岐して処理していますが分岐させる際にPC側のスタイルシート当然ながらスタイルが当たっていたのですがスマホ側のスタイルシートまでもがスタイルを全く記述していないのにスタイルが最初から当たっている状態でした。イメージとしてはPC側のスタイルがスマホ側のスタイルにほぼ全て当たっている感じです。ですので、今一度スマホ側のスタイルを最初から当て直したいのですがスマホだけ全くスタイルが当たっていない状態にするにはどうしたらいいのでしょうか？？よろしくお願いいたします。

kei344

2016/11/09 11:17

「PC用」「スマホ用」はどの部分のことでしょうか。「@media screen and (max-width: 1200px) 」がスマホ用と考えておられるのでしょうか。

Susanoo2442

2016/11/09 12:06

@media screen and (max-widht: 1200px)に書いている処理です！

kei344

2016/11/09 12:26

@media screen and (max-widht: 1200px) {}に囲われていない部分は通常のCSSと同じくスタイルに使用されます。囲われている部分についてのみ画面幅1200pxまでスタイルに使用されます。【メディアクエリの書き方「レスポンシブwebデザイン導入方法」】 http://webuma.net/media-queries 【レスポンシブサイト作成時、実践ですぐ使えるようにメディアクエリまとめ】 http://web-dsn.com/css/mediaquery/

Susanoo2442

2016/11/09 12:36

URLありがとうございます！もっと学んでおきます！ありがとうございました！

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

あなたの回答