• ベストアンサー

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

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

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

  • ベストアンサー
  • selene_pl
  • ベストアンサー率49% (102/207)
回答No.1

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

gifuko
質問者

お礼

ありがとうございました。 おかげで最初の1行はマージンなしで、それ以降はマージンをつけてレイアウトすることができました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • urusyun
  • ベストアンサー率52% (10/19)
回答No.2

下記の人に加えてです。 段落ごとにmarginを入れたいならば、 p { margin : '15%'} としておけば、 <p>最初の1行</p> <p>本文</p> <p>本文2</p> でもいけますね。 #最初の一行は、タイトル的ならば、<hn>(<h1>とか)を #使用するべきなのかなぁ…

gifuko
質問者

お礼

回答ありがとうございます。参考にしますね。 マージンをつけずに最初の1行に Home > 現在のページ  としたかったので、今回初めて質問してみました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 上下マージンの取り方(CSS)

    スタイルシート(CSS)に携わる方々へ、 皆様の知恵を拝借したく、質問させていただきます。 段落間(P,UL等)の上下マージンの取り方についての質問です。 (A)予め段落の上マージンをゼロにリセットし、段落間は下マージンで操作  例:  p,ul { margin-top:0; margin-bottom:1em; } /* リセット */  .hoge { margin-bottom:0.5em; } /* 上の段落に指定 */ (B)予め段落の下マージンをゼロにリセットし、段落間は上マージンで操作  例:  p,ul { margin-top:1em; margin-bottom:0; } /* リセット */  .hoge { margin-top:0.5em; } /* 下の段落に指定 */ サイト構築において、(A)か(B)で悩んでいます。 皆様の意見を「具体的な理由」もあわせてお教え下さい。

  • コンテンツを入れるboxを上下左右ともに真ん中にしたい

    コンテンツを入れるboxを上下左右ともに、スタイルシートで真ん中に設置する方法を知っていたら教えてください。 左右の場合だと「margin:0 auto」や「text-align:center」などありますが、上下の場合はどうすればいいのでしょう? 詳しくは図を見て頂けれるとイメージつきやすいかもしれません。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • ページのマージン・・・

    ページをブラックの背景で制作したいのですが、ブラウザで表記したところ、IEやOperaなど、どのブラウザでも、上下左右に20px程度の白い余白部分が現れ、その内側がブラックの背景で表示されます。 スタイルシート上でも、body{margin:0px;}の指定をしているのですが、原因がわかりますでしょうか。

    • ベストアンサー
    • HTML
  • フレーム構造のページで左右上下の余白を0にしたいのですが、以下の何れの

    フレーム構造のページで左右上下の余白を0にしたいのですが、以下の何れの方法でも ほとんど変化がありません。 1.<frame src="green.html" marginwidth="0" marginheight="0"> 2.<body style="margin:0px;padding:0px;"> 3.<style type="text/css">    <!-- body { margin:0px;padding:0px;}   -->   </style> 確実な方法を教えてください。 宜しくお願い致します。

    • 締切済み
    • CSS
  • マージン部分の表示がうまくいかない

    素朴な質問です。 キミドリのDIVの中にテキストが入る「A(青)」のDIVが入れ子になっています。 テキスト量に応じてそれぞれ縦のサイズを可変させます。 親のキミドリを基準に上下から50pxのマージンを取る意図で「A(青)」に“margin-top:50px”“margin- bottom:50px”を設定しているのですが、Safari3、Firefox3では上下50pxのマージン部分がキミドリで表示されません。 おそらく表示されないのが正しいCSSの仕様通りだとは思うのですが、マージン部分もキミドリで表示したい場合ははどのようにソースを書けばいいでしょうか? 親のキミドリにpaddingを設定するしかないのでしょうか? 以下ソースです。 ご教示よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>サンプル</title> </head> <body style="margin:0px;padding:0px;"> <div style="background:#0F0;width:220px;"> <div style="width:100px;background:#00F;margin-top:50px;margin-bottom:50px; margin-left:10px;">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</div> </div> </html> </body>

  • IEの余白とマージン

    IE限定で、あるページのみページ設定の余白以下にマージンを指定することは可能でしょうか。 雰囲気としては <style type="text/css"><!-- body { margin-top: -20px;} --></style> のように余白よりマイナスにする感じなのですが。 #やりたいのはTOPマージン。

    • ベストアンサー
    • CSS
  • プリンタが変わっても大丈夫なマージンは?

    会社の業務で使うエクセルのシートを作っています。 パソコンに詳しくない担当者でも、定められたセルに数値を入力すれば、後は印刷ボタンを押すだけ、とするつもりです。 で、このシートの手離れを良くしたい。頻繁に担当者から問い合わせがくるのを避けたいのです。 そこで、気になるのがプリンタのマージンです。このシートはかなり密度が高いので出来るだけマージンを少なくしたいのですが、逆にプリンタを変えた際に新しいプリンタからシートの設定より大きなマージンを要求されて「2ページにわかれた」と言って内線が掛かってくるのは遠慮したい。部署単位でプリンタを持っているので、会社全体で見た場合プリンタの変更頻度は結構高いのです。 上下左右のマージンをどの程度とっておけば、まあ大丈夫だろう、となるでしょうか?

  • マージン外側に壁紙を張りたい

    <div style="width:800px; margin:auto auto;"> これでホームページを中央に来るようにしています。 マージンの左右外側に壁紙を貼り付け、中央は白いホームページにしたいのです。 よく見るじゃないですかそういうHPを。 あれは、どうすればいいでしょうか? よろしくお願いします。 Dreamweaverを使っています。主にテーブルで作っています。

  • スタイルシートで、マージン0に出来ません

    夜分に失礼します。 個人の趣味のホームページですが ブラウザ上部と左部のマージンを0に出来ずに困っています。 スタイルシートで、margin 0;としても、マージン0にならないのに BODY句に直打ちすると、マージン0になるので、もう、ワケが分かりません。 ご参考までに、ソースを記します。 また、ブラウザはIE6です。 どうぞ、宜しくお願いします。 <HTML> <HEAD>   中略 <STYLE type=text/css> BODY_i{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: "MS ゴシック","Osaka-等幅",monospace; font-size:12pt; color:#696969; line-height:150%;} .photo1{width:982px; height:730px; background-color:#DCDCDC; border-style:solid ridge ridge solid; border-width:1px 2px 2px 2px; border-color:#DCDCDC #DCDCDC #DCDCDC #DCDCDC; text-align:center; vertical-align:middle; padding:11px 11px 11px 11px;} </STYLE> </HEAD> <BODY class=BODY_i> <!-- <BODY topmargin=0 leftmargin=0> --> <P class=photo1> <IMG SRC="test_CIMG6224.JPG"> </P> </BODY> </HTML>

  • tbody要素に削除出来ないマージンが入る

    table要素の thead要素及びtbody要素についてですが この2つの要素は内部的に margin: 2px; が指定されたような感じになっています。(firebugなどで確認) つまり、上下左右にマージンが2px自動的に入ってます。 もちろん、table要素とtbody要素には、margin及びpadding及びborderは0を設定しています。 このマージンのようなものを取り去りたいのですが margin : 0px;などとしてもこのマージンのようなものを取り去ることは出来ませんでした。(ツールでみると、マージン及びパッディングは0なので当たり前ですが) table要素を使う限り、この2pxというものは自動的に挿入され、CSSでは取り去ることは無理なのでしょうか? 回避策としては、margin: -2px;で回避することは可能みたいなのですが そもそもどうしても2pxが入ってしまうのか、またそれがなぜCSSで設定出来ないようになっているのか 疑問に思っています。 これは、firefox3.6(firebug) 及び ie8(開発ツール)で確認しました。 分かりにくい説明かもしれませんが宜しくお願いします。

    • ベストアンサー
    • HTML
このQ&Aのポイント
  • 彼50代医師、私30代看護師、W不倫を始めて約1年が経過しました。彼の夫婦仲は冷え切っていて、奥さんからも冷たく当たられているようです。
  • 私は、まだ小学校低学年の子供が2人いて夫とはレスですが、離婚するつもりは、ありません。あくまで寂しさを埋めるため、恋愛気分を味わうために不倫しています。
  • 歳が離れている事もあり大変可愛がってくれるのです。独身者との不倫ではないし、まして小さな子供もいるのに、本気だったら、バカ?と思っています。不倫や遊びは初めてではないみたいです。
回答を見る