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

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

詳細はこちら
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

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

CSS

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

Q&A

解決済

1回答

1111閲覧

【Rails】表を作ったが、<thead>部分だけtext-alignが適用されない【HTML】【CSS】

tekeTECH

総合スコア8

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/12/01 11:15

カレンダーアプリを作っています。以下のように記述しましたが、<thead>の部分だけ画像のように中央に文字がきてくれません。また、日付の部分はど真ん中ではなくて、上部中央に配置したいです。コードのどこが間違っているでしょうか?よろしくお願いします。

イメージ説明

【関連コード】
index.html.erb

ruby

1<%= render "shared/header" %> #部分テンプレート呼び出し 2<div class="todo-countdown"> 3 カウントダウン表示 4</div> 5<table> 6 <thead> 7 <tr> 8 <th id="prev">&laquo;</th> 9 <th id="title" colspan="5">2020/05</th> 10 <th id="next">&raquo;</th> 11 </tr> 12 <tr> 13 <th>Sun</th> 14 <th>Mon</th> 15 <th>Tue</th> 16 <th>Wed</th> 17 <th>Thu</th> 18 <th>Fri</th> 19 <th>Sat</th> 20 </tr> 21 </thead> 22 <tbody> 23 <tr> 24 <td>1</td> 25 <td>1</td> 26 <td>1</td> 27 <td>1</td> 28 <td>1</td> 29 <td>1</td> 30 <td>1</td> 31 </tr> 32 <tr> 33 <td>1</td> 34 <td>1</td> 35 <td>1</td> 36 <td>1</td> 37 <td>1</td> 38 <td>1</td> 39 <td>1</td> 40 </tr> 41 <tr> 42 <td>1</td> 43 <td>1</td> 44 <td>1</td> 45 <td>1</td> 46 <td>1</td> 47 <td>1</td> 48 <td>1</td> 49 </tr> 50 <tr> 51 <td>1</td> 52 <td>1</td> 53 <td>1</td> 54 <td>1</td> 55 <td>1</td> 56 <td>1</td> 57 <td>1</td> 58 </tr> 59 </tbody> 60 <tfoot> 61 <tr> 62 <td id="today" colspan="7">Today</td> 63 </tr> 64 </tfoot> 65</table> 66<footer> 67 フッター部分 68</footer>

index.css

ruby

1body { 2 box-sizing: border-box; 3 height: 800px; 4 font-size: 20px; 5 text-align: center; 6} 7 8.top-content { 9 width: 100vw; 10 height: 100px; 11 display: flex; 12 align-items: center; 13 background-color: skyblue; 14} 15 16.main-title { 17 font-size: 30px; 18 height: 100%; 19} 20 21.title-content { 22 width: 70vw; 23 font-size: 20px; 24} 25 26.login-content { 27 width: 30vw; 28 height: 100%; 29 font-size: 20px; 30 display: flex; 31 justify-content: space-around; 32 align-items: center; 33 background-color: pink; 34} 35 36.user-box { 37 padding: 10px; 38 border: 2px solid white; 39} 40 41.todo-countdown { 42 background-color: lime; 43 height: 100px; 44} 45 46body { 47 font-family: 'Courier New', monospace; 48 font-size: 20px; 49} 50 51table { 52 height: calc(100% - 250px); 53 width: 100vw; 54 padding: 10px; 55 border-collapse: collapse; 56 border: 2px solid #eee; 57} 58 59thead, 60tfoot { 61 background: #eee; 62} 63 64th, 65td { 66 padding: 8px; 67} 68 69footer { 70 background-color: yellow; 71 line-height: 50px; 72}

reset.css

ruby

1/*! 2 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) 3 * http://cssreset.com 4 * Copyright 2012 Yahoo! Inc. All rights reserved. 5 * http://yuilibrary.com/license/ 6 */ 7/* 8 TODO will need to remove settings on HTML since we can't namespace it. 9 TODO with the prefix, should I group by selector or property for weight savings? 10*/ 11html{ 12 color:#000; 13 background:#FFF; 14} 15/* 16 TODO remove settings on BODY since we can't namespace it. 17*/ 18/* 19 TODO test putting a class on HEAD. 20 - Fails on FF. 21*/ 22body, 23div, 24dl, 25dt, 26dd, 27ul, 28ol, 29li, 30h1, 31h2, 32h3, 33h4, 34h5, 35h6, 36pre, 37code, 38form, 39fieldset, 40legend, 41input, 42textarea, 43p, 44blockquote, 45th, 46td { 47 margin:0; 48 padding:0; 49} 50table { 51 border-collapse:collapse; 52 border-spacing:0; 53} 54fieldset, 55img { 56 border:0; 57} 58/* 59 TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit... 60*/ 61address, 62caption, 63cite, 64code, 65dfn, 66em, 67strong, 68th, 69var { 70 font-style:normal; 71 font-weight:normal; 72} 73 74ol, 75ul { 76 list-style:none; 77} 78 79caption, 80th { 81 text-align:left; 82} 83h1, 84h2, 85h3, 86h4, 87h5, 88h6 { 89 font-size:100%; 90 font-weight:normal; 91} 92q:before, 93q:after { 94 content:''; 95} 96abbr, 97acronym { 98 border:0; 99 font-variant:normal; 100} 101/* to preserve line-height and selector appearance */ 102sup { 103 vertical-align:text-top; 104} 105sub { 106 vertical-align:text-bottom; 107} 108input, 109textarea, 110select { 111 font-family:inherit; 112 font-size:inherit; 113 font-weight:inherit; 114} 115/*to enable resizing for IE*/ 116input, 117textarea, 118select { 119 *font-size:100%; 120} 121/*because legend doesn't inherit in IE */ 122legend { 123 color:#000; 124} 125/* YUI CSS Detection Stamp */ 126#yui3-css-stamp.cssreset { display: none; }

【解決のために行ったこと】
・tableセレクター、theadセレクターにも「text-align: center;」を記述して検証。
・reset.cssのテーブルセレクタの記述をコメントアウトして検証。
・MDNのサイトを参考に、「margin: 0 auto;」を記述して検証。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
https://developer.mozilla.org/ja/docs/Web/HTML/Element/thead

【補足情報】
MDNのサイトを見ると、表要素にaline属性をつけるのは非推奨といった内容が見受けられます。何か良い方法はないでしょうか。よろしくお願い致します。

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

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

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

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

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

m.ts10806

2020/12/01 11:36

theadに対する指定は背景色しかないようですが。 何をどのようにやってみたのでしょうか。
tekeTECH

2020/12/01 12:59

質問ありがとうございます。CSSの「body」,「table」,「thead」,「th」セレクタ全てに「text-align: center;」の記述を試しました。全て上手くいかなかっので、コードには載せず、補足情報でいくつか紹介したつもりだったのですが、説明の仕方が至らなかった様で、申し訳ありません。結局reset,cssの記述を修正すると直りました。ありがとうございました。
m.ts10806

2020/12/01 13:33

できてないコードを提示されないことには「何もやってないけど問題だ」と騒いでいるような状態となりますし、「できない状況」が他者には再現できません。
tekeTECH

2020/12/02 13:41

ご指摘ありがとうございます。自分で調べたこと、試したこと、自分なりに考えた仮説検証なども合わせて分かりやすく伝えていけるよう、質問力磨きもしたいと思います。
guest

回答1

0

ベストアンサー

<thead>の部分だけ画像のように中央に文字がきてくれません。

reset.css 内に下記の設定がありますので、それが効いているようです。

css

1caption, 2th { 3 text-align:left; 4}

index.cssの方でreset.cssをリセットすればいいでしょう。

css

1th { 2 text-align: center; 3}

日付の部分はど真ん中ではなくて、上部中央に配置したいです。

index.cssに下記を追加すればいいでしょう。

css

1td { 2 vertical-align: top; 3}

投稿2020/12/01 11:39

hatena19

総合スコア34073

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

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

tekeTECH

2020/12/01 13:04

ありがとうございます。ご指摘の通り、reset.cssが効いていた様です。私もcssに記述すると上書きできるはずという認識だったのですが、hatena19 さんから説明頂いた方法(<thead>セレクタに「text-align: center;」と入力)では解消できませんでした。しかし、reset.cssを修正(thセレクタ削除)すると、無事思い通りの挙動が見られました。日付も上部中央に配置できました。reset.cssの上書きに対して、疑問は残りましたが、配置はしっかりできました。ありがとうございました。
hatena19

2020/12/01 13:20

index.css に th {text-align: center;} として効かない場合は、index.css reset.css の順で読み込まれていると考えられます。reset.css index.css という順に読み込むようにしましょう。 CSSの場合は後から読み込んだものが優先されますので、reset.css を後から読み込むようにすると、reset.css が優先されることになりますので使いづらいことになります。
tekeTECH

2020/12/01 22:27

度々、ありがとうございます。application.cssで、cssを読み込む記述を、 require reset.css require_self require_tree . とすると、reset.cssのthの記述に「text-align: left;」があっても上書きできる様になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問