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

質問

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

（表示例）

タイトル
　内容
　内容
　内容

回答No.6

DrFell · ベストアンサー

#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

ｈ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

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/answer.py?answer=35769&hl=jp#2 )］より

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

　と聞いてください。

回答No.3

yambejp

ddのleft-marginの問題では？

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

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

お礼

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

回答No.2

admiral_ya

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

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

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

お礼

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

回答No.1

gtx456gtx

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

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

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

お礼

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