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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

755閲覧

cssのテーブルで同一セルの文字列内の文字のサイズを変更する方法をご教授願えますか。

sembokulove

総合スコア83

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2024/06/09 12:06

編集2024/06/10 11:20

イメージ説明
↑cssで文字サイズを変えるのに失敗している。回答が今日中に来ない場合、マルチポストもあり得ます。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Station Board</title> <style> table { background-color: #cdefff; width: 640px; margin: 0 auto; border-collapse: collapse; } td { background-color: #00e2cf; vertical-align: middle; border: 1px solid #333; } .top-station-kan { font-size: 48pt; font-weight: 700; letter-spacing: 12pt; text-align: center; white-space: nowrap; display: flex; justify-content: center; align-items: stretch; height: 80px; margin-left: 65pt; } .top-station-hiragana-roma { font-size: 14pt; font-weight: 700; letter-spacing: 1pt; text-align: center; white-space: nowrap; display: flex; justify-content: center; align-items: stretch; height: 40px; margin-left: 60pt; /* .top-station-hiragana の margin-left を修正 */ } .blank { margin:0px 10pt; } .arrow-left, .arrow-left-3, .not-arrow { width: 2.5pt; text-align: left; vertical-align: middle; display: inline-block; box-sizing: content-box; } .arrow-right, .arrow-right-2, .not-arrow-3 { width: 2.5pt; text-align: right; vertical-align: middle; display: inline-block; box-sizing: content-box; } .next-hiragana, .previous-hiragana, .next-hiragana-2, .previous-hiragana-2, .next-hiragana-3, .previous-hiragana-3 { font-size: 14pt; } .next-roma, .previous-roma, .next-roma-2, .previous-roma-2 { letter-spacing: 1.5pt; } .next-hiragana, .next-roma, .next-hiragana-2, .next-roma-2, .next-hiragana-3, .next-roma-3 { text-align: left; display: inline-block; padding-left: 0; padding-right: 60pt; width: 0; white-space: nowrap; box-sizing: content-box; } .next-hiragana, .next-roma, .next-hiragana-3, .next-roma-3 { letter-spacing: 4pt ; } .next-hiragana, .next-roma, { letter-spacing: 4pt ; } .previous-hiragana, .previous-roma, .previous-hiragana-2, .previous-roma-2, .previous-hiragana-3, .previous-roma-3 { text-align: right; display: inline-block; padding-left: 0; padding-right: 47.5pt; width: 0; white-space: nowrap; box-sizing: content-box; } .previous-hiragana, .previous-roma, .previous-hiragana-2, .previous-roma-2 { letter-spacing: 4pt ; } </style> </head> <body> <select id="tableSelect" onchange="changeTable()"> <option value="table1">Table 1</option> <option value="table2">Table 2</option> <option value="table3">Table 3</option> </select> <table id="table1"> <tbody> <tr> <td colspan="4"> <div class="top-station-kan">森ノ宮</div> </td> </tr> <tr> <td colspan="4"> <div class="top-station-hiragana">もりのみや<span class="blank"></span></div><div class="top-station-roma">Morinomiya</div> </td> </tr> <tr> <td> <span class="arrow-left">←</span> </td> <td class="next"> <span class="next-hiragana">おおさかじょうこうえん</span><br><span class="next-roma">Ōsakajōkōen</span> </td> <td class="previous"> <span class="previous-hiragana">おおさかじょうこうえん</span><br><span class="previous-roma">Ōsakajōkōen</span> </td> <td> <span class="arrow-right">→</span> </td> </tr> </tbody> </table> <table id="table2" style="display: none;"> <tbody> <tr> <td colspan="4"> <div class="top-station-kan">森ノ宮</div> </td> </tr> <tr> <td colspan="4"> <div class="top-station-hiragana-roma">もりのみや<span class="blank"></span>Morinomiya</div> </td> </tr> <tr> <td> <span class="not-arrow"></span> </td> <td class="next-2"> <span class="next-hiragana-2">おおさかじょうこうえん</span><br><span class="next-roma-2">Ōsakajōkōen</span> </td> <td class="previous-2"> <span class="previous-hiragana-2">おおさかじょうこうえん</span><br><span class="previous-roma-2">Ōsakajōkōen</span> </td> <td> <span class="arrow-right-2">→</span> </td> </tr> </tbody> </table>

発生している問題・分からないこと

cssのテーブルで同一セルの文字列内の文字のサイズを変更する方際に、上下方向がずれたり、文字が左揃えで、大きさが初期設定の大きさになったりします。

該当のソースコード

css

1.top-station-hiragana { 2 font-size: 14pt; 3 font-weight: 700; 4 letter-spacing: 1pt; 5 text-align: center; 6 white-space: nowrap; 7 display: flex; 8 justify-content: center; 9 align-items: stretch; 10 height: 40px; 11 margin-left: 60pt; /* .top-station-hiragana の margin-left を修正 */ 12}

css

1.top-station-roma { 2 font-size: 14pt; 3 font-weight: 700; 4 letter-spacing: 1pt; 5 text-align: center; 6 white-space: nowrap; 7 display: flex; 8 justify-content: center; 9 align-items: stretch; 10 height: 40px; 11 margin-left: 60pt; /* .top-station-hiragana の margin-left を修正 */ 12}

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

チャットgptで文字の大きさ変更を調べてみましたが、的外れな回答ばかりでした。

補足

特になし

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

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

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

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

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

maisumakun

2024/06/10 01:08

画像などで、どこがどうなっているのをどうしたいかをご提示下さい。
sembokulove

2024/06/10 10:57

コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。
sembokulove

2024/06/10 10:58

もし、今日中のご回答がいただけない場合、マルチポストは辞さないです。
sembokulove

2024/06/10 11:17

もういい。ここの回答者は答える気がないようですね。ヽ(`Д´)ノプンプン。
sembokulove

2024/06/10 11:17

もういい。ここの回答者は答える気がないようですね。ヽ(`Д´)ノプンプン。
maisumakun

2024/06/10 22:45

いま気づきました。 急ぎでやりたいのであれば、しかるべき相手に金を払って依頼したほうがいいです。
guest

回答1

0

自己解決

もういい。ここの回答者は答える気がないようですね。ヽ(`Д´)ノプンプン。

投稿2024/06/10 11:17

sembokulove

総合スコア83

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問