人に聞けない痔の悩み、これでスッキリ >>

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

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

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

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

以上

このQ&Aに関連する最新のQ&A

A 回答 (2件)

 これは、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-html4 … )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。
    • good
    • 2
この回答へのお礼

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

お礼日時:2013/03/29 09:14

こんな感じですか?



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

<div class="hoge">1.あ</div><div>:ABC</div>
<div class="hoge">2.abc</div><div>:ABC</div>
<div class="hoge">3.あいう</div><div>:ABC</div>
<div class="hoge">4.えお</div><div>:ABC</div>
    • good
    • 2
この回答へのお礼

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

お礼日時:2013/03/29 09:16

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLで文字頭をそろえるには

メモ帳でHTMLを作っています。

ホームページの場合ですが、
通常だとメモ帳で文字を打ち、ブラウザで見ると左に寄せられた状態です。

いろはにほへと
123456789
ABCDEFGHIJ

これを左端に空も自分のスペースを設けて文字を打つにはどうしたらいいですか。

例えば、

****いろはにほへと
****123456789
****ABCDEFGHIJ

・・・・・・といった具合です。

Aベストアンサー

タイトルの「文字頭をそろえるには」と質問内容の「左端に・・・スペースを設けて文字を打つには」は少し話がずれています。
ここでは「左端に・・・スペースを設けて文字を打つには」について回答します。
サイト上で文字をHTMLと同じ状態で表示したいときに一番簡単なタグは「<pre>」です。
ですので、たとえば
<pre>
    いろはにほへと
    123456789
    ABCDEFGHIJ
</pre>
と書けば、左側に必要なスペースが空いて表示できます。
(ただし文字の場合だけ。)   

Q文字、センタリングの中での行頭左端揃え

すみません、質問です。

文字(短文)をページの中央におきたいのですが
「センタリング<タグ>」を使うと

***********
__*******
____***
***********
_*********
__*******
_*********

(*が文字で、『_』がスペースです)。

・・・とゆうようになります。

そうではなくて、ページの中央で
行頭をきちんとそろえたいんです。。

***********
******
********
****
*********
*****

といった具合に。。

これは leftmargin でやるしかないんでしょうか?
leftmargineだと、正しい中央の値がわからないんです。
なので、センターでの文頭左端揃え、といった具合に
したいのです。

お願いします。

Aベストアンサー

TR,TDタグで表を作成し
┏━┳━━┳━┓
┃ ┃  ┃ ┃
┃A┃B ┃C┃
┃ ┃  ┃ ┃
┗━┻━━┻━┛
こんな感じで表を作って、表全体を100%にして、A:B:Cを希望の割合にします。Bを文字列の長さにしてAとCを残りにしても良い。
で、Bの中に左そろえで文字を書きます。
当然表のborderは0を指定して見えないようにします。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

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

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Q均等な空白部分をつくるには?

htmlで例のように表示したいのですが
例)「  数量    金額」
  「  12 1,234」
のように桁位置を合わせたく思います。つまり、数字の最下位桁と見出しの最下位桁を同じ位置にしたいのです。
ところが、漢字スペースを入れても実際はくっついてしまい「123,456」のようにWeb表示されてしまいます。
半角スペースでも同様にくっついてしまいます。
たとえば「ESC」コードのようなスペースのように見える文字をスペース代わりに挿入することで可能になるのでしょうけど、どのようなコードがいいでしょうか?なにかいいアイデアはあるでしょうか?

Aベストアンサー

いまいち何をやりたいのかわかりませんが、
<pre></pre>でインデントしたい部分を囲んでみてはいかが?

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QHTMLで語の先頭をそろえるには?

こんにちは。

HTMLとCSSを勉強中の者です。

下の図のようにそれぞれの項目の語の先頭をそろえるには、テーブルを使うしかないでしょうか?

ワードのようにタブでそろえる方法があるのでしょうか?

いろいろ検索して調べたのですが、テーブルを使う以外の方法は見つけることができませんでした。

Aベストアンサー

その用途なら、枠のないテーブルが一番かと思いますが、
別の手としては

<style>
.schedule ul { margin:0; padding:0; }
.schedule ul > li { display:inline-block; width:8em; }
.schedule ul > li:nth-child(2) { width:4em; } /* 特定の列を短く */
</style>
<div class=schedule>
<ul><li>A<li>B<li>C<li>D</ul>
<ul><li>a<li>b<li>c<li>d</ul>
<ul><li>bo<li>po<li>mo<li>fo</ul>
</div>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング