HTMLでぶら下げインデントは出来るの?
長文の2行目以降を字下げしたいんですが。
1行目を字下げする方法はあちこちにあるんですが、
2行目以降だけ字下げする方法が見つかりません。
1行目のインデントをマイナスにしたら、先頭の文字が
欠けてしまいました。誰か方法があれば教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

リストタグ<li>を使用すれば出来ると思います。


但し段落の先頭に入る記号(数字)についての種類は少ないですが・・・。
ちなみに、入れられる記号(数字)は以下の種類です。
記号:■、○、●
数字:1、A、a、I、i(後ろの2つはアルファベットを組み合わせてのローマ数字もどきになります。
例:6=VI、9=IX等。なので使いにくいかな?)
これ以外の記号(文字)を使用したい場合は他の方が言われていて方法になるかと思います。
リストタグの使用については文法書等を参考にして下さい。(一応参考URLも載せておきます。)

参考URL:http://www.hajimeteno.ne.jp/
    • good
    • 0

ぶら下げ ってことは段落先頭になんらかの記号や文字などが入るんだと思いますが、テーブルでレイアウトしてみたらいかがでしょう?


テーブルならまず殆どのブラウザで表示可能でしょうし。
    • good
    • 0

次のスタイルシートを使えばぶらさげインデントになります。

CSS
に未対応のブラウザでは希望のインデントにはならないかもしれま
せんが、みかけはともかくちゃんと表示はできるわけですから、そ
れでOKとすべきでしょう。

p.burasage {
margin-left: 1cm;
text-indent: -1cm;
}

スタイルシートを別に書くんじゃんなくて、HTMLに埋め込むなら、
<p style="margin-left: 1cm; text-indetn: -1cm;"> とかかな。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QVネックの下に着るTシャツ

Tシャツの上にVネックのセーターを着る場合、服の下に着るTシャツは同じVネックとクルーネックではどちらがいいんでしょうか?

Aベストアンサー

はじめまして。

VネックセーターにインナーTを合わせる・・・クルーでもVでも合います。ただ、合わせ方があると思います。

それはセーターのVが深い、また大きく広がる時はクルーの方が無難に合わせやすいと思います。胸元の肌が大きくはだけすぎるとだらしなく見えたり、きゃさな体格の場合貧弱にも見えます。バランス間隔で。Vの角度のバランスが合うならVのTシャツでも良いですけれどネ。

中ぐらいなら、Vでもクルーでもお似合いです。Vは角度が同等か少し狭めで小さ目。

浅い(小さい)ならばクルーで少し見せるか、寧ろ見えないようにした方がスッキリと思います。

参考になれれば幸いです m(__)m

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

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

(表示例)

タイトル
 内容
 内容
 内容

Aベストアンサー

#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;}
セレクタ{プロパティ:値}でcssは指定します。セレクタの事を勉強されるか、アメブロのどのテンプレートを使用していて、どの場所に問題の字下げを行いたいのか、見出しと箇条書きなのか、見出しと本文なのか、定義リストなのかを教えてください。
何を適用したいかわからない場合は、どのような見出しで、実際に字下げ部分に入る文章を教えてください。saruchan002 さんのブログは教えないでください(Okwave、教えてgoo内では自分のサイトのURLを教えることを禁じています)。

><dt><dd>ですと、テキスト選択で2行目以降の空白の行頭を選択してくれないので、自分としては使い勝手がよかったのですが。
<hn><p>でも、<hn><ul><li>でも、テキスト選択で2行目以降の空白の行頭を選択してくれないです。デザインを空白なんかで調整しようとしなければよいだけです。

#3さんや、#5さんのmargin-leftを使う方法、もしくはpadding-leftを使う方法が、ずばりの答えだと思います。が、ブログということが、私には引っかかります。

>自分の忘備として、既存のブログサービスを利用するつもりです。
>とりあえず、アメブロではmargin-leftを解釈してくれませんでした。

cssの詳細度というルールをご存知でしょうか?
同じ指定があった場合、どの指定を適用するかのルールです。ブログのテンプレで、該当箇所への指定が他にありませんか?それらに負けている可能性が高いです。例えばブ...続きを読む

QVネックのカットソーを着る時のアンダーウェア

今秋、Vネックカットソーを購入したのですが、このカットソーを着る時のアンダーウェアで悩んでいます。
Vネックの部分からアンダーウェアが見えないようにしたいのですが、どうしても見えてしまいます。
手持ちのアンダーウェアは、クルーネックT、VネックTです。
カットソーは特別深いVネックではないのですが、うまくいきません。
アンダーウェアを着ないということはしたくないのですが、皆さんどんなアンダーウェアを着ていますか?
またネットで購入できるお店があれば教えてください。

Aベストアンサー

リフォーム店にもよりますが私がいつもお願いしている所は1000円程度でやってもらいました。

ババシャツは無地で薄手の物ならあまり違和感無く着れると思いますが・・・
私はニットの時だけババシャツを着るので全然気にならないです^^;

Q2行目以降に上下左右のマージンをつけるには?

こんにちは。
現在、body{margin:15%;}を使って上下左右のマージンをつけています。
この度、左上に1行加えることにしました。
1行の後にひきつづき上下左右のマージンをつけるには、スタイルシートをどのように記述したらいいのでしょうか。
よろしくお願いします。

Aベストアンサー

CSS定義部分に、
.text{ margin:15%; }
として、
<p>最初の一行</p>
<p class="text">本文</p>
などとするのが普通でしょうかね。

QVネックトレーナーつくり

 秋冬用にトレーナーがどうしても必要なんですが、店で売られているのは丸首ばっかりです。私は丸首ってどうしても苦手というか、首元にかなり余裕を作りたいんです。

 そこで、自分で首元をカットしてバイアステープを縫い合わせてみたのですが、なんだか自分で縫い合わせたのが一目でわかるほどの下手な仕上がりになりました。

 http://www.lcv.ne.jp/~edward2/vnekku.html

 そこでVネックトレーナーに目を付けたんですが、ショッピングサイトで見たところおそらく既製品のVネックはちょっと首元のVが狭いように感じます。
 ということは、Vネックを自分で作るしかないかと思っているんですが、このサイトのVネックの作り方を見ても裁縫初心者なのでどうにもよくわかりません。普通の丸首トレーナーをVネックにするにはどういう道具と手芸用品が必要で、どうすればつくれますか?
 ちなみにミシンはあります

Aベストアンサー

補足します。
ちょっと気になったので検索してみました。
リブニットで検索してみて下さい。

検索したら出てきました。
1番上に出てきたものを載せておきますね。
http://www.n-shoukai.com/tu_n.html
出来ると良いですね。
頑張って下さい。

Qtext-indentによる字下げはIE6で不具合あるので使えない?

字下げをするときに、CSSでtext-indentを使った場合、IE6では印刷時に不具合があるようです。具体的には、ブロックが複数ページに跨った場合、次ページの最初の部分でブロックの途中なのに字下げが入ってしまいます。下のアドレスはそれに関する記事です。
http://members.at.infoseek.co.jp/cssbug/detail/winie/b084.html

これを避ける方法を知っている方がいらっしゃいましたら教えてください。全角スペースで字下げをするしかないのでしょうか。

Aベストアンサー

> みんな<p>のあとに全角スペースを1つ入れて字下げしているようなので、そうするしかないのかなと考え始めてます。

印刷時にもどうしてもインデントを表示させたいのであれば、残念ですがそれしか方法はないかもしれません。

※以下は蛇足です。ちょっと角度を変えて、

> 印刷時にも各段落の頭は全角1文字分字下げしたいのです。

もしこれが「印刷時にも”段落”の開始である事を強調させておきたい」という意図によるものであれば、印刷時だけインデントではない別のスタイルで「段落の開始」を分かり易くする、という考え方もあるかと思います。例えば印刷時だけ段落毎に余白を多めにするとか(もしくはマークや線を入れる、とか)。

QUネック・Vネックどっちがいいか?チラ胸毛は・・

28歳の男です。

カットソーやニットソーを選ぶときにUネック・Vネックで凄く悩むんですが、
女性受けするのは一般的にどっちのネックなんでしょうか?
また、Vネックだと少し胸毛が見えてしまうときが多いです。
やっぱり不潔に見られてしまうものでしょうか?

Aベストアンサー

私もよく分かりませんが…

女性受けするのは、Uネックなのでは ないでしょうか?
私は、どちらでも構わないと思いますが(^-^*)

Vネックは女性ぽく見えてしまうのかな?
と思います。

Q文章を字下げする方法にミスがないか不安です

以下のWebサイトの文章を、


(修正前)
項目……項目に関する説明文です。この説明文の
途中で改行して文章を調節します。
※画面の端一杯まで表示され、強制的に改行させられた文章です


以下のように修正したいと考えています。


(修正後)
項目……項目に関する説明文です。この説明文の
      途中で改行して文章を調節します。
※修正前のままだと見苦しいので『……』のあとに合うように、字下げしたいです。


上のような文章に直すために、HTMLとCSSには以下のように記述しました。すると、私が望むとおりのレイアウトに修正されたのですが、ひとつ不安があります。
というのも、以下のようにHTMLとCSSを記述すると、まだ続いている文の途中で改行してしまい、その文に対して字下げしているからです。

下記のHTMLとCSSは文法に問題があるでしょうか?
大変申し訳ありません。ご教授よろしくお願いいたします。
HTMLは、HTML4.01 Transitional。CSSは、2.1です。


/*---------- HTML部分 ----------*/
<ul>
<li>項目……項目に関する説明文です。この説明文の<br>
<span>途中で改行して文章を調節します。</span></li>
</ul>


/*---------- CSS部分 ----------*/
span {
display: inline-block;
width: ●em;
}

以下のWebサイトの文章を、


(修正前)
項目……項目に関する説明文です。この説明文の
途中で改行して文章を調節します。
※画面の端一杯まで表示され、強制的に改行させられた文章です


以下のように修正したいと考えています。


(修正後)
項目……項目に関する説明文です。この説明文の
      途中で改行して文章を調節します。
※修正前のままだと見苦しいので『……』のあとに合うように、字下げしたいです。


上のような文章に直すために、HTMLとCSSには以下のように記述しました。すると、私が望むと...続きを読む

Aベストアンサー

ミスがないか?
>項目……項目に関する説明文です。この説明文の
 の時点で、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">
<!--
dl.CSS{width:80%;margin:0.5em auto;position:relative;}/* とでもしておきます */
dl.CSS dd{margin-left:8em;margin-bottom:1em;text-indent:1em;background-color:white;z-index:10;}
dl.CSS dt{font-weight:bold;position:absolute;left:0;z-index:-1;}
dl.CSS dt:after{content:" ・・・・・・・・・・・・・・・・・";font-weight:normal;}

ul.CSS{width:80%;margin:0.5em auto;list-style:none;}
ul.CSS li{text-indent:-8em;padding-left:8em;margin:0 0 1em 0;}
ul.CSS li span,ul.CSS li del{font-weight:bold;}

-->
_</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

ミスがないか?
>項目……項目に関する説明文です。この説明文の
 の時点で、HTMLのマークアップは<dl>定義リストを使うべきです。
 これは、HTMLは文書構造を記述するものという決まりがあるからです。
 そうすることでスタイルシートを理解しないユーザーエージェントや検索エンジンであっても用語とその説明だと判断できるからです。

 もちろんリスト的なないようでしたら<li>でマークアップしても良いです。(あなたの文面からはDLだと思うのですが、具体的な前後関係がわからないので、どちらが適切かは判...続きを読む

QVネック 重ね着について

Vネックの重ね着について


VネックとVネックのTシャツを
重ね着するのはおかしいでしょうか?(どちらも半袖)



昔雑誌か何かで
確か俳優の山本裕典さん?
が黄色のVネックTの上に緑のVネックTを
重ね着してて
それが凄くかっこ良かったんです(´Д` )


出来ればそれがやりたいのですが
おかしく無いでしょうか?


街でしている人を見掛けた事がないので
不安です。

回答よろしくお願いします(ーー;)

Aベストアンサー

私、やります。
白のVの下から濃紺のVを覗かせて。
やるのはこのパターンだけです。因みに、やるのは夏だけで、下は半カーゴかダメージJ。

安い品物二つ買うだけだから、ダメ元で試してみたら?合わなきゃ各々単体で用いるだけのこったし。

※他にも、Vの下にヘンリーっていう手もありますよ。

Qcssで見出しが複数行になると先頭の画像と重なってしまいます

お世話になります。
以下のように先頭に画像付の見出しを枠で囲った上で
本文も枠内に記入するような形にしているのですが、

■css

.title1 {
height:12px;
}

.title2 {
border-radius:5px;
padding:6px 10px;
margin-left:10px;
font-weight:bold;
padding-left: 48px;
color: #000000;
background-color: #ffffff;
background-image: url(http://hogehoge.com/pointer.jpg);
background-repeat: no-repeat;
background-position: left;
}

.title3 {
border:2px solid #000000;
padding:30px 15px 10px;
margin-bottom:30px;
border-radius:5px;
}

■html

<div class="title1"><span class="title2">見出しテキスト</span></div>
<div class="title3">
本文テキスト
</div>


ブラウザの横幅に比例して枠の幅が変わるようなブログ上で掲載しているため、
見出しテキストが複数行になった場合、見出しの先頭の画像と重なってしまいます。
これを重ならないようにする方法はないでしょうか。
(画像は45pxの高さ)

※■が画像で実際には下のあああと画像の一部が重なってしまいます。

■ああああああああああああああああ
あああああああああ

※理想(テキストの左側が揃って画像と重ならない)
■ああああああああああああああああ
 ああああああああああああ

お忙しい中お手数をおかけしますが
ご教授いただけるようでしたらとても幸いです。
何卒よろしくお願い致します。

お世話になります。
以下のように先頭に画像付の見出しを枠で囲った上で
本文も枠内に記入するような形にしているのですが、

■css

.title1 {
height:12px;
}

.title2 {
border-radius:5px;
padding:6px 10px;
margin-left:10px;
font-weight:bold;
padding-left: 48px;
color: #000000;
background-color: #ffffff;
background-image: url(http://hogehoge.com/pointer.jpg);
background-repeat: no-repeat;
background-position: left;
}

.title3 {
border:2px solid #00...続きを読む

Aベストアンサー

divを安易に使わないように・・
・HTMLはそれを構成する要素を示すタグでかこって文書構造を示します。
  <h1>ここは見出し</h1><p>ここから一つの段落・・</p>
 これでは【文書構造を示しきれないために】、DIVやSAPNAにid属性やclass属性と併用して文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
・HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。
※質問とは直接関係ないのですが、とっても重要なことですから、

その上で、本文記事---HTML5では<section>要素--内の見出しを装飾したしたいとします。
<div class="section">
 <h2>本文見出し</h2>
 <p>HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。</p>
</div>
とマークアップされていたとします。・・・一目でわかるようにメンテナンスも楽でしょ。

 その上でスタイルシートは
div.section
div.section h2{ /* 本文中の見出し */
  margin-left:10px;
  color: black;
  background-color: white;
}
div.section h2:before{
  content:url(/image/pointer.jpg);
  float:left;
}

HTML5だと、
<section>
 <h2>本文見出し</h2>
 <p>HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。</p>
</section>
section h2{ /* 本文中の見出し */
  margin-left:10px;
  color: black;
  background-color: white;
}
section h2:before{
  content:url(/image/pointer.jpg);
  float:left;
}

(補足)
 class名をつけるときには文書構造を示す物にしましょう。メンテナンスがとても楽になります。

 記事が段落一つしかない場合でしたら
<dl>
 <dt></dt>
 <dd></dd>
 <dt></dt>
 <dd></dd>
</dl>
のように定義リストを使うほうが文書構造上は適しているかもしれません。

divを安易に使わないように・・
・HTMLはそれを構成する要素を示すタグでかこって文書構造を示します。
  <h1>ここは見出し</h1><p>ここから一つの段落・・</p>
 これでは【文書構造を示しきれないために】、DIVやSAPNAにid属性やclass属性と併用して文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
・HTML5では、更に厳しく他に文書構造を示す要素がない時の最後の最後の手段としてしかDIVは使えなくなります。
※質問とは直接関係ないのですが...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング