C0<sub>3</sub><sup>2-</sup> とすると、上付きの「2-」が右側にずれてしまいます。
テーブルで組むのは美しくありません。
いざとなったら、画像にしようかと思いますが、それは最後の手段です。
よろしくお願いします。
No.2
5402
215
http://park16.wakwak.com/~html-css/css/css_21.html
スタイルシート講座 - 超初心者のためのホームページ作成講座
<sub>や<sup>でも上付き下付きは記述できますが、
こうした見栄えの指定は、今はCSSを用いることが推奨されています。
vertical-alignはインラインでも使えますから、
<style type=”text/css”>
<!--
.style1 { vertical-align: sub; }
.style2 { vertical-align: super; }
-->
</style>
C0<span class=”style1”>3</span><span class=”style2”>2-</span>
などとすればうまくいくと思います。
それでも右にずれるとすれば、それは何か右にずれる仕掛けが
そこに指定されているということですから、
その原因が分かれば、CSSでその指定を打ち消すことも出来ます。
なお、上のコメントにあったCSSによる位置指定については、
URLでご紹介したページなどを参考にしてみてください。
上記のスタイルシートを使っても、やはり「3」と「2-」を左そろえにすることはできず、「2-」が右にずれます。解決になってません。
＞CSSでその指定を打ち消すことも出来ます。
これがまさに知りたいことなのですが、お分かりなら教えていただけますでしょうか。
よろしくお願い致します。
No.3
5402215
5pt
人力検索はてな
解決になっていないとのことですが、
まずは
<html>
<head>
<style type=”text/css”>
<!--
.style1 { vertical-align: sub; }
.style2 { vertical-align: super; }
-->
</style>
</head>
<body>
C0<span class=”style1”>3</span><span class=”style2”>2-</span>
</body>
</html>
これだけのソースで表示の様子を確かめてみてください。
そして、その表示結果と、今取り組んでいるページで
どこが違うのかを吟味しないと、
「右にずれる」という原因が分かりません。
というか、具体的にどういう表示結果をお望みなのかも、
ちょっと分からなくなってきました。
普通の表示環境であれば、上記のソースで、
C0の隣りに下付の3、その隣りに上付きの2-となって、
普通に表示されるはずです。
しかし、もしこれを分数のように3の下に2-を表示させたい
ということでしたら、この場合は改行を含まない
ご質問文のソースでも不可能です。
もし分数のように縦に並べて表示したいとのことでしたら、
この場合はC0も3も2-も<div>でブロック化して、
<style type=”text/css”>
<!--
div{
position:relative;
}
.position1{
top:1em;
left:0;
}
.position2{
top:-0.5em;
left:1.5em;
}
</style>
<div class=”position1”>C0</div><div class=”position2”>3</div><div class=”position2”>2-</div>
などとやってみてください。
position:relative;は相対的な位置指定の意、
そしてtopやleftで個々の位置を決めていきます。
細かな位置は実際に表示させながら調整してみてくださいね。
もうひとつposition3というclassを作って
それを2-に適応するようにすると、
3と2-を別個に位置指定していくことも可能です。
＞分数のように3の下に2-を表示させたい
ということです。
お答え頂いた最初のhtmlでは、C032-と同じ結果ですよね。
2番目の例が近いのですが、「上付き文字と下付き文字が小さくない」点と「divでブロック化されている」点を改善したいです。
No.4
614
55pt
http://www.openspc2.org/reibun/css/
スタイルシート例文辞典
決して美しいとは言えませんが…
----------------------------
<style type=”text/css”>
<!--
sup {
position: relative;
left: -7px;
}
//-->
</style>
C0<sub>3</sub><sup>2</sup>
----------------------------
relativeで相対座標指定と宣言します。
あとは-7とか指定すれば左にずれて表示されます。
<sub>と<sup>の順番が決まってしまう、桁数が固定、など力業ならではの問題がありますが。
sup の中身が左にずれません・・・
No.5
614
10pt
http://www.openspc2.org/reibun/css/#
スタイルシート例文辞典
4の回答者です。
IEで確認しましたところ、ずれて表示されるのですが、ブラウザはIEではないのでしょうか？
もしくは、基本的なことですが、”text/css”のダブルクォーテーションが全角のままということはないでしょうか？
失礼しました、3の回答まではちゃんとはずしていたのですが、忘れていました。
・・・というわけで出来ました。文字サイズ変更に追従するように em にしたものを使いたいと思います。
ありがとうございました。
<style type=”text/css”></p> <p> <!--</p> <p> sup {</p> <p> position: relative;</p> <p> left: -0.5em;</p> <p> }</p> <p> //--></p> <p> </style>
C032-
58
57
1
1
1
htmlで分数を作るツールは面白いですね。
質問を出しながら、私も考えていたのですが、右側にずれたほうの文字の始まる位置を、スタイルシートで左にずらすことで対応できませんかね？
htmlだけで対応できるのが最良ではあるのですが・・・