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

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

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

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

HTML5

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

Q&A

解決済

2回答

691閲覧

電車の駅名表をhtmlとcssで構築したいのですが。

sembokulove

総合スコア90

CSS3

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

HTML5

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

0グッド

2クリップ

投稿2024/08/04 10:50

編集2024/08/04 11:12

実現したいこと

イメージ説明
↑香呂駅
イメージ説明
↑福崎駅

<!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等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

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

補足

特になし

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

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

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

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

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

winterboum

2024/08/04 22:55

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

2024/08/04 23:44

極論ですが、「文字数ごとに手作業で位置を合わせれば」どんなものでも作れるとは思います(実物も、おそらくそのようにしていることでしょう)。 それはしたくない、ということで間違いないでしょうか。
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さんのご指摘は ページ作成時、作成者の環境に 源暎モノゴ があって、仮にそれで 良し!! ってのができても、 そこにアクセスする人の環境に 源暎モノゴ がなければ乱れるよ ということです。 私の最初のコメントというか質問というか、も その点を気にしています。 作成者だけ、とか 仲間内だけ のページなら良いのですが。。。
guest

回答2

0

自己解決

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

投稿2024/08/10 23:39

編集2024/08/11 01:53
sembokulove

総合スコア90

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

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

0

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

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

総合スコア116176

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問