文章の字下げ方法についての質問

2013/01/14 02:51

このQ&Aのポイント

文章の字下げ方法について不安があります。修正前の文章の見た目と修正後の見た目を比較して、適切な字下げ方法を考えたいです。
以下のHTMLとCSSの記述で、まだ続いている文の途中で改行してしまっているため、不安です。HTMLはHTML4.01 Transitional、CSSは2.1です。
同じようなレイアウトを実現するために、どのようなHTMLとCSSの記述が適切か、アドバイスをいただけると助かります。

noname#228688

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/01/14 19:30 回答No.2

ミスがないか？＞項目……項目に関する説明文です。この説明文の　の時点で、HTMLのマークアップは<dl>定義リストを使うべきです。　これは、HTMLは文書構造を記述するものという決まりがあるからです。　そうすることでスタイルシートを理解しないユーザーエージェントや検索エンジンであっても用語とその説明だと判断できるからです。　もちろんリスト的なないようでしたら<li>でマークアップしても良いです。(あなたの文面からはDLだと思うのですが、具体的な前後関係がわからないので、どちらが適切かは判断できません。) [DLの場合] 　これが意外と曲者で、dt{float:left;}をすぐ思いつくので、それを使用しますがひとつ問題点があります。それは、説明<dd>が長くなった場合に[用語]の下に回りこんでしまうことです。　私は、floatを使わない方法を使用しています。この方が調整しやすいし、説明文が複数でも問題ないし、例のように・・・が必要ならそれを必要数だけ表示できます。 [li]の場合　これは、text-indentを使うと良いでしょう。 ★下記サンプルは、HTML4.01strict + CSS2.1です。　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) にてチェック済み。 IE5は中央に寄らない IE6,IE7は・・・が見えない IE8以降、およびFirefox,Opera,safari,Chromeでは同じ表示になるはずです。ウィンド幅には依存せず、折り返されます。 ★かっこ悪いので、ddはtext-indentで最初の行だけ字下げしてあります。 ★タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>display</h2> ＿＿<dl class="CSS"> ＿＿＿<dt>block</dt> ＿＿＿<dd>要素に主要ブロックボックスを生成させる。</dd> ＿＿＿<dt>inline</dt> ＿＿＿<dd>要素に1つ以上のインラインボックスを生成させる。</dd> ＿＿＿<dt>list-item</dt> ＿＿＿<dd>要素（HTMLのLI要素など）に主要ブロックボックスとリスト項目のインラインボックスを生成させる。リストとその整形についての例は[12.6.2 リスト]を参照せよ。</dd> ＿＿＿<dt><del>marker,compact</del></dt> ＿＿＿<dd>この値はCSS2.1で削除された</dd> ＿＿＿<dt>inline-block</dt> ＿＿＿<dd>行内要素として扱われるブロックを生成する。</dd> ＿＿＿<dt>none</dt> ＿＿＿<dd>要素には、整形構造にまったくボックスを生成させない（すなわちレイアウトに影響しない）。子孫要素にも同様にボックスを生成させない。この効果は、子孫要素の'display'に別の値を設定しても無効化できない。</dd> ＿＿</dl> ＿＿<ul class="CSS"> ＿＿＿<li><span>block</span>・・・・・・・要素に主要ブロックボックスを生成させる。</li> ＿＿＿<li><span>inline</span>・・・・・・・要素に1つ以上のインラインボックスを生成させる。</li> ＿＿＿<li><span>list-item</span>・・・・・・要素（HTMLのLI要素など）に主要ブロックボックスとリスト項目のインラインボックスを生成させる。リストとその整形についての例は[12.6.2 リスト]を参照せよ。</li> ＿＿＿<li><del>marker,compact</del>この値はCSS2.1で削除された</li> ＿＿＿<li><span>inline-block</span>・・・・行内要素として扱われるブロックを生成する。</li> ＿＿＿<li><span>none</span>・・・・・・・・要素には、整形構造にまったくボックスを生成させない（すなわちレイアウトに影響しない）。子孫要素にも同様にボックスを生成させない。この効果は、子孫要素の'display'に別の値を設定しても無効化できない。</li> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2013/01/15 06:05

回答ありがとうございます。定義リストがあるということを知らなかったので、大変勉強になりました。いままでは全てliタグで作っていたので……。 HTMLの仕様書に目を通すべきでしたね。詳細なサンプルありがとうございます。とても勉強になりました。 floatはよく多用してしまい、手間がかかっていたので、この方法は非常に勉強になりました。ありがとうございます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

DrFell
ベストアンサー率55% (305/551)

2013/01/14 07:53 回答No.1

html <ul> <li>項目……項目に関する説明文です。この説明文の途中で改行して文章を調節します。といっても途中でbrを入れるのは好ましくありません。ブラウザや閲覧者の設定により改行される場所が変わってきますので、表示が変になります。第一、見栄えに関する指定をhtmlに記述するのは正しくないとされています。</li> <li>要確認…老婆心ながら、MrWaterさんの確認ブラウザはIEのみですか？他のブラウザでも確認されているか気になります。他にもｃｓｓがあると問題ないですが。</li> </ul> <dl> <dt>項目……</dt> <dd>こちらは（ピンクの方です）、項目の方が2行で、説明が1行になると表示が崩れます。</dd> <dt>項目2…</dt> <dd>こちらは、定義リストで作成しました。上記ではMrWater さんを尊重して「箇条書きリストナンバー無しで」作成しましたが、言葉の説明でしたら定義リストがふさわしい気がします。</dd> </dl> css li{ margin-left:4em; text-indent:-4em;} dl { clear: both; background:#ffcccc; } dt { float: left; width: 4em; clear: both; } dd { margin: 0; padding-left: 4em; }

質問者