HTMLで、2行目以降をほぼ1字下げたい

以下の表示例のように、2行目以降をほぼ1字下げて表示をしたいのですが、どのような記述をすればいいのでしょうか。
番号付きリストではありません。
<DT><DD>では、em指定などができるのかわかりまんが、そのままでは行頭が下がりすぎます。
※表示上、表示例の2行目以降の行頭の詰めが一文字未満かもしれませんが、ご理解ください。

（表示例）

タイトル
　内容
　内容
　内容

No.6 ベストアンサー 回答者： DrFell 回答日時： 2011/08/30 20:03

#3さんや、#5さんのmargin-leftを使う方法、もしくはpadding-leftを使う方法が、ずばりの答えだと思います。

が、ブログということが、私には引っかかります。

>自分の忘備として、既存のブログサービスを利用するつもりです。
>とりあえず、アメブロではmargin-leftを解釈してくれませんでした。

cssの詳細度というルールをご存知でしょうか？
同じ指定があった場合、どの指定を適用するかのルールです。ブログのテンプレで、該当箇所への指定が他にありませんか？それらに負けている可能性が高いです。例えばブログですと、
dd{margin-left:1em;}
という指定では、他に指定があった場合、おそらくすべてに負けます。ブログはidやclassと呼ばれるグループ化を使って、右側のブロック、左側のブロックでデザインを変え、その中にもidやclassを使って……局所化を計っています。

右ブロックの中のddという指定があった場合、グループへの指定がないddへのmargin-leftへの指定は有効になりません。ここを勘違いして「とりあえず、アメブロではmargin-leftを解釈してくれませんでした」となっているのではないでしょうか？cssのカスタマイズを許可しているサービスで、marginを解釈できないサービスを私は知りません。

dd{margin-left:1em;}
セレクタ｛プロパティ：値｝でｃｓｓは指定します。セレクタの事を勉強されるか、アメブロのどのテンプレートを使用していて、どの場所に問題の字下げを行いたいのか、見出しと箇条書きなのか、見出しと本文なのか、定義リストなのかを教えてください。
何を適用したいかわからない場合は、どのような見出しで、実際に字下げ部分に入る文章を教えてください。saruchan002 さんのブログは教えないでください（Okwave、教えてgoo内では自分のサイトのURLを教えることを禁じています）。

><dt><dd>ですと、テキスト選択で2行目以降の空白の行頭を選択してくれないので、自分としては使い勝手がよかったのですが。
<hn><p>でも、<hn><ul><li>でも、テキスト選択で2行目以降の空白の行頭を選択してくれないです。デザインを空白なんかで調整しようとしなければよいだけです。

No.5 回答者： yui56544 回答日時： 2011/08/29 23:02

ｈ1タグとPタグでやりたいのかDT・DDのリストタグでやりたいのかわかりませんがCSSの設定で可能だと思います。

例えば、DD・DTのリストタグで行う場合
●HTML部分
<dl>
<dt>タイトル</dt>
<dd>内容</dd>
<dl>
●CSS指定
dl {
marigin:0 0 20px 0;
padding:0;
line-height:1.5em;
}
dt {
margin:0;
padding:0;
}
dd {
margin:0 0 0 1em;
padding: 0;
}

これを元に数値を調節すれば望むものができるのではないでしょうか？

No.4 回答者： ORUKA1951 回答日時： 2011/08/29 15:48

HTMLは、文書構造をマークアップするものですから、デザイン（どのようにプレゼンテーションするか）は、一切考えません。

それがタイトル(見出し)とその説明文なら
<h2>見出し</h2>
<p>段落</p>
<p>段落</p>
<p>段落</p>
とマークアップします。
また、定義リストが構造上適しているなら
<dl>
　<dt>定義</dt>
　<dd>説明</dd>
　<dd>説明</dd>
　<dd>説明</dd>
　<dt>定義</dt>
　<dd>説明</dd>
　<dd>説明</dd>
　<dd>説明</dd>
</dl>
あるいは、箇条書きのほうが適しているなら
<ul>
　<li>
　　<ul>
　　　<li></li>
　　　<li></li>
　　　<li></li>
　　</ul>
　</li>
</ul>
　その上で、スタイルシートで、番号を付けよう(h2にも番号をふれる)が付けまいが、見出し(最初のli)を太字にしようが、まったく自由に出来ます。
★基本は、文書をそれを構成する要素に分解して、きちんとその要素を示すタグでマークアップされているかです。googleお勧めのLynxで確認すると良いでしょう。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://www.google.com/support/webmasters/bin/ans … )］より

　そのうえで、あらためてこのようなHTMLを「2行目以降をほぼ1字下げて表示をしたいのですが、（ＣＳＳを）どのような記述をすればいいのでしょうか。」

　と聞いてください。
　

No.3 回答者： yambejp 回答日時： 2011/08/29 14:01

ddのleft-marginの問題では？

<style>
dd{margin-left:1em;}
</style>

<dl>
<dt>タイトル</dt>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
</dl>

この回答へのお礼

ご回答ありがとうございます。
自分の忘備として、既存のブログサービスを利用するつもりです。
とりあえず、アメブロではmargin-leftを解釈してくれませんでした。
<dt><dd>ですと、テキスト選択で2行目以降の空白の行頭を選択してくれないので、自分としては使い勝手がよかったのですが。
他のサービスも試してみます。

お礼日時：2011/08/29 14:24

No.2 回答者： admiral_ya 回答日時： 2011/08/29 13:33

スタイルシートでtext-indentを使えば良いのでは。

タイトルはインデントしたくないようなので、h1～h4は!importを付けて
text-indent=0pt !import;
等とインデントしないようにし、bodyで
text-indent=1em;
の要領です。

ただ、実際の表示については、ブラウザのCSSの対応次第です。

この回答へのお礼

ご回答ありがとうございます。
自分の忘備として既存のブログサービスを利用するつもりです。
スタイルシートの設定方法を調べてみます。

お礼日時：2011/08/29 14:21

No.1 回答者： gtx456gtx 回答日時： 2011/08/29 12:59

色々な手段あると思いますが・・・

テーブルで記述するなら、下記のような記述できます。
<td colspan=2>タイトル</td>
<td></td> <td>内容</td>
<td></td> <td>内容</td>
<td></td> <td>内容</td>

widthを指定すれば％やピクセルでも指定できます。

この回答へのお礼

ご回答ありがとうございます。
自分のモロモロの忘備として、既存のブログサービスに、箇条書きでだらっと文章を書いておこうかなと思いました。
ありがとうございます。

お礼日時：2011/08/29 14:19