人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

よろしくお願いします。

●質問者: bathrobe
●カテゴリ:コンピュータ
✍キーワード:HTML 画像
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● cooper0524
●10ポイント

http://simfan.cn1.jp/mathmarks/fraccopy.htm

分数コピー機

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

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

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

◎質問者からの返答

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

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

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


2 ● TomCat
●0ポイント

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でその指定を打ち消すことも出来ます。

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

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


3 ● TomCat
●5ポイント

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

◎質問者からの返答

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

ということです。

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

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


4 ● jippu
●55ポイント

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 の中身が左にずれません・・・


5 ● jippu
●10ポイント

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-

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ