テキストのインデント
-
0 名前： やよ ： 2006/08/08（火） 14:58 ID:K3ec.Mrb
- 以前にテーブルレイアウトでコーディングしたものを
今CSSレイアウトにリニューアルしています。
そこで、どうしてもテキストのインデントがうまくとれなくて困っています。
【環境条件】
・テキストサイズは%指定で、可変します。
・WinのIE、FireFox。MacのSafari、IE、FireFoxで閲覧可能にしたい。
【前のHTML】
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>1行目：</td>
<td>テキストです<br>テキストです</td>
</tr>
<tr valign="top">
<td>2行目：</td>
<td>テキストです<br>テキストです</td>
</tr>
<tr valign="top">
<td>3行目：</td>
<td>テキストです<br>テキストです</td>
</tr>
</table>
【今のHTML】
<ul>
<li>1行目：テキストです<br>テキストです</li>
<li>2行目：テキストです<br>テキストです</li>
<li>3行目：テキストです<br>テキストです</li>
<ul>
（CSS）
ul {
list-style-type:none;
}
li {
text-indent:-3.5em;
padding-left:20px;
}
テキストのインデントをCSSで制御しようとしても、
上記のコーディングだとテキストの頭位置がうまく揃ってくれません。
これってどうしようもないことでしょうか。
それとも他にやり方がありますか？
「CSSレイアウトなので揃いません（できません）」とは言いたくないんですけどね・・・。
-
1 名前： 元帥 ： 2006/08/08（火） 14:58 ［URL］ ID:xapB5zOF
- http://www.tagindex.com/stylesheet/list/list_style_position.html
-
2 名前： やよ ： 2006/08/08（火） 14:58 ID:K3ec.Mrb
- 回答ありがとうございます。
説明不足ですみません。
インデントで揃えたいのは「テキストですテキストです」の文字です。
「・」の代わりに「1行目：」「2行目：」「3行目：」のテキストを外側に表示することは可能ですか？
-
3 名前： カヅサツ ◆ThCi95HEzw ： 2006/08/08（火） 14:58 ［URL］ ID:f0UXxXRM
- なぜtableではいけないのでしょうか？ これは「表」ではないのですか？
-
4 名前： sasame ： 2006/08/08（火） 14:58 ID:F5cxQaxL
- ＞「・」の代わりに「1行目：」「2行目：」「3行目：」のテキストを外側に表示することは可能ですか？
定義型リストを使ってみては？
レイアウトの前に「マークアップが正しいか」の吟味は必要かもしれませんが。
-
5 名前： 元帥 ： 2006/08/08（火） 14:58 ［URL］ ID:09V/9WPI
- :before疑似要素と、contentプロパティ、counter関数を用いる事により、自動で番号を振る事が出来るのですが、成形されたマーカーを外に出す事は難しいようです。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#markers
「この文書は次の様に整形すべきである」とありますが、IEはcontentにすら対応していませんしね。（Opera、Firefoxは番号の出力はしてくれます。）
positionもCSSで成形された内容には適用できないようです。
表なのかリストなのか、それ以外のものなのか、>>0 のサンプルソースからは判断しかねますが、CSSで無理矢理揃えるか、やはりtableを用いるべきではないでしょうか。
div{
position:relative;
left:4em;
top:-1em;
}
<ul>
<li>1行目：<div>テキストです<br>テキストです</div></li>
<li>2行目：<div>テキストです<br>テキストです</div></li>
<li>3行目：<div>テキストです<br>テキストです</div></li>
<ul>
-
6 名前： やよ ： 2006/08/08（火） 14:58 ID:K3ec.Mrb
- みなさま、回答ありがとうございます。
sasameさん＞
定義型リストを使うことも考えて調べたりもしたんですけど、
どうしても出来ないことがあって。
見栄えは今までの（tableレイアウト）と変えたくないので、
<dt>と<dd>を並列にさたいんですけど、出来ますか？スタイルシートかな？
カヅサツさん、元帥さん＞
修正かけているものは、表としても定義できそうですが
どちらかと言えばリストの概念を持っています。
ただ、今回のようにきちんとレイアウトが揃わない場合は、表として考え直したほうがよさそうですね・・・。
ありがとうございました
-
7 名前： Newのり太 ： 2006/08/08（火） 14:58 ID:VRRCbOGz
- > <dt>と<dd>を並列にさたいんですけど、出来ますか？スタイルシートかな？
ddのmargin-topをマイナスに、margin-leftをdtの文字分とる、などすれば出来るかもしれません。
-
8 名前： sasame ： 2006/08/08（火） 14:58 ID:nzgg0W6u
- 失礼しました。
下記のページ(の真中くらいにあるcaffee breakってとこ)をだいぶ前に見て定義型では？と回答しました。
http://deztec.jp/lecture/folio/02/index.html
#「こういう記述がある」と記憶していただけで詳しいcssは覚えてなかったので一言で回答してしまいました。すみません。
>Newのり太さん
フォローありがとうございます。
-
9 名前： やよ ： 2006/08/08（火） 14:58 ID:K3ec.Mrb
- sasameさん、Newのり太さん＞
回答ありがとうございます。
sasameさんの教えてくれたサイトで『作例』を見たら、レイアウトが崩れてしまったんですが、
それをヒントに試行錯誤した結果、dtとddを並列させることが出来ました！
今回の悩みの種の該当箇所は「表」ということでTABLEで処理することになりましたが、
今後は他のタイプも出てくると思うので、その時にはマークアップの意味を考えて
都度合った対応をして行きたいと思います。
みなさま、ありがとうございました！
