スペースを使わず文字位置を揃える方法

質問

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか？
（下の例は揃っていませんが・・・）

１．あ　　　　　　　　：ＡＢＣ
２．abc　　　　　　 ：ＡＢＣ
３．あいう　　　　　　：ＡＢＣ
４、えお　　　　　　　：ＡＢＣ

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか？

ご教示の程、宜しくお願い致します

以上

回答No.2

ORUKA1951 · ベストアンサー

これは、No.がある序列リストですか？あるいは、用語とその説明のようなものでしょうか？
　HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例]［用語とその説明のようなもの］のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
　HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
　となります。

お礼

ありがとうございます
大変丁寧に、また親切に記載して頂き恐縮です
本当に助かりました
ありがとうございます

回答No.1

yambejp

こんな感じですか？

<style>
div.hoge{
clear:both;
float:left;
width:200px;
}
</style>

<div class="hoge">１．あ</div><div>：ＡＢＣ</div>
<div class="hoge">２．abc</div><div>：ＡＢＣ</div>
<div class="hoge">３．あいう</div><div>：ＡＢＣ</div>
<div class="hoge">４．えお</div><div>：ＡＢＣ</div>

お礼

ありがとうございます
参考にさせて頂きます
助かりました