実現したいこと
<!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等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
いろいろ動かしても文字バランスが違って見えます。解決策は如何に。
補足
特になし
回答2件
あなたの回答
tips
プレビュー