- ベストアンサー
HTMLで、2行目以降をほぼ1字下げたい
yui56544の回答
- yui56544
- ベストアンサー率69% (85/123)
ｈ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; } これを元に数値を調節すれば望むものができるのではないでしょうか？
関連するQ&A
- アメブロでの行揃えの記述方法
アメブロの本文の行頭を以下のように揃えたいです。 検索して見つかった記述例はolやliが入ったもので、行頭に番号などがついてしまいます。 行頭に番号かつかず、行頭ぞろえができるcssやhtmlタグの記述をお教え願えますでしょうか。 以下例のように、 一行目は字下げしません。 二行目と三行目は、右端で折り返すほどの長文です。 折り返した行頭も字下げします。 -----以下表示例 ・タイトル 二行目 三行目
- ベストアンサー
- HTML
- どなたか知恵を貸していただけないでしょうか。
どなたか知恵を貸していただけないでしょうか。 定義タグを使って以下のような文書を作ってます。 (1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト てきすとてきすとてきすとてきすと てきすとてきすとてきすと １.<dl><dt> ~ </dt></dl>で囲みました。 テキストが長すぎて、改行した時に↓次の行の先頭文字が(1)と同じところまできてしまうので困っています。 (1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト てきすとてきすとてきすとてきす てきすとてきすとてきすと もともとの<dt>タグは改行した時、インデントが次の行にも効かないものでしょうか。 以前は効いていたページもあったのですが、スタイルシートが変わって <dt>タグにいろいろ設定してしまったので、もともとの設定が効かなくなったのでしょうか。 2.<dt><dd>の横並びという方法も考えました。 XHTML <dl class="list309"> <dt>（1）</dt><dd>テキストテキスト......</dd> <dt>（2）</dt><dd>テキストテキスト......</dd> <dt>（3）</dt><dd>テキストテキスト......</dd> </dl> dl.list309 dt { clear: left; float: left; margin: 0 0 0 1em; width: 1em; padding-left: 0px; } dl.list309 dd { margin-bottom: 1em; margin-left: 0.5em; } ところが、(3)の本文中↓で<dd>を使いたいので困っています。 「 てきすとてきすとてきすとてきす てきすとてきすとてきすと」 いったいどうすればよいでしょうか。
- ベストアンサー
- HTML
- DD,DT,DDを横並び。paddingとmarginと無指定で
DD,DT,DDを横並び。paddingとmarginと無指定で 下記の内どれが一番使われているのでしょうか？ 理由も教えていただけれるとありがたいです。 dl,dt,dd{ margin:0; padding:0;} dt{ float:left; width:8em; } .list0 dd{ padding-left:7em;} .list2 dd{ margin-left:8em;} <div> <dl class="list0"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <dl class="list1"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <div class="list2"> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> </div> </div>
- ベストアンサー
- HTML
- HTML list-styleに見出し
HTMLで、ブラウザ上での表示が 以下の様になるよう組んでいます。 ----------------------------------- コンテンツ大見出し （←大見出しはh3を使用予定） 1．見出し見出し見出し見出し 内容テキスト内容テキスト内容テキスト内容テキスト 内容テキスト内容テキスト内容テキスト内容テキスト 2．見出し見出し見出し見出し 内容テキスト内容テキスト内容テキスト内容テキスト 内容テキスト内容テキスト内容テキスト内容テキスト ～以下同様7、8項目くらい下に続く ----------------------------------- この場合、1～7項目まで続く、いわゆるリストなので list-styleを使った方がいいかな、と思い、当初 ↓ ----------------------------------- <ul> <li> <h4>見出し見出し見出し</h4> テキスト内容テキスト内容テキスト内容テキスト内容 </li> <li> <h4>見出し見出し見出し</h4> テキスト内容テキスト内容テキスト内容テキスト内容 </li> ～ </ul> ----------------------------------- と書いてみましたが、 <li>の中には<h>タグを入れるべきではないと拝見し、 では<dl>を使って ↓ ----------------------------------- <dl> <dt>見出し見出し見出し</dt> <dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd> <dt>見出し見出し見出し</dt> <dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd> ～ </dl> ----------------------------------- と組んでみました。 が、そうすると<dt>に番号がふれないのです。 どこかのサイトで、以下の様にスタイルシートに記述すればOKとありましたが dt { display: list-item; list-style: disc outside; … } 上記を記述しても実現できませんでした。 勿論「disc」の部分を「decimal」にしました。 実現方法だけで考えれば、 ・<dl>を使用して、見出し文の頭に自分で数字をつける ・<ul><li>を使用して、見出しの部分だけ<p>か何かで囲み、 スタイルシートで文字の大きさ太さを調整する ・list-styleではなく、各項目<div>で囲み、見出しは<h>タグを使う など、方法はあるのですが、 ・番号がふられている見出しはそれなりに重要視しているので できればhタグか、見出しだと分かるタグを使用したい。 ・番号がふられているリスト（のようなもの）なのでlist-styleが適当のような気がする。 このような場合、皆さんはどう記述されていますか？ どのような記述が正しいのでしょうか。 宜しくお願いします。
- ベストアンサー
- CSS
- CSS、floatとclearの併用でIEのみ他と違う表示
リストの表示で、 dtとそれに続くddの組を１行ずつで表示させたいと思います。 DOCTYPEはHTML4.01 Transitionalです。 <dl> <dt>Windows</dt><dd>IE6.0</dd><dd>Firefox1.5</dd><dd>Opera8.5</dd><dd>Netscape7.1</dd> <dt>MacOS</dt><dd>Safari1.2</dd><dd>Firefox1.5</dd><dd>Opera8.5</dd><dd>Netscape7.1</dd> <dt> </dt><dd>補足事項１</dd> <dt> </dt><dd>補足事項２</dd> </dl> <style> dt { clear:left; float: left; } dd { float:left; } （その他margin等の指定あり） とすると、FirefoxやOperaではWindows、MacOS、補足事項の各行に分けられて表示されますが、 IE6ではdtのみ改行された表示になり、ddはすべて、Windowの行に１行で表示されてしまいます。 とりあえずの対策として、 td{ _float:none; } を指定して、強制的に改行していますが、 これでは補足のところの が改行されて、浮いてしまいます。 dtの直前で改行、ddの後ろとddの前は改行なし、という表示は出来ない物でしょうか？ テーブルでの表示、および、display:inlineにして<br>を入れるのはNGとさせてください。 <dd style="clear:left;"> </dd> を入れても、表示は変わりませんでした。 目標とする表示 Windows IE6.0 Firefox1.5 Opera8.5 Netscape7.1 MacOS Safari1.2 Firefox1.5 Opera8.5 Netscape7.1 補足事項１ 補足事項２
- ベストアンサー
- HTML
- ddの内容が多い時のdtの背景を伸ばしたい
dtとddをfloatで横並びにしています。 dtの背景色が途中で切れてしまいます。 例えば、 <dl> <dt>場所 </dt> <dd>あいうえお市かきくけ町<br /> さしすせ公園<br /> 長文～～～～～～… </dd> </dl> とした場合。dtには背景色を指定、ddの内容が複数行あってもdtの背景色が1行分だけで終わってしまいます。 ddの内容が収まっている高さまでdtの背景色を伸ばすにはどうしたら良いでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- 単語の右寄せ配置で１行下がる
”TOP”のリンクを”タイトル”と 同じ行の右端にしたいのですが 旧Internet Explorerだけ１行下がります。 同じ行にしたいのですが。どうすればよいでしょうか？ --------------------------------- 上の例、タイトル TOP 説明文説明文説明文、、、 --------------------------------- 下の例、タイトル TOP 説明文説明文説明文、、、 --------------------------------- 上の例にしたいけど、下の例になってしまう、、、 <dl> <dt>タイトル <a href="#" style="float:right;">TOP</a></dt> <dd>説明文説明文説明文、、、</dd> </dl> 上記のdtとddは例なので１つですが連続で複数設定しています。 dt内はインラインしかできないようなのでＰやブロックにしないでフロートさせました。 タイトルとTOPを逆にしたら可能ですが流れがなんか変ですし、、、 ハックもできれば使いたくないのですが、どうでしょう？ 調べたり色々やったのですがわかりません＿/￣|○
- ベストアンサー
- HTML
- ブラウザの行ピッチの違い
IEとChromeで同じようにhtnlを記述しても行の高さが変わってしまいます。 line-height:1.2em; と指定 していますが、少しズレてしまいます。 ぴったり合わせることは出来ないんでしょうか？
- 締切済み
- HTML
- 定義リストに下線をつけたいと思っています。
定義リストに下線をつけたいと思っています。 （実際は、dt=日付、dd=お知らせ内容を記載するので、１行ごとの仕切りとして） dt,ddの両方に下線をつけたところ、 ・"compact"を入れると下線がdtとddの下線が重なり、破線が一部直線になる ・"float:left；"と幅指定をするとdtとddの間に2pxの隙間ができてしまう という問題がおきます。 そこで、ddにのみ下線をつける方法で回避しようとしました。 が、下記の記述では”dtの前半分くらいに下線がつかない”という現象になります。 《CSS》 dt { width: 70px; margin-left: 5px; padding: 5px 0 5px 0; } dd{ border-bottom:1px dotted #999 ; padding: 5px 0 5px 70px; } 《HTML》 <dl compact> <dt><img src="./image/aaa.png">2010.9.1</dt><dd>*****</dd> <dt><img src="./image/aaa.png">2010.9.2</dt><dd>****</dd> <dt><img src="./image/aaa.png">2010.9.3</dt><dd>***</dd> </dl> どのようにすれば、きれいにdtの最初からddの最後まで下線がひけるでしょうか。
- ベストアンサー
- CSS
- Excelで指定行以降を非表示にする方法
Excelで指定行以降を非表示にする方法 Excelで例えば100行目以降を表示しないように設定できるでしょうか？ 列の場合は簡単でAA列以降を表示しなくないなら、 AA～IV列を選択して右クリック→表示しない(H) で出来ます。
- ベストアンサー
- オフィス系ソフト