• ベストアンサー

空白行について(できればCSS)

こんにちは! デザイン上、どうしても2行分以上の空白行が欲しいときがあります。 現状でやってる方法としては<hr>タグの高さで調節か<pre>タグで間に改行を入れて誤魔化しています <br>タグの連続はいけないと言われました。これは改行タグであって空白行を作るものではないと CSS使ってて、これからなくなるタグなんかも排除しているところなので 間違いのない方法を知りたいのです。 そこで、2行分とか3行分とかの改行をする際に、他にどんな方法があるか教えてください! なんとなく今自分がやってる方法は自信がありません。

noname#11353
noname#11353
  • CSS
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • JeanneNet
  • ベストアンサー率48% (100/208)
回答No.1

こんにちは、じゃんぬねっと です。 margin とかで空の空間を作れば良いのでは? <p style="margin-bottom:20px">  うんたらかんたら。<br>  ほげほげ、ふーばー。 </p> <p>  おんどぅるるらぎったんでぃすかー!!<br>  ダヂヤーナザーーーン。 </p> とか。 CSS で定義するのも可能。

noname#11353
質問者

お礼

回答ありがとうございます! marginをやってみました! 一つ気付いたんですがmarginを指定すると、 <p style="margin-bottom:20px" class="style" id="#1"> となってしまいます! これでいいものかと^^; それと<p>要素の間だけとは限らなくて、まぁその時の要素にmarginをつければいいんですよね。

その他の回答 (1)

noname#107580
noname#107580
回答No.2

こんにちは! 空白はスタイルシートのマージンで指定するのが良いでしょう。 <body> <p>あいうえお<br> かきくけこ </p> <p>さしすせそ<br> たちつてと </p> </body> この段落と段落の間に2行分の空白を空ける場合は <head>~</head>内に <style type="text/css"> <!-- p { margin-bottom: 2em; } --> </style> といれます。 2emで2行分、3emで3行分になります。 1.5emとかの数値や%、px,などでも指定できます。

noname#11353
質問者

お礼

回答ありがとうございます! emの意外な使い方にびっくりです^^分かりやすくていいですね。 問題はやはりそのところのみでmargin指定しかないですか?

関連するQ&A

  • ホームページ制作で複数行の空白行を入れるには

    (ホームページ制作の勉強中です。) 文章のと文章の間に複数行の空白行を入れには、<br>タグを 数回入力すれば可能ですが、他にに何か良い方法があるのでしょうか? (<br>タグは、むやみに使わないほうがよいと聞きますので・・・)

  • css使って<br>みたいに改行したいけど出来ない

    ブログの記事を書くときに<br/> を連発して改行していたんですが、seo敵によろしくないらしいのでこれからは cssを使って書き変えていこうと思いました ワードプレスのエディターから style.css の一番下に p.p1{ margin-top: 1em; } p.p2{ margin-top: 2em; } p.p3 { margin-top: 3em; } こうやって書きました。 それでブログの記事htmlを書くときには <p class=“p1"></p> ⇐これ書けば1行空白が空く <p class=“p3"></p> ⇐これ書けば3行空白が空く と思い書いてみたんですが <p class=“p1"></p> <p class=“p3"></p> どちらを書いても、記事は1行分の空白しか空きませんでした 大げさに p.p6{ margin-top: 6em; } というのをcssに書いて 記事のhtmlに <p class=“p6"></p> と 書いても空白は1行しか空きませんでした(;へ:) ブラウザのキャッシュを消して表示し直したりしてますが駄目です1行しか空きません なぜでしょうか??cssの記入場所が悪いのか書き方が悪いのか margin-top   を margin-bottom に変えても変わりませんでした 初心者にもわかるよう、 cssを使った改行、レイアウト変更方法を教えてください なんかcssで指定して html側になんかp classみたいな指定をした方が SEO対策になっているとか ルールにのっとっているらしいですが ググってもわかりませんでしたし なぜか一行分の空白しか空きませんで困っております。 こうやって何行も空けたいです! <p style="margin-top:6em;"></p> とhtml側に書くと改行思ったようにできます これが一番簡単ですがそれもcssで指定してないから良くないらしいです たすけて!

  • <br>で改行しても一行あいてしまいます

    少し説明がわかりにくいかもしれませんが <br>タグを使って改行した場合、行と行の間はあきませんよね? でもたまに<br>タグで改行してるのに行と行の間が一行空くことがたまにあります。 その時のタグは <br>文 <br>文2 と打つと 文 文2 後で見るとこのように反映されます。 同じページで同じ<br>タグを使ってる他の行は改行だけで 行の間が空くことはないのに、何度やっても同じ箇所だけ一行空いてしまいます。 これはどうしてでしょうか?プラウザはIE6.0なんですが そこの部分だけ何度やっても一行空いて見た目が変です。 何か解決策はないでしょうか?

    • ベストアンサー
    • HTML
  • ワードで1行ずつ空白の行を作りたい。

    ワードに英語が書いてあります。 この下に1行毎に日本語訳を入れていきたいのですが、 毎回改行しながら入力するのが面倒なので、 全て1行の空白をつくってから 入力していこうと思うのですが、 大量にあるので 簡単にできる方法があったら教えてください。

  • Yahoo! メール 本文 空白行が削除される

    Yahoo! メールを使っているのですが、「Windows 10」にしてからか、送ったメールを開けると、空白行が削除されてしまっています。 そこで、私の「Gmail」の方に、意味もなくメールを送ってみると、やはり空白行は削除され、文章がすべてつながってしまっていました(段落の終わりの改行はちゃんと改行されていました)。 前は、間違いなく、空白行は空白行で残っていました。 「設定・その他」で「長いメール本文を省略しないで表示する 」にチェックを入れ、ブラウザをいったん閉じ、再起動後にもう一度、メールを作成してみましたが、やはり同じでした。 私は、見やすくするために、空白行を入れているのに、これでは、つまった、見にくいメールになってしまいます。 空白行をそのまま残して送信するには、どうすればいいのでしょうか? お教えください。

  • 【HTML5】テーブルデータの空白部分について

    あるテキストで見かけた表の作成方法です。 添付してある画像の一番下の行に空白が2つあります。 このテキストでは空白部分に<br>が使ってあります。 <br>は一般的に改行するときに使用すると他のテキストやサイトに書かれています。 空白の場合はCSSで幅、高さなどの調整するものだと思っていました。 table内に空白のデータがある場合、<br>を入れておくというのは通常現場などでも使われている方法なのですか? 空白のデータは皆さんはどのように処理なされているのでしょうか? 実務経験のない初心者です。まだ勉強中のものです。 よろしくお願いします。 <table> (略) <tfoot> <tr> <th>計</th><td><br></td><td><br></td><td>160</td> </tr> </tfoot> </table>

    • ベストアンサー
    • HTML
  • Outlook Expressの空白行の入力は

    winsp2の導入後、空白行や改行が入力できなくなりました。先に「教えて!goo」でお尋ねしたところ、レジストの編集が必要とのこと、ちょっとのぞきましたが、素人には怖くて手が出せません。 マイクロソフトのページには「RFC2646 では、半角スペースなしに連続で入力された文字列をひと続きの文字列として認識し、改行などを行わないことを推奨しています。」とあり、半角スペースを入れてみましたが駄目でした。レジストを直さないで、空白行を入力入力する方法はないものでしょうか。

  • Twitterで何行も空白をあけるには

    Twitterで前振りとオチのような投稿をしたく、前振りのあとに数行の間を空けてから落ちの言葉を書きたいのですが、いくら改行しても一行しか空白ができません。1行だけでは面白くないからだめなんです。ぐぐったらカッコを書いたらいいみたいに書いてたからやってみたらそのまま投稿の分にカッコが乗ってしまい意味が分かりませんでした。どなたか詳しくわかるように教えてください

  • DreamweaverMXの改行について

    WindowsXPでDreamweaverMXを使用しています。 Dreamweaver自体の操作が良くわからなくて コードウィンドウに直接タグ書きをしているような 状態です。 2行、改行をしたい場合に<br><br>と入力すると IEでは、なぜか2行分改行されません。 一行だけ改行された状態になっています。 これが、オペラやDreamweaverのデザインビューだと きちんと2行分改行されているのですが・・・。 <br><br><br><br>と入力して ようやくIEで2行分改行されているような状態 です。 何か設定ミスや、間違って操作しているところが あるのでしょうか? よろしければ、ご指摘下さい。 よろしくお願いします。

  • EXCEL1行おきに空白行を追加したいのですが、

    データが行方向にたくさん連続して入力されたリストがありますが、1行おきに空白行を挿入したいのです。 その都度、「右クリック→行番号選択→挿入」では、時間がかかり過ぎてしまいます。 たとえば、1000の空白行を1行おきに一気に挿入する方法はないでしょうか。ご教授くださいませ。