電車の駅名表をhtmlと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>
        .stationBoard {
            display: grid;
            grid-template-columns: auto 1fr auto; /* autoに変更して矢印の位置を固定 */
            grid-template-rows: auto auto auto auto auto;
            text-align: center;
            margin: 20px;
            border: none;
            font-family: "Frutiger LT Pro","源暎モノゴ", sans-serif;
        }
        .stationBoard > div {
            padding: 7.5pt;
        }
        .lineColor {
            grid-column: 1 / span 3;
            height: 15pt;
        }
        #stationNameDisplay {
            grid-column: 1 / span 3;
            font-size: 80pt;
            font-weight: bold;
transform:scale(1.1,1);
letter-spacing:0.95em;
text-indent:1.1em;
        }
        #stationNameHiraganaRoman {
            grid-column: 1 / span 3;
            display: flex;
            justify-content: center;
            align-items: center; /* 縦方向の中央揃え */
            font-weight: bold;
transform:scale(1,1);
text-indent:0.6em;
position:relative;top:-40pt;
transform:scale(1.15,1);
        }

        #stationNameHiraganaDisplay{
            font-size: 28pt;
            letter-spacing:0em;
        }
        #stationNameRomanDisplay {
            font-size: 32pt;
            letter-spacing:0em;
            text-indent:0.2em;
        }
        #previousStationDisplay {
            grid-column: 1 / span 3;
            grid-row: 3;
            font-size: 15.5pt;
            text-align: left;
            padding-left: 15pt;
        }
        #nextStationDisplay {
            grid-column: 1 / span 3;
            grid-row: 3;
            font-size: 15.5pt;
            text-align: left;
        }
        #previousStationRomanDisplay {
            grid-column: 1 / span 3;
            grid-row: 5;
            font-size: 12pt;
            color: #777;
            text-align: left;
            padding-left: 15pt;
        }
        #nextStationRomanDisplay {
            grid-column: 1 / span 3;
            grid-row: 5;
            font-size: 12pt;
            color: #777;
            margin-left: auto;
            text-align: left;
        }
        #arrowDisplay {
            grid-column: 1 / span 3; /* 中央に固定 */
            grid-row: 4;
            font-size: 30px;
            margin-top: -50pt;
            display: flex;
            justify-content: space-between; /* 矢印を左右に配置 */
        }
        .arrow {
            font-size: 18pt;
            position:relative;top:57.5pt;
        }
        .container {
            display: flex;
            justify-content: space-between;
            padding: 0 15pt;
            grid-column: 1 / span 3; /* ⇐これを追加 */
        }
        .container > div {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* テキストを左寄せに配置 */
            display: inline-block;
        }
        .controls {
            text-align: center;
            margin-top: 15pt;
        }
    </style>
</head>
</div>
    <div id="stationBoard" class="stationBoard">
        <div id="stationNameDisplay">福崎</div>
        <div id="stationNameHiraganaRoman">
            <span id="stationNameHiraganaDisplay">ふくさき</span>
            <span id="stationNameRomanDisplay">Fukuskaki</span>
        </div>
        <div id="lineColorDisplay" class="lineColor"></div>
        <div id="arrowDisplay">
            <div id="leftArrow" class="arrow"></div>
            <div id="rightArrow" class="arrow"></div>
        </div>
        <div class="container">
            <div class="station">
                <div id="previousStationDisplay"></div>
                <div id="previousStationRomanDisplay"></div>
            </div>
            <div class="station">
                <div id="nextStationDisplay"></div>
                <div id="nextStationRomanDisplay"></div>
            </div>
        </div>
    </div>

    <script>
    </script>
</body>
</html>

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

いかんせん、文字のバランスがずれてしまいます。
播但線の駅をhtmlとcssで再現しようと思っているのですが、
2文字と3文字で当駅表示の文字の間隔が違うことはわかっています。
ので、3文字に関しては、あとで訂正が効くので、後回しにしております。
例えば、香呂（こうろ）をやろうとすると、福崎（ふくさき）のひらがなのきが福の字の田んぼの下にきが来てしまい、
逆をすると、こうろのうの先端が香の字の日の下に来なくなります。
また、ほかを動かそうとすると、別なところでバランスが崩れてしまいます。
結論から言うと、無理数なのでしょうか。
京口駅の場合は、京の下にひらがなの小さなよとぐが、入るようにし、口の下にoからcが入るようにし、
香呂駅の場合は、うが、香の字の日の部分の下にうがかぶるようにし、呂の中ほどのところに最後のoが来るようにし、
溝口は、さんずいの部分にみがかぶるようにし、口の字は、ローマ字がoからcまで入るようにし、
福崎は、福の字の田の下にきが来て、崎の字の下にローマ字のkからkまでが入るようにしたいです。

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

いろいろ動かしても文字バランスが違って見えます。解決策は如何に。

補足

特になし

winterboum

2024/08/04 22:55

「駅を再現」の意味があいまいなのですが、載っている写真の駅名表示版の再現ですか？で、「再現」とは文字の配置も含めて写真の通りにしたい？

maisumakun

2024/08/04 23:44

極論ですが、「文字数ごとに手作業で位置を合わせれば」どんなものでも作れるとは思います（実物も、おそらくそのようにしていることでしょう）。それはしたくない、ということで間違いないでしょうか。

juner

2024/08/04 23:50 編集

css custom property を使って動的に padding や grid の余白幅を調整するとかすればいいのでは……？ https://developer.mozilla.org/ja/docs/Web/CSS/--* 表示の際要素に対して設定もできますので。 https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

Lhankor_Mhy

2024/08/05 01:19 編集

余計なアドバイスだと思いますがご容赦ください。 font-family: "Frutiger LT Pro","源暎モノゴ", sans-serif; となっていて、Frutiger LT Pro はググってみたところいわゆるコンデンスフォントに近い感じなので明らかに写真の英字フォントとは異なります。これで字幅を再現しようとしても難しいのでは。ついでに言えば、源暎モノゴはモノスペースフォントですが、このフォントがない場合、sans-serif がフォールバックされるため、おそらくプロポーショナルフォントが使用されます。なので、頑張って調整して理想の表示になってそのページを公開したとしても、その表示で見れる人はあまりいないのではないかと思います。 CSSでタイポグラフィをやるのはデザイン知識とセンスがあっても茨の道なんで、不勉強な状態で取り組んでもなかなか難しいでしょう。

Lhankor_Mhy

2024/08/05 01:21

って、Frutiger LT Proってフルティガーなんですね。じゃあ、コンデンスフォントではないですね。失礼しました。

sembokulove

2024/08/05 01:50

実際のJR西日本は、モリサワの新ゴとFrutigerという書体を用いております。モリサワは有料なので、無料で、一番近い書体が源暎モノゴです。また、英字のFrutigerは、マクロンが使え、かつ無料だとこれが限度かと。尚、今は仕事中ですし、通院もあるので、 19時00分まで勝手ながら返答はいたしかねます。 pcも使えない状況ですので。

winterboum

2024/08/05 05:19

Lhankor_Mhyさんのご指摘はページ作成時、作成者の環境に源暎モノゴがあって、仮にそれで良し！！ってのができても、そこにアクセスする人の環境に源暎モノゴがなければ乱れるよということです。私の最初のコメントというか質問というか、もその点を気にしています。作成者だけ、とか仲間内だけのページなら良いのですが。。。

行動規範の内容に同意します

回答2件

自己解決

駅名表についてですが、駅名の文字数によって文字の間隔が違うことがわかりました。
また、wordで制作してからhtmlにしたほうがやりやすいので、
そちらの方向性で考えます。

投稿2024/08/10 23:39

編集2024/08/11 01:53

sembokulove

総合スコア90

サンプル数がすくなくてなんとも言えませんが、とりあえずこんな感じ

html
1<style>
2.stationBoard{
3width:12em;
4}
5.stationNameHiraganaRoman{
6background-Color:lightgray;
7}
8.stationNameDisplay{
9line-height:1em;
10padding:0em 0.5em;
11font-size:3em;
12text-align:justify;
13text-align-last:justify;
14background-Color:yellow;
15}
16.stationNameHiraganaRoman{
17display:flex;
18justify-content:center;
19gap:1em;
20}
21.stationNameHiraganaDisplay{
22background-Color:lime;
23}
24.stationNameRomanDisplay{
25background-Color:aqua;
26}
27</style>
28<div class="stationBoard" class="stationBoard">
29<div class="stationNameDisplay">福崎</div>
30<div class="stationNameHiraganaRoman">
31<div class="stationNameHiraganaDisplay">ふくさき</div>
32<div class="stationNameRomanDisplay">Fukuskaki</div>
33</div>
34<div class="stationBoard" class="stationBoard">
35<div class="stationNameDisplay">香呂</div>
36<div class="stationNameHiraganaRoman">
37<div class="stationNameHiraganaDisplay">こうろ</div>
38<div class="stationNameRomanDisplay">Koro</div>
39</div>

投稿2024/08/05 00:47

yambejp

総合スコア116722

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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