ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：kotikaze6 大文字と小文字を等間隔にできますか？
困り度：
  • 困っています
 テキストボックスのフォントとラベルのフォントを全く同じ間隔で
並べたいのですが、serifフォント以外ではできません。
フォント依存に頼れない事情もあり、困っています。
スタイルシートでは、不可能なのでしょうか？

aaaa
ＡＡＡＡ　　　　←　。。、　こんな感じで大きさが違いすぎて。
　自分でもまだまだ試しますが、宜しくお願いします。
質問投稿日時：08/03/28 03:25
質問番号：3901095
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答10pt
回答者：abril > テキストボックスのフォントとラベルのフォントを全く同じ間隔で並べたい
> aaaa
> ＡＡＡＡ　　　　←　。。、　こんな感じで大きさが違いすぎて。

ちょっとイメージがよくわかりかねるのですが、テキストボックスとは<input>、ラベルは<label>を使用、ということで宜しいですよね？
また、上記引用部分2-3行目のイメージであれば、<label>が<input>の先にきてブロック要素的に並ぶ、という事でしょうか？

また、

> フォント依存に頼れない事情

とは、特定のフォントを指定せずに、という条件ですよね。

上記の解釈の上で、検証してみました。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<form method="post" action="#" id="hogehoge">
<label for="sample">aaaaa</label>
<input class="textbox" type="text" size="40" maxlength="100" name="data" id="sample" value="AAAAA" />
</form>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
input {
font-family: monospace;
font-size: 12px;
}
label {
display: block;
margin: 0 0 0.1em 0;（※bottomの値はお好みで加減を）
font-family: monospace;
font-size: 12px;
}
※font-sizeはinputとlabelで同一でさえあればお好みのサイズでかまいません
----------------------------------------------------------------------
ANo.1の回答者同様、フォント・グループとしてmonospace（「タイプライター体」とも言われる、全てのグリフが同一幅を持ったフォント）を定義しておけば、クライアント側にインストールされているいずれかのmonospaceフォントが適用されます。

実装のイメージが異なる様であれば、補足して下さい。
種類：補足要求
どんな人：専門家
自信：参考意見
回答日時：08/03/28 16:46
回答番号：No.2
この回答へのお礼丁寧な説明ありがとうざいました。
やればやるほどＣＳＳは面白いです。

回答

良回答20pt
回答者：_pipi_ <html>
<body>
<div style="font:16px monospace">aaa</div>
<input type="text" value="AAA" style="font:16px monospace"><br>
種類：補足要求
どんな人：一般人
自信：参考意見
回答日時：08/03/28 08:26
回答番号：No.1
この回答へのお礼まさにこれですね！　目から鱗が落ちる思いです。
ありがとうございました。
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ