HP作成時のリストやインデントの設定について
- DreamweaverCS4を使ってHP作成時にリストやインデントを設定する方法について教えてください。文章中の特定の部分をリストにするためにはどうすれば良いでしょうか？また、リストにすると1行の空白ができてしまいますが、この行間を調整する方法があれば教えてください。
- HP作成時のリストやインデントの設定方法について教えてください。DreamweaverCS4を使用しています。特定の部分をリストにするにはどうすれば良いですか？また、リストにすると行間が広がってしまいますが、行間を調整する方法があれば教えてください。
- DreamweaverCS4を使用してHPを作成しています。リストやインデントの設定方法について教えてください。特定の文章をリストにするにはどうすれば良いですか？リストにすると1行の空白ができるのですが、行間を調整する方法があれば教えてください。
- ベストアンサー
HP作成時のリストやインデントの設定について
DreamweaverCS4を使っています。 文中にリストやインデントを挿入したいと思っています。 ------------------------------------ タイトル文1 ・文章1 ・文章2 タイトル文2 ------------------------------------ という感じに「文章～」の部分がリストになります。 ------------------------------------ <style type="text/css"> <!-- li,ul { margin: 0 0 0 1em; padding: 0; } li,ol { margin: 0 0 0 1em; padding: 0; } ------------------------------------ リストの前の空白部分の調整方法はネットで調べ上記の感じで調整できました。 ですが、リストにすると「タイトル文1～・文章1」や「・文章2～タイトル文2」の間のように 1行文の空白が出来てしまいます。 この行間を半分くらいにする、もしくはなくすことは可能でしょうか？ 仕様と言われてしまったらそれまでですが、やり方があれば調整したいと思い質問させていただきました。 よろしくお願いします。
- gomashion
- お礼率77% (46/59)
- ホームページ作成ソフト
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
リストで上下方向のマージンやパディングを0にされているので、他の要素をうたがいましょう。チェックするときにだけすべての要素を線で囲むと原因が浮き出てくることがあります。お試しあれ。 <html> <head> <style> li,ul,ol { margin: 0 0 0 1em; padding: 0; } h2{/*勝手にｈ2にしました。marginとpaddingを0にしています。*/ margin:0; padding:0; } *{ border:solid #f00 1px;/*すべての要素を赤線で囲む*/ } </style> <title>無題ドキュメント</title> </head> <body> <h1>ページタイトル</h1> <h2>タイトル文1</h2> <ul> <li>文章1</li> <li>文章2</li> </ul> <h2>タイトル文2</h2> </body> </html> 原因がわかれば、 *{ border:solid #f00 1px;/*すべての要素を赤線で囲む*/ } を外せばいいです。 また、ブラウザによってはボタンを押すだけでアウトラインをborder:solid #f00 1px;などといれずに表示するものもあります。そういうものも使うことを視野にいれてもいいのではないでしょうか。
関連するQ&A
- リストの入れ子とインデント
お世話になっております。 リストを入れ子で作成すると、自動的にインデントが設定されますね。 例えば下記のようなリストだと、ワインの部分が少しインデントされて 引っ込みます。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </ul> このリストを画像の右側に配置したとき、リストの行頭記号がインデント されずに全て揃ってしまうのです。 こんな感じです。ワインの部分がインデントされません。 ↓↓ ●日本酒 ●ビール ●ワイン ○赤ワイン ○白ワイン ○ロゼワイン imgタグの中にaling="left"と記述しても、スタイルシートを使っても 結果は同じでした。 ワインの部分の<li>をスタイルシートのmargin-leftを使っても 引っ込みません。 画像を左に、リストを画像の右側に配置して、行頭記号もインデントされるようにしたいのですが、どうすればいいでしょうか。 よろしくお願い申し上げます。
- 締切済み
- HTML
- リスト（ul / li）タグの左インデントの解除
HTML、CSSの初心者です。 リスト（ul / li）タグの左インデントの解除の仕方がわかりません。 IE系とMozila系でインデント解除の方法を教えていただけないでしょうか。 ◆現在の書き方 ----------------- ・HTML <ul id="navi"> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul> ----- ・CSS #navi ul {list-style: none; margin: 0; padding: 0;} #navi li {list-style: none; float: left; margin: 0; padding: 0;} ----------------- よろしくお願いいたします。
- 締切済み
- HTML
- 1.より左の空白を調整するには
<html> <head> <title>test</title> </head> <ol> <li>1行目</li> <li>2行目</li> </ol> </body> </html> というようにolを使った場合、 1. 2. となりますが、 1.より左の空白を調整するには どのようなcssを書けばいいでしょうか？ 空白を短く、少なくしたいです。 ol { display: block; list-style-type: decimal; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } これのうちのどれかですか？
- ベストアンサー
- CSS
- [正規表現][入れ子]ネストされたリストをインデントに置換したい
[正規表現][入れ子]ネストされたリストをインデントに置換したい preg_replaceかpreg_replace_callbackを使って、 ネストされたリストタグを全角空白によるインデントに書き換えたく思っています。 （携帯表示するため） 1階層目のliならインデントひとつ。 2階層目のliならインデントふたつ。 ・ ・ ・ という具合にしたいのです。 以下は全角空白をわかりやすくするために□で置き換えました。 ---------------------------------------------------------------------------- 【現在のHTML】 文章1 文章2 <ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> </ul> <ul> <li> <ul> <li>リストあ</li> <li>リストい</li> <li>リストう</li> </ul> </li> </ul> ---------------------------------------------------------------------------- 【置換完了後のブラウザ表示】 文章1 文章2 □リストA □リストB □リストC □□リストあ □□リストい □□リストう ---------------------------------------------------------------------------- 【置換完了後のHTMLのイメージ】 文章1 文章2 <div> <div>□リストA</div> <div>□リストB</div> <div>□リストC</div> </div> <div> <div> <div> <div>□□リストあ</div> <div>□□リストい</div> <div>□□リストう</div> </div> </div> </div> ---------------------------------------------------------------------------- どうぞ、よろしくお願い致します。
- ベストアンサー
- PHP
- リストで行間を指定したい
リストで「情報」のテキストとリスト1行目「その1」の行間だけを指定したいのですが、可能でしょうか。 ul { list-style-image: url('image/arrow.gif'); } li { margin-bottom: 0.2em;} ----- <p>情報</p> <ul> <li>その1</li> <li>その2</li> </ul>
- ベストアンサー
- HTML
- Dreamweaverでリストを作成するとボックスからずれてしまいます
DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- インデントについて
基本的な質問ですが、リストのインデントの仕方について皆さまはどうされていらっしゃいますか？ リストの中の1行をインデントする場合に前の行の終了タグ</li>の前に新規リスト<ul><li>hoge</li></ul></li>を入れれば表示上は改行されますが、リストの行の中に新規リストを入れるのはマークアップ上正しいのでしょうか? また、段落のインデントは段落の前後にblockquoteを入れてインデントをかけるという方法もありますが、引用文でもないものを表示効果のねらいでblockquoteを使うのは正しいのでしょうか? いずれも、各行内にクラスを割り当ててCSSでマージンを設定する方が妥当なのでしょうか？
- ベストアンサー
- HTML
- CSSについて リスト表示のリストマークの表示位置
カテゴリをリスト表示すると左揃いにならず、 なぜが左に余計な空白というか空間ができてしまいます。 リスト表示のリストマークの表示位置をもっと左にするにはどうすればいいですか？ /* カテゴリー */ div#sidebar-left li {font-size: 0.75em; list-style-type: none; background-image: url(listmark.png); background-repeat: no-repeat; padding-left: 16px; margin-bottom: 4px; vertical-align: top} div#sidebar-left li a{color: #000000; text-decoration: none} div#sidebar ul{padding: 0; margin: 8px 8px 20px}
- 締切済み
- ブログ
- cssに詳しい方ご教授ください
cssは概念はなんとなーくわかるのですが、 以下のcssについて教えてください。 ul.list05 { list-style-type: none; margin: 8px 0 10px 0; } ＞ulの部分をlist05でspanなどで囲った部分でしょうか？ ul.list05 li { padding-left: 0.6em; text-indent: -1.3em; font-size: 86%; line-height: 140%; } ＞ulの部分をclassなどでlist05を指定したらliに反映される部分でしょうか？ ul.list05 li.list01-1 { margin: 0 0 5px; padding-left: 2.0em; text-indent: -2.8em; font-size: 86%; line-height: 140%; } ＞ulをlist05でclassなどで指定し liはspanでlist01-1を定義すればいいのでしょうか？ 初心者過ぎて質問の意味もわからないかもしれませんが、 ご教授いただけると幸いです。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法は？
HTMLの<li>タグでリスト文章をつくるとき、list-style-positionでoutsideにしているボックスの外にリストマーカーが配置されてしまうので論外ですし、かと言ってinsideにしても<li>タグ内の文章の二行目以降がリストマーカーと同列に配置されてしまい、<li>内の文章よりも左側にリストマーカーがはみ出してくれないのでリストマーカーが<li>内の文章に埋没してしまって見にくくて困っており、回避策を探しております。 リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法はないのでしょうか？ 【現在の問題な状態】 ● list-style-positionをoutsideにした場合：リストマーカーがボックスモデルからはみ出してしま ってしまう問題がある ● list-style-positionをinsideにした場合：リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 【希望する正しい状態】 ● list-style-positionをoutsideにした場合：リストマーカーがボックスモデルからはみ出してしま ってしまう問題がある ● list-style-positionをinsideにした場合：リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 宜しくお願いいたします。
- 締切済み
- HTML
お礼
返事が遅くなり申し訳ありませんでした。 時間が無くまだ試せていませんが近いうちに試してみたいと思います。 取り急ぎお礼まで。