実現したいこと
<!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}
試したこと・調べたこと
上記の詳細・結果
チャットgptで文字の大きさ変更を調べてみましたが、的外れな回答ばかりでした。
補足
特になし
0 コメント