htmlで「上付き」と「下付き」を同時につかい、左揃えをするにはどうしたらよいでしょうか?


C0<sub>3</sub><sup>2-</sup> とすると、上付きの「2-」が右側にずれてしまいます。
テーブルで組むのは美しくありません。
いざとなったら、画像にしようかと思いますが、それは最後の手段です。

よろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/12/20 18:32:36
  • 終了:--

回答(5件)

id:cooper0524 No.1

cooper0524回答回数296ベストアンサー獲得回数42005/12/20 18:42:13

ポイント10pt

上付きと下付きを同時に使うことはできません。

やはりテーブルを使用するしかないようです。

こんなツールもあります。

id:bathrobe

htmlで分数を作るツールは面白いですね。

質問を出しながら、私も考えていたのですが、右側にずれたほうの文字の始まる位置を、スタイルシートで左にずらすことで対応できませんかね?

htmlだけで対応できるのが最良ではあるのですが・・・

2005/12/20 19:00:28
id:TomCat No.2

TomCat回答回数5402ベストアンサー獲得回数2152005/12/20 19:19:07

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でご紹介したページなどを参考にしてみてください。

id:bathrobe

上記のスタイルシートを使っても、やはり「3」と「2-」を左そろえにすることはできず、「2-」が右にずれます。解決になってません。

>CSSでその指定を打ち消すことも出来ます。

これがまさに知りたいことなのですが、お分かりなら教えていただけますでしょうか。

よろしくお願い致します。

2005/12/20 19:36:48
id:TomCat No.3

TomCat回答回数5402ベストアンサー獲得回数2152005/12/20 20:30:07

ポイント5pt

http://www.hatena.ne.jp/1

人力検索はてな

解決になっていないとのことですが、

まずは


<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-を別個に位置指定していくことも可能です。

id:bathrobe

>分数のように3の下に2-を表示させたい

ということです。

お答え頂いた最初のhtmlでは、C032-と同じ結果ですよね。

2番目の例が近いのですが、「上付き文字と下付き文字が小さくない」点と「divでブロック化されている」点を改善したいです。

2005/12/20 20:50:38
id:jippu No.4

jippu回答回数61ベストアンサー獲得回数42005/12/20 20:37:56

ポイント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>の順番が決まってしまう、桁数が固定、など力業ならではの問題がありますが。

id:bathrobe

sup の中身が左にずれません・・・

2005/12/20 20:53:30
id:jippu No.5

jippu回答回数61ベストアンサー獲得回数42005/12/20 21:00:16

ポイント10pt

http://www.openspc2.org/reibun/css/#

スタイルシート例文辞典

4の回答者です。


IEで確認しましたところ、ずれて表示されるのですが、ブラウザはIEではないのでしょうか?


もしくは、基本的なことですが、”text/css”のダブルクォーテーションが全角のままということはないでしょうか?

id:bathrobe

失礼しました、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-

2005/12/20 21:20:38

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません