🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

3158閲覧

はてなブログのテーブル(表)を中央に持ってきたい。

menbou14

総合スコア17

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/10/25 05:21

編集2019/10/25 05:47

はてなブログの表なんですが、中央に寄せたいのに寄りません。
URL:https://www.menbouyuzu.net/entry/Vipera
対象ブラウザは、クロームでバージョン77です。

HTML

1<p>まず、ザ・ヴァイパー、グループとしてのプロフィールを見てみましょう。</p> 2<center> 3<table> 4<thead> 5<tr> 6<th colspan="2">Vipera(ヴァイパー)</th> 7</tr> 8</thead> 9<tbody> 10<tr> 11<th rowspan="4">メンバー</th> 12<td>YUYA</td> 13</tr> 14<tr> 15<td>JIN</td> 16</tr> 17<tr> 18<td>HARUTSUKI</td> 19</tr> 20<tr> 21<td>ICHIRU</td> 22</tr> 23<tr> 24<th>スペシャルメンバー</th> 25<td>MIRAI</td> 26</tr> 27<tr> 28<th>メジャーデビュー</th> 29<td>2017年</td> 30</tr> 31<tr> 32<th>所属</th> 33<td>日本クラウン</td> 34</tr> 35<tr> 36<th>賞</th> 37<td>平成29年度クラウンヒット賞「新人賞」</td> 38</tr> 39<tr> 40<th>備考</th> 41<td>男装をした女性である</td> 42</tr> 43</tbody> 44</table> 45</center> 46

とやるのですができません。

良く分からず、CSSなども設定しましたので、リセットがかかっているのかもしれません。

CSS

1/* <system section="theme" selected="17680117126967939259"> */ 2@import url("https://blog.hatena.ne.jp/-/theme/17680117126967939259.css"); 3/* </system> */ 4 5/* 日付タグの色 */ 6.entry-header .date a { 7 color: #000; 8 background:#FFEB3B; 9} 10/* ヘッダー背景の色 */ 11#blog-title{ 12background:#00BCD4; 13} 14/* ヘッダーテキストの色 */ 15#title a { 16 color: #FFEB3B; 17} 18/* サイドメニューの色 */ 19.hatena-module-title { 20 border-bottom: 1px solid #00BCD4; 21} 22.hatena-module-title:before { 23 border-top: 6px solid #00BCD4; 24} 25/* シェアボタンの色 */ 26.si-share-count { 27color:#fff; 28} 29a.hatena-bookmark-buttom{ 30background-color:#00A4DE; 31} 32.blogicon-bookmark:before{ 33color:#fff; 34} 35.si-share-item a{ 36background-color:#00A4DE; 37} 38a.fb{ 39background-color:#4267B2; 40} 41.fa-facebook-square:before{ 42color:#fff; 43} 44a.tw{ 45background-color:#28A9E0; 46} 47.fa-twitter:before{ 48color:#fff; 49} 50a.po{ 51background-color:#F13D58; 52} 53.fa-get-pocket:before{ 54color:#fff; 55} 56.si-share-item a:hover{ 57background-color:#2cc8ff; 58} 59a.fb:hover{ 60background-color:#7591cc; 61} 62a.tw:hover{ 63background-color:#6bc4ea; 64} 65a.po:hover{ 66background-color:#f68495; 67} 68/* 文字の大きさ */ 69body{ 70font-size:17px; 71} 72/* ヘッダーサイズ調整 */ 73.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner{ 74 background-size:auto; 75 background-position:0 0; 76 padding-top:188px; 77} 78 79/* BOX(黄色)*/ 80.box { 81 position: relative; 82 margin: 2em 0; 83 padding: 0.5em 1em; 84 border: solid 3px #ffa500; 85 border-radius: 0 8px 8px 8px; 86} 87.box .box-title { 88 position: absolute; 89 display: inline-block; 90 top: -27px; 91 left: -3px; 92 padding: 0 9px; 93 height: 25px; 94 line-height: 25px; 95 vertical-align: middle; 96 font-size: 17px; 97 background: #ffa500; 98 color: #ffffff; 99 font-weight: bold; 100 border-radius: 5px 5px 0 0; 101} 102.box p { 103 margin: 0; 104 padding: 0; 105} 106 107.box ul li { 108 line-height: 1.5; 109 padding: 0.5em 10px; 110 list-style-type: none!important; 111} 112 113.box ul li:before {/*疑似要素*/ 114 font-family: "FontAwesome"; 115 content: "\f138";/*アイコンの種類*/ 116 position: absolute; 117 left : 2em;/*左端からのアイコンまでの距離*/ 118 color: #ffa500;/*アイコン色*/ 119} 120/* BOX2(青色)*/ 121.box2 { 122 position: relative; 123 margin: 2em 0; 124 padding: 0.5em 1em; 125 border: solid 3px #40e0d0; 126 border-radius: 0 8px 8px 8px; 127} 128.box2 .box2-title { 129 position: absolute; 130 display: inline-block; 131 top: -27px; 132 left: -3px; 133 padding: 0 9px; 134 height: 25px; 135 line-height: 25px; 136 vertical-align: middle; 137 font-size: 17px; 138 background: #40e0d0; 139 color: #ffffff; 140 font-weight: bold; 141 border-radius: 5px 5px 0 0; 142} 143.box2 p { 144 margin: 0; 145 padding: 0; 146} 147 148.box2 ul li { 149 line-height: 1.5; 150 padding: 0.5em 10px; 151 list-style-type: none!important; 152} 153 154.box2 ul li:before {/*疑似要素*/ 155 font-family: "FontAwesome"; 156 content: "\f138";/*アイコンの種類*/ 157 position: absolute; 158 left : 2em;/*左端からのアイコンまでの距離*/ 159 color: #40e0d0;/*アイコン色*/ 160} 161 162.box15 { 163 padding: 0.2em 0.5em; 164 margin: 2em 0; 165 color: #565656; 166 background: #ffeaea; 167 box-shadow: 0px 0px 0px 10px #ffeaea; 168 border: dashed 2px #ffc3c3; 169 border-radius: 8px; 170} 171.box15 p { 172 margin: 0; 173 padding: 0; 174} 175 176/*写真を中央に表示*/ 177.hatena-fotolife, .http-image { 178display: block; 179margin: 0px auto; 180} 181 182/* 2018-10-22*/ 183<!-- メニューバー --> 184#menubar{ 185width:100%; 186} 187 188#menubar ul{ 189display:table; 190width:100%; 191margin: 20; 192padding: 0; 193background-color: #FFFFFF; } 194#menubar li{ 195display: table-cell; 196width:20%; 197padding:0; 198background-color: #203556; } 199#menubar li a{ 200display: block; 201margin:0 auto; 202padding:5px; 203border: 1px solid #FFFFFF; 204text-decoration: none; 205color: #FFFFFF; 206text-align: center; 207font-size: 18px; } 208#menubar li a:hover{ 209background-color: #406BAC; } 210 211/* 2018-10-22*/ 212 213 214/* 見出しのリセット */ 215.entry-content h3, 216.entry-content h3::before, 217.entry-content h3::after { 218background: none; 219border: none; 220border-radius: 0; 221} 222 223.entry-content h3 { 224padding: 12px; 225color: #333; 226border-left: 4px solid; 227border-bottom: 1px solid; 228border-color: #4169e1; 229background-color: #b0c4de; 230} 231 232.table-of-contents{ 233padding: 20px 10px 20px 40px; 234border-radius: 5px; 235background: #ccffcc; 236} 237 238.table-of-contents { 239 padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */ 240 font-size: 100%; /* 文字サイズ */ 241 border:solid 2px #7DB4EC; /* 線の種類と色 */ 242 background:#f0ffff; /* 背景 */ 243 border-radius:8px;/* 数字が大きいほど丸くなる */ 244} 245 246

分かる方、どうか教えて下さい。

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

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

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

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

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

m.ts10806

2019/10/25 05:24

対象のブラウザをご提示ください。 またcenterタグ自体は既に削除されている機能かと思います(ブラウザが対応してくれてるかもしれませんが推奨されません)
m.ts10806

2019/10/25 05:24

HTMLも再現可能な、なるべく全体わかるようにコード提示ください
menbou14

2019/10/25 05:47

分かりました。 修正しました。 ありがとうございます!
guest

回答1

0

ベストアンサー

まずtable要素のdisplayをblockにしているところを外す。(display:table)でもいい。

css

1.entry-content table { 2 border-collapse: collapse; 3 border-spacing: 0; 4 border-bottom: 1em; 5 margin-bottom: 1em; 6 width: auto; 7 overflow: 100%; 8 /* display: block; */ //ここを消す 9 font-size: 12.8px; 10 font-size: .8rem; 11}

幅をコンテンツに応じた大きさ(display:block)の状態にしたいなら、widthを指定してあげる

css

1.entry-content table { 2 border-collapse: collapse; 3 border-spacing: 0; 4 border-bottom: 1em; 5 margin-bottom: 1em; 6 width: auto; // <- autoに変更 7 overflow: auto; 8 font-size: 12.8px; 9 font-size: .8rem; 10}

あと、YUYAさんのプロフィールテーブルの名前のところがYUKAになっています。ご報告までに

投稿2019/10/25 05:47

zushi0905

総合スコア683

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

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

menbou14

2019/10/25 05:57

お答え、ありがとうございます。 でも、.entry-content table なんてどこにもないんですが・・・。
menbou14

2019/10/25 05:57

あと、YUYAの間違い指摘してくれて、ありがとうございます!
zushi0905

2019/10/25 05:59

記載されているcssの一番上でimportしている17680117126967939259.cssの中に記載されていると思います。はてなブログの仕様はわかりませんが、こちらのcssは編集可能ですか?
menbou14

2019/10/25 06:15

分かりました! いじれないことはないのですが、17680117126967939259.cssがそうとう長すぎて、見た目的に今後わけが分からなくなりそうです。 .entry-content table を上書きしてやるような方法はありませんか? お手数おかけして、本当にすみません。
zushi0905

2019/10/25 06:22 編集

minファイルしか見れない感じですかね。下のcssをimport文より後に記載してください。質問に記載されているcssの一番下に追加すればいいと思います。 あとはwidthをautoと100%など適当に調整してください。 .entry-content table { border-collapse: collapse; border-spacing: 0; border-bottom: 1em; margin-bottom: 1em; width: 100%; overflow: 100%; display: table; font-size: 12.8px; font-size: .8rem; }
menbou14

2019/10/25 07:26

できました! ありがとうございます! 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問