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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1109閲覧

border-bottomをメディアクエリ内のPCサイズの場合のみ消したい

mimicon

総合スコア26

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/12/29 09:01

編集2019/12/29 09:05

<span class="Year">内をborder-bottomでレスポンシブの場合のみ下線を引き、560px以上(タブレット、PC)では非表示にしたいので、
@media screen and (min-width: 560px) {
border-style: none;
}
このようにしたのですが、スマホサイズも下線が消えてしまいました。
何が問題なのか、教えていただけないでしょうか。

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>無題ドキュメント</title> 6 <meta name="viewport" content="width=device-width, maximum-scale=1.0" /> 7<link href="css/reset.css" rel="stylesheet" type="text/css"> 8<link href="css/style.css" rel="stylesheet" type="text/css"> 9</head> 10 11<body> 12<main> 13 <section id="career"> 14 <div class="wrapper"> 15 <h3 class="about">about</h3> 16 <dl class="career-flex"> 17 <dt class="career-flexInner-left"> 18 <span class="Year">2019年 19 <span class="term">(2019.1)</span></span> 20 </dt> 21 <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト 22 </dd> 23 </dl> 24 <dl class="career-flex"> 25 <dt class="career-flexInner-left">2019年 26 <span class="term">(2019.1〜2019.1)</span> 27 </dt> 28 <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span><p class="text"> 29 テキストテキストテキストテキストテキストテキスト</p> 30 </dd> 31 </dl> 32 <dl class="career-flex"> 33 <dt class="career-flexInner-left">2019年 34 <span class="term">(2019.1〜2019.1)</span> 35 </dt> 36 <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span><p class="text"> 37 テキストテキストテキストテキストテキストテキスト</p> 38 </dd> 39 </dl> 40 <dl class="career-flex"> 41 <dt class="career-flexInner-left">2019年 42 <span class="term">(2019.1〜2019.1)</span> 43 </dt> 44 <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span> 45 <p class="text"> 46 テキストテキストテキストテキストテキストテキスト 47 </p> 48 </dd> 49 </dl> 50 <dl class="career-flex"> 51 <dt class="career-flexInner-left">2019年 52 <span class="term">(2019.1〜2019.1)</span> 53 </dt> 54 <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span> 55 <p class="text"> 56 テキストテキストテキストテキストテキストテキスト<p class="text_2">テキストテキストテキストテキストテキストテキスト 57 </p> 58 </dd> 59 </dl> 60 <dl class="career-flex"> 61 <dt class="career-flexInner-left">2019年 62 <span class="term">(2019.1〜現在)</span></dt> 63 <dd class="career-flexInner-right"><span class="career-bold">テキストテキストテキストテキスト</span> 64 <p class="text"> 65 テキストテキストテキストテキスト </p> 66 <p class="text_2">テキストテキストテキストテキストテキストテキスト </p> 67 <p class="text"> 68 テキストテキストテキストテキストテキストテキスト</p> 69 70 </p> 71 </dd> 72 </dl> 73 </div> 74 </section> 75 </main> 76</body> 77</html> 78

css

1@charset "UTF-8"; 2/* CSS Document */ 3 4html { 5 font-size: 62.5%; 6} 7body { 8 font-family: 'Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; 9 background: #fafafa; 10} 11 12 13#career { 14 margin: 80px 0 160px; 15} 16 17h3 { 18 font-family: 'Futura'; 19 font-size: 54px; 20 letter-spacing: .3rem; 21 line-height: 1; 22 font-weight: normal; 23 text-align: center; 24 margin-bottom: 60px; 25} 26.about { 27 color: #e3a1a1; 28} 29.title-sub-page { 30 font-size: 16px; 31 letter-spacing: .2rem; 32 line-height: 34px; 33 margin-bottom: 60px; 34} 35 36.title-sub-page::before, 37.title-sub-page::after { 38 content: ''; 39 display: inline-block; 40 width: 15px; 41 height: 1px; 42 margin: 0 10px; 43 background-color: #333; 44 vertical-align: middle; 45} 46 47.skills-flexAll { 48 margin-top: 60px; 49} 50 51.career-flex { 52 position: relative; 53 max-width: 800px; 54 margin: 0 auto; 55} 56 57.career-flexInner-left { 58 font-size: 18px; 59} 60 61dl { 62 display: block; 63 margin-block-start: 1em; 64 margin-block-end: 1em; 65 margin-inline-start: 0px; 66 margin-inline-end: 0px; 67} 68 69.career-bold { 70 font-size: 16px; 71 font-weight: 500; 72 color: #333; 73} 74.text { 75 font-size: 1.2rem; 76 line-height: 3; 77} 78.text_2 { 79 font-size: 1.2rem; 80 line-height: 1; 81} 82 83.term { 84 font-size: 1.0rem; 85} 86.Year { 87 border-bottom: solid 3px #e3a1a1; 88} 89/*=============================================== 90560px以上 91===============================================*/ 92@media screen and (min-width: 560px) { 93#career { 94 margin: 80px 0 160px; 95} 96 97h3 { 98 font-family: 'Futura'; 99 font-size: 54px; 100 letter-spacing: .3rem; 101 line-height: 1; 102 font-weight: normal; 103 text-align: center; 104 margin-bottom: 60px; 105} 106.about { 107 color: #e3a1a1; 108} 109.title-sub-page { 110 font-size: 16px; 111 letter-spacing: .2rem; 112 line-height: 34px; 113 margin-bottom: 60px; 114} 115 116.title-sub-page::before, 117.title-sub-page::after { 118 content: ''; 119 display: inline-block; 120 width: 15px; 121 height: 1px; 122 margin: 0 10px; 123 background-color: #333; 124 vertical-align: middle; 125} 126 127.skills-flexAll { 128 margin-top: 60px; 129} 130 131dl { 132 display: block; 133 margin-block-start: 1em; 134 margin-block-end: 1em; 135 margin-inline-start: 0px; 136 margin-inline-end: 0px; 137} 138 139.career-bold { 140 font-size: 16px; 141 font-weight: 500; 142 color: #333; 143} 144.text { 145 font-size: 1.2rem; 146 line-height: 3; 147} 148.text_2 { 149 font-size: 1.2rem; 150 line-height: 1; 151} 152 153.term { 154 font-size: 1.0rem; 155 margin-top: 3px; 156 display: block; 157} 158.career-flex { 159 display: flex; 160 border-left: none; 161 padding-left: 0; 162 padding-top: 0; 163} 164 165.career-flexInner-left { 166 width: 20%; 167 padding-top: 30px; 168 text-align: center; 169} 170 171.career-flexInner-right { 172 width: 80%; 173 border-left: 2px solid #ddd; 174 padding-left: 8%; 175 padding-top: 30px; 176 position: relative; 177 font-size: 15px; 178} 179 180.career-flexInner-right::before { 181 content: ''; 182 display: block; 183 width: 15px; 184 height: 15px; 185 border-radius: 50%; 186 background: #e3a1a1; 187 position: absolute; 188 left: -8px; 189} 190} 191 192.br-sp,p.works-item-memo-sp { 193 display: none; 194} 195.Year { 196 border-style: none; 197} 198 199} 200 201/*=============================================== 202960px以上 203===============================================*/ 204@media screen and (min-width: 960px){ 205} 206 207

css

1@charset "UTF-8"; 2/* http://meyerweb.com/eric/tools/css/reset/ 3 v2.0 | 20110126 4 License: none (public domain) 5*/ 6 7html, 8body, 9div, 10span, 11applet, 12object, 13iframe, 14h1, 15h2, 16h3, 17h4, 18h5, 19h6, 20p, 21blockquote, 22pre, 23a, 24abbr, 25acronym, 26address, 27big, 28cite, 29code, 30del, 31dfn, 32em, 33img, 34ins, 35kbd, 36q, 37s, 38samp, 39small, 40strike, 41strong, 42sub, 43sup, 44tt, 45var, 46b, 47u, 48i, 49center, 50dl, 51dt, 52dd, 53ol, 54ul, 55li, 56fieldset, 57form, 58label, 59legend, 60table, 61caption, 62tbody, 63tfoot, 64thead, 65tr, 66th, 67td, 68article, 69aside, 70canvas, 71details, 72embed, 73figure, 74figcaption, 75footer, 76header, 77hgroup, 78menu, 79nav, 80output, 81ruby, 82section, 83summary, 84time, 85mark, 86audio, 87video { 88 margin: 0; 89 padding: 0; 90 border: 0; 91 font-size: 100%; 92 font: inherit; 93} 94/* HTML5 display-role reset for older browsers */ 95 96article, 97aside, 98details, 99figcaption, 100figure, 101footer, 102header, 103hgroup, 104menu, 105nav, 106section { 107 display: block; 108} 109body { 110 line-height: 1; 111} 112ol, 113ul { 114 list-style: none; 115} 116blockquote, 117q { 118 quotes: none; 119} 120blockquote:before, 121blockquote:after, 122q:before, 123q:after { 124 content: ''; 125 content: none; 126} 127table { 128 border-collapse: collapse; 129 border-spacing: 0; 130}/* CSS Document */ 131 132

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatena19

2019/12/29 09:10

実際のHTMLとCSSを提示してください。
mimicon

2019/12/29 09:13

まだサイトの作成途中なので、ナビゲーションなどはまだなく、ただ実際の文章をテキストテキストに変更しただけであとはそのままで削っていないです。質問と違う返事をしているようでしたらすみません。
guest

回答1

0

ベストアンサー

}が余分なのでそれ以降の設定がメディアクエリの外に出てしまってます。

css

1/*前略*/ 2 3@media screen and (min-width: 560px) { 4 5/*中略*/ 6 7 left: -8px; 8} 9} /*この括弧を削除してください*/ 10 11.br-sp,p.works-item-memo-sp { 12 display: none; 13} 14.Year { 15 border-style: none; 16} 17 18}

インデントをきちんとつけると間違いを見つけやすいです。
自動でインデントを付けてくれるエディターを使うといいでしょう。
私はvsCodeを使ってます。

投稿2019/12/29 09:36

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mimicon

2019/12/29 09:41

回答の通り、}を削除しましたところ思い通りに反映されました。 仰る通りですね。vsCode調べてみます。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問