ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：takeetakee XHTML+CSS　リスト内であらかじめ改行させたい場合
困り度：
  • 困っています
 HTMLからXHTML+CSSに移行しているのですが、
不慣れなため、改行の解釈で苦労しています。
いま悩んでいる部分はリストの部分です。

●日時１　会場名１　都市１
●日時２　会場名２　都市２
●日時３　会場名３　都市３
　　　　　　・
　　　　　　・
　　　　　　・
というようなリストなのですが、スペースの問題で、

●日時１　会場
名１　都市１
●日時２　会場
名２　都市２
●日時３　会場
名３　都市３
　　　・
　　　・
　　　・
こんな風に自動で改行されています。そこで、

●日時１
　会場名１
　都市１
●日時２
　会場名２
　都市２
●日時３
　会場名３
　都市３
　　・
　　・
　　・
このように、あらかじめ区切り良く改行して見せたいのですが、
どのように表記するのが良いと思われますか？
よろしくお願い致します。
質問投稿日時：08/03/26 04:31
質問番号：3895314
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：abril > dtに対して、dlが大きくインデントしてしまいますが、
> これは調整がきくのでしょうか・・・。ちょっと気がかりです。

上記は「dtに対して、"dd"が大きくインデント」ですよね？
ディフォルトでは（ブラウザ依存の）インデントが与えられていますので何もスタイルを定義しなければそうなります。
CSSで、
---------------------------------------------------------------------
dl, dt, dd {
padding: 0;
margin: 0;
}
---------------------------------------------------------------------
と、余白を初期化しておけば、インデントはなくなります。
余白を付けたい場合は、場面場面で必要に応じてclassセレクタなどで調整して下さい。
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/03/28 13:35
回答番号：No.5
この回答への補足お礼の欄に間違った書き込みをしましたので、補足に書き込みます。
「dtに対して、"dd"が大きくインデント」でした。
ご親切にありがとうございました。すっきりしました。
貼付けて頂いたCSSは、早速使わせていただきました。
この回答へのお礼リストを入れ子にするという考え方なかったので、とても参考になります。
どうもありがとうございました。

回答

 
回答者：abril 構造をシンプルにしたいなら、定義リスト<dl>を使うという手も有りかと。
----------------------------------------------------------------------
<dl class="hogehoge">
<dt>日時1</dt>
<dd>会場名1</dd>
<dd>都市1</dd>

<dt>日時2</dt>
<dd>会場名2</dd>
<dd>都市2</dd>

<dt>日時2</dt>
<dd>会場名2</dd>
<dd>都市2</dd>
</dl>
----------------------------------------------------------------------
hogehogeのスタイル設定はCSSでお好みで。
「日時」に対する「会場」と「都市」という意味づけからすれば定義リストでも論理構造に問題ないと思います。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/03/26 13:09
回答番号：No.4
この回答へのお礼dlタグを覚えることができて、良かったです。
どうもありがとうございました。
定義という考え方はいろいろな場面で使えそうですね。

dtに対して、dlが大きくインデントしてしまいますが、
これは調整がきくのでしょうか・・・。ちょっと気がかりです。

回答

良回答10pt
回答者：buntan_bun 質問文を読む限りでは「箇条書きリスト（unordered list）の中にある箇条書きリスト」という文書構造のようですので、個人的には以下のようなマークアップが妥当だと思います。

<ul>
<li><ul><li>日時１</li><li>会場名１</li><li>都市１</li></ul></li>
<li><ul><li>日時２</li><li>会場名２</li><li>都市２</li></ul></li>
<li><ul><li>日時３</li><li>会場名３</li><li>都市３</li></ul></li>
</ul>

※list-style 等その他の見栄えに関する表現については、 CSS にて定義することが望ましい。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/26 11:55
回答番号：No.3
この回答へのお礼リストを入れ子にするという考え方なかったので、とても参考になります。
どうもありがとうございました。

回答

 
回答者：taloo XHTMLですね。すみません。
<br>ではなく<br />と書いて下さい。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/26 05:08
回答番号：No.2
この回答へのお礼ありがとうございます。
XHTMLでは<br />なんですね。とても便利です！
試したところ奇麗になりました。

ひとつ気になるのですが、大きなサイトのソースを見ると
ほとんど<br />はつかってません。
なにか不都合でもあるのでしょうか・・・。

回答

 
回答者：taloo <ul>
<li>日時１<br>会場名１<br>都市１</li>
<li>日時２<br>会場名２<br>都市２</li>
<li>日時３<br>会場名３<br>都市３</li>
</ul>
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/26 05:04
回答番号：No.1
この回答へのお礼この回答にお礼をつける(質問者のみ)
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ