Q&A
>リセットCSSが効いているようで
リセットCSSを外せば想定通り動くのでしょうか。
文字をcellの中心に移動させたいのですが、リセットCSSが効いているようで、移動できません。
下記の「vertical-align: baseline;」を「vertical-align: middle;」に変更したいです。
初歩的なことで大変申し訳ございませんが、ご教授のほど宜しくお願い致します。
<リセットCSS>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <!-- Bootstrap CSS --> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 9 <!-- CSSの読み込み --> 10 <link rel="stylesheet" href="style.css"> 11 <!-- リセットCSS --> 12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> 13 <!-- fontAwesameから画像を読みこむ --> 14 <script src="https://kit.fontawesome.com/849887fe13.js" crossorigin="anonymous"></script> 15 16 <title>Norton</title> 17 </head> 18 <body> 19 <div class="container"> 20 <header class="header"> 21 22〜 23 24 <main> 25 <table> 26 <!-- tableの４番目を赤文字に指定する。 --> 27 <tr> 28 <th width="150" class="table-blank"> 29 </th> 30 <th width="200" class="table-blank"> 31 </th> 32 <th width="200" class="table-blank"> 33 </th> 34 <th width="200" height="20"> 35 </th> 36 <th width="200" class="table-blank"> 37 </th> 38 </tr> 39 <!-- head部分を指定する。 --> 40 <tr> 41 <th width="150"> 42 </th> 43 <th class="head-th" width="200" height="90"> 44 <p class="head-p1">ノートン 360<br> 45 スタンダード</p> 46 <p class="head-p2">お求めやすいマルチデバイス<br> 47 エントリーモデル</p> 48 <a href="" class="btn btn--white">詳細はこちら</a> 49 </th> 50 <th class="head-th" width="200" height="90"> 51 <p class="head-p1">ノートン 360<br> 52 スタンダード</p> 53 <p class="head-p2">お求めやすいマルチデバイス<br> 54 2台モデル</p> 55 <a href="" class="btn btn--white">詳細はこちら</a> 56 </th> 57 </th> 58 <th class="head-th-4" width="200" height="90"> 59 <p class="head-p1-4">ノートン 360<br> 60 デラックス</p> 61 <p class="head-p2">おすすめ！これ1本で安心。<br> 62 マルチデバイス 3台モデル</p> 63 <a href="" class="btn btn--white">詳細はこちら</a> 64 </th> 65 </th> 66 <th class="head-th" width="200" height="90"> 67 <p class="head-p1">ノートン 360<br> 68 プレミアム</p> 69 <p class="head-p2">ファミリー向け。<br> 70 マルチデバイス 5台モデル</p> 71 <a href="" class="btn btn--white">詳細はこちら</a> 72 </th> 73 </th> 74 </tr> 75 <!-- ２行目を指定する。 --> 76 <tr height="70"> 77 <td>利用可能台数</td><td>1台</td><td>2台</td><td>3台</td><td>4台</td> 78 </tr> 79 <!-- ３行目を指定する。 --> 80 <tr> 81 <td>対応OS</td> 82 <td><span><img src="images/icon_win10.png" alt=""><img src="images/icon_mac.png" alt=""><img src="images/icon_android.png" alt=""><img src="images/icon_ios.png" alt=""></span></td> 83 <td><span><img src="images/icon_win10.png" alt=""><img src="images/icon_mac.png" alt=""><img src="images/icon_android.png" alt=""><img src="images/icon_ios.png" alt=""></span></td> 84 <td><span><img src="images/icon_win10.png" alt=""><img src="images/icon_mac.png" alt=""><img src="images/icon_android.png" alt=""><img src="images/icon_ios.png" alt=""></span></td> 85 <td><span><img src="images/icon_win10.png" alt=""><img src="images/icon_mac.png" alt=""><img src="images/icon_android.png" alt=""><img src="images/icon_ios.png" alt=""></span></td> 86 </tr> 87 <!-- ４行目を指定する。 --> 88 <tr> 89 <td>1年版</td> 90 <td> 91 <p class="product-single"><a href="">詳細はこちら</a></p> 92 <p class="product-price-taxout">4,280<span class="product-yen">円(税抜)</span></p> 93 <p class="product-price-taxin">税込価格 4,708円</p> 94 <button type="button" class="btn btn-success text-white product-btn">カートに入れる</button> 95 </td> 96 <td> 97 <p class="product-single"><a href="">詳細はこちら</a></p> 98 <p class="product-price-taxout">5,480<span class="product-yen">円(税抜)</span></p> 99 <p class="product-price-taxin">税込価格 6,028円</p> 100 <button type="button" class="btn btn-success text-white product-btn">カートに入れる</button> 101 </td> 102 <td> 103 <p class="product-single"><a href="">詳細はこちら</a></p> 104 <p class="product-price-taxout">6,980<span class="product-yen">円(税抜)</span></p> 105 <p class="product-price-taxin">税込価格 7,678円</p> 106 <button type="button" class="btn btn-success text-white product-btn">カートに入れる</button> 107 </td> 108 <td> 109 <p class="product-single"><a href="">詳細はこちら</a></p> 110 <p class="product-price-taxout">7,480<span class="product-yen">円(税抜)</span></p> 111 <p class="product-price-taxin">税込価格 8,228円</p> 112 <button type="button" class="btn btn-success text-white product-btn">カートに入れる</button> 113 </td> 114 </tr> 115 <!-- ５行目を指定する。 --> 116 <tr> 117 <td>2年版</td> 118 <td>-</td> 119 <td>-</td> 120 <td> 121 <p class="product-price-taxout2">11,880<span class="product-yen">円(税抜)</span></p> 122 <p class="product-price-taxin2">税込価格 13,068円</p> 123 <p><a href="" class="cartin">カートに入れる</a></p> 124 </td> 125 <td> 126 <p class="product-price-taxout2">14,280<span class="product-yen">円(税抜)</span></p> 127 <p class="product-price-taxin2">税込価格 15,708円</p> 128 <p><a href="" class="cartin">カートに入れる</a></p> 129 </td> 130 </tr> 131 <!-- ６行目を指定する。 --> 132 <tr> 133 <td class="noborder">3年版</td> 134 <td class="noborder"> 135 <p>-</p> 136 </td> 137 <td class="noborder"> 138 <p>-</p> 139 </td> 140 <!-- ７行目を指定する。 --> 141 <td class="noborder"> 142 <p class="product-price-taxout2 taxout3">13,080<span class="product-yen">円(税抜)</span></p> 143 <p class="product-price-taxin2">税込価格 14,388円</p> 144 <button type="button" class="btn btn-success text-white product-btn">カートに入れる</button> 145 </td> 146 <td class="noborder"> 147 <p class="product-price-taxout2 taxout3">14,480<span class="product-yen">円(税抜)</span></p> 148 <p class="product-price-taxin2">税込価格 15,928円</p> 149 <button type="button" class="btn btn-success text-white product-btn">カートに入れる</button> 150 </td> 151 </tr> 152 <tr><td class="noborder yen-per-month">(1台1か月あたり目安)</td><td class="noborder yen-per-month">(332円※1)</td><td class="noborder yen-per-month">(228円※1)</td><td class="noborder yen-per-month">(121円※1)</td><td class="noborder yen-per-month">(80円※1)</td></tr> 153 <tr> 154 <td colspan="5" class="table-middle-title text-left">デバイスとデータの保護</td> 155 </tr> 156 </table> 157 </main> 158 159〜 160 161 </body> 162</html>
CSS
1 2/* main */ 3main { 4 margin-top: 30px; 5} 6table { 7 text-align: center; 8 vertical-align: middle; 9 background: #FFF7D6 10} 11
現状の状態
理想的な状態
リセットCSSを外せば、想定通りの動きになるようです。
はい。リセットCSSは効いており、
リセットCSSを外せば想定通り動きます。
ではひとまず「効いているようで」の部分をきちんと「確かめたこと」として
しっかり「リセットCSSを外せば想定通りのレイアウトになる」ことを記載してもらえればと。
ただ
ここに全角スペース入ってるので自身で書いたコードも想定通り動くとは思えませんが・・・
→ background: #FFF7D6
承知しました。
はい。全角スペースが入っているようです。
修正しました。
欲しい方向性と合致しないかもしれませんが、回答してます。
回答2件
0
ベストアンサー
直接のアドバイスではないですが、CSSは基本あと勝ちなので、
同じ指定があればあとの指定が有効となります。
html
1<div></div>
css
1div { 2 height:30px; 3 width:120px; 4 background: #FFF7D6 5} 6 7div { 8 width:20px; 9 background: #CCC 10}
今の指定だと、
Bootstrap
↓
自分のCSS
↓
リセットCSS
という順番になっており、リセットCSSが最後に書かれています。
なので、せっかくBootstrapと自分のCSSでセットしたとしても
リセットCSSで上書きされてしまっている指定も少なくないのではと思います。
もっと言えば、
Bootstrapをメインフレームとして使うのなら自前でリセットCSS持ってくる必要ってほとんど必要ないのではと思います。
確かbootstrap-reboot.cssというのが元々含まれているためです。
Normalize.cssを元にBootstrap用に改修されたものらしいので、むしろリセットCSSより有用な場面もあるものと思います。
投稿2021/02/21 08:49
総合スコア80875
回答をいただき気付きましたが、Bootstrapにbootstrap-reboot.cssが含まれていることを忘れておりました。おっしゃる通りで、今回はリセットCSS不要で良いかもしれません。
＞Bootstrapにbootstrap-reboot.cssが含まれていることを忘れておりました
私自身も単に「Bootstrap使うときってリセットCSS使って無かったよね。なぜだろう」という疑問から調べて知ったので、最初から認識ある人の方が少ないと思います。
リセットCSSとは違って、ある程度デフォルトの設定が残ってますしね。
今回の問題点に「CSSの読み込ませ順」があるのは間違いないです。
0
m.ts10806様より回答をいただき気付きましたが、Bootstrapにbootstrap-reboot.cssが含まれていることを忘れておりました。おっしゃる通りで、今回はリセットCSS不要で良いかもしれません。
本件、リセットCSSの一部の設定を変更したい【文字をcellの中心に移動させたい】について解決できていませんが、私自身作業も問題なく進んでいる為、一旦クローズとさせていただきます。
ご回答ありがとうございました。
投稿2021/02/23 04:52
総合スコア8
あなたの回答
tips
プレビュー
