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

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

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

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

HTML5

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

Q&A

1回答

427閲覧

transformscaleで文字を長体や平体にしても文字間隔を変えたくないです。

sembokulove

総合スコア90

CSS3

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

HTML5

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

0グッド

2クリップ

投稿2024/08/16 08:18

実現したいこと

transformscaleで文字を長体にしたり平体にしても、
平仮名とローマ字の間隔は変えたくございません。

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

下図のように、長体や平体にすると、thisStationJa11と"thisStationEn11の間のblank2の間隔が必ず
それに応じて幅が広くなったり狭まったりします。
下の図のようになります。
イメージ説明
以下がそのhtmlになります。

<div id="stationBoard" class="stationBoard"> <div id="stationNameDisplay" style="width: 100%;"></div> <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div> <div id="lineColorDisplay" style="height: 20px; width: 100%;"><!--高さ指定は必須、かつ数字は適当なので要調整--> <div class="center-fix"><div class="thisStationZh">谷谷</div></div> <div class="center-fix2"> <font class="thisStationJa">TTT</font><font class="blank1">&emsp;</font> <font class="thisStationEn">TTTTTT</font> </div> </div> </div> <br /> <div id="stationBoard" class="stationBoard2"> <div id="stationNameDisplay" style="width: 100%;"></div> <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div> <div id="lineColorDisplay" style="height: 20px; width: 100%;"><!--高さ指定は必須、かつ数字は適当なので要調整--> <div class="center-fix11"><div class="thisStationZh11">谷谷</div></div> <div class="center-fix12"> <font class="thisStationJa11">TTT</font><font class="blank2">&emsp;</font> <font class="thisStationEn11">TTTTT</font> </div> </div> </div> <style> .stationBoard2{ position:relative;top:100pt; font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif; } .center-fix{ display: flex; align-items: center; justify-content: center; font-weight:bold; transform: scale(1.2,1); } .center-fix2{ display:flex; justify-content: center; font-weight:bold; transform: scale(1.2, 1); } .center-fix3{ display:flex; justify-content: center; } .thisStationZh{ font-size:60pt; letter-spacing: 1em; margin-left:1em; } .thisStationJa{ font-size:20pt; letter-spacing: 0.3em; margin-left:-0.02em; } .blank1{ } .thisStationEn{ font-size:22pt; } </style> <style> .stationBoard2{ font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif; } .center-fix11{ display: flex; align-items: center; justify-content: center; font-weight:bold; transform: scale(1.2,1); } .center-fix12{ display:flex; justify-content: center; font-weight:bold } .thisStationZh11{ font-size:60pt; letter-spacing: 1em; margin-left:1em; } .thisStationJa11{ font-size:20pt; } .blank2{ } .thisStationEn11{ font-size:22pt; } </style> <br />

該当のソースコード

特になし

試したこと・調べたこと

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

チャットgptに問いかけても幅が変わりました。
もうお手上げです。

補足

特になし

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

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

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

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

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

guest

回答1

0

上位要素の「.center-fix2」に「transform: scale」が設定されているからでは?
scaleで左右に伸ばすと間のblank部分に干渉して伸びるのでいずれにしろきれいに間をあけるのは厳しいですね
あえてやるならgapを調整するくらいでしょうか

もしくは該当部分に逆のスケールを当てるとか

css

1.center-fix2 .blank1{ 2transform: scale(1/1.2, 1); 3}

追記

失礼しましたscaleに式で値を設定するにはcalcが必要ですね
以下確認してみください
ブランクの幅は統一されますが見た目上thisStationJaのTの右側に余白が有るので実際の幅は上の方が広くなります。
これを揃えたいのであればscaleでの引き伸ばしはやめたほうがいいでしょう

html

1<div id="stationBoard" class="stationBoard"> 2 <div id="stationNameDisplay" style="width: 100%;"></div> 3 <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div> 4 <div id="lineColorDisplay" style="height: 20px; width: 100%;"><!--高さ指定は必須、かつ数字は適当なので要調整--> 5 <div class="center-fix"><div class="thisStationZh">谷谷</div></div> 6 <div class="center-fix2"> 7 <font class="thisStationJa">TTT</font><font class="blank1">&emsp;</font> 8 <font class="thisStationEn">TTTTTT</font> 9 </div> 10 </div> 11</div> 12<br /> 13<div id="stationBoard" class="stationBoard2"> 14 <div id="stationNameDisplay" style="width: 100%;"></div> 15 <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div> 16 <div id="lineColorDisplay" style="height: 20px; width: 100%;"><!--高さ指定は必須、かつ数字は適当なので要調整--> 17 <div class="center-fix11"><div class="thisStationZh11">谷谷</div></div> 18 <div class="center-fix12"> 19 <font class="thisStationJa11">TTT</font><font class="blank2">&emsp;</font> 20 <font class="thisStationEn11">TTTTT</font> 21 </div> 22 </div> 23</div> 24<script> 25//確認用 26window.addEventListener('DOMContentLoaded', function(e){ 27 const w=[ 28 document.querySelector('.blank1').getBoundingClientRect().width, 29 document.querySelector('.blank2').getBoundingClientRect().width, 30 ]; 31 console.log(w); 32}); 33</script> 34<style> 35/* ここから */ 36.blank1,.blank2{ 37 background-Color:yellow; 38} 39.blank1{ 40transform: scale(calc(1/1.2),1); 41} 42/* ここまで追加 */ 43.stationBoard2{ 44position:relative;top:100pt; 45font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif; 46} 47.center-fix{ 48display: flex; 49align-items: center; 50justify-content: center; 51font-weight:bold; 52transform: scale(1.2,1); 53} 54.center-fix2{ 55display:flex; 56justify-content: center; 57font-weight:bold; 58transform: scale(1.2, 1); 59} 60.center-fix3{ 61display:flex; 62justify-content: center; 63} 64.thisStationZh{ 65font-size:60pt; 66letter-spacing: 1em; 67margin-left:1em; 68} 69.thisStationJa{ 70font-size:20pt; 71letter-spacing: 0.3em; 72margin-left:-0.02em; 73} 74.blank1{ 75} 76.thisStationEn{ 77font-size:22pt; 78} 79</style> 80<style> 81.stationBoard2{ 82font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif; 83} 84.center-fix11{ 85display: flex; 86align-items: center; 87justify-content: center; 88font-weight:bold; 89transform: scale(1.2,1); 90} 91.center-fix12{ 92display:flex; 93justify-content: center; 94font-weight:bold 95} 96.thisStationZh11{ 97font-size:60pt; 98letter-spacing: 1em; 99margin-left:1em; 100} 101.thisStationJa11{ 102font-size:20pt; 103} 104.blank2{ 105} 106.thisStationEn11{ 107font-size:22pt; 108} 109</style> 110<br />

投稿2024/08/16 09:04

編集2024/08/17 06:28
yambejp

総合スコア116176

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

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

sembokulove

2024/08/16 09:24

回答ありがとうございます。試してみましたが解決できませんでした。 thisStationJa11とthisStationEnにletter-spacingを設定しましたが、逆効果です。 cssも無能ですね。 この場合どの辺りに原因がありそうでしょうか?
sembokulove

2024/08/16 10:40

回答ありがとうございます。試してみましたが解決できませんでした。 無理ですね。 例えば、thisStationJa11にletter-spacing:0.1em;をかけた場合、 通常は、text-aliginで0.1emないしmargin-rightで0.1emをかけるところまではできます。 しかし実際は、blankがthisStationJa11のletter-spacing:0.1emの状態と0の状態が合致するのは、その反対のmargin-right:-0.1emでも、thisStationJa11にかけている、margin-right:0.1emと合算した、 -0.2emでもなく、実際は、-0.5emでした。 この場合どの辺りに原因がありそうでしょうか?
sembokulove

2024/08/18 01:48

回答ありがとうございます。試してみましたが解決できませんでした。 この場合どの辺りに原因がありそうでしょうか? そんなにtransform scaleを悪者扱いするなら、 transform scale以外の長体平体の設定の方法を答えてください!!ヽ(`Д´)ノプンプン
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問