重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

段落と改行の意味の違い

解決済

  • 質問者：FKEVEPSBBM
  • 質問日時：
  • 回答数：5件

段落と改行の意味の違いが良くわからないのですが
例えば

リンゴ
バナナ
イチゴ

と言うように書きたい場合は
<p>と<br>どちらを使うべきでしょうか？

そもそも
上記のような文は改行なのか段落なのかわかりません。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

No.3です。


＞と言うように書きたい場合は
　この点は、誤りです!!。
「という風に表示したい」と考えるべきです。
　表示目的で<p>や<br>を使いわけるのではありません。---とても多くの方が誤解されています---

★HTMLは文書構造をマークアップする物★
　いう原則から、あなたの示されたサンプルの場合は、<li>りんご</li>が最適なマークアップでしょう。ひょっとすると、<dl><dt>果物</dt><dd>りんご</dd>のほうが良いかもしれません。
　実際にサンプルを示して起きます。こうマークアップされていれば、機械にも（検索エンジンにも）文書の構造が理解できます。

★タブは＿に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済みのHTML4.01です。
　印刷時には、スタイルは適用されません。
★スタイルがあるときと無いとき(ブラウザの表示メニュー→[スタイルシート]から選択)を確認してみましょう。

<!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" media="screen">
<!--
body{font-size:16px;}
div.section div.section{
width:600px;border:solid 1px gray;
margin:20px auto;padding:10px;
border-radius:5px;box-shadow:5px 5px 5px;
line-height:1.6em;
}
div.section div.section *{margin:0;padding:0;}
div.section div.section h3,
div.section div.section dt{
font-weight:bold;font-size:16px;
font-family:sans-serif;
}
div.section div.section ul,
div.section div.section dl{
}
div.section div.section li,
div.section div.section dd+dd,
div.section div.section span{
margin-left:3em;
}
li,dd,#section4 p span.name{margin-left:2em;list-style:none;padding-left:0;}
#section4 p{font-size:0;line-height:0;}
#section4 p span,#section4 p strong{
display:block;color:black;font-size:16px;
line-height:1.6em;font-weight:normal;
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>1)野菜と果物</h2>
＿＿<p>木(木本)になる果実は果物、草(草本)になるものは野菜です。一例を挙げると</p>
＿＿<div class="section" id="section1">
＿＿＿<h3>果物</h3>
＿＿＿<p>木(木本)になる果実は果物です。</p>
＿＿＿<ul><!-- 順不同リスト -->
＿＿＿＿<li>りんご</li>
＿＿＿＿<li>バナナ</li>
＿＿＿＿<li>カキ</li>
＿＿＿</ul>
＿＿＿<h3>野菜</h3>
＿＿＿<p>草(草本)になるものは野菜です。</p>
＿＿＿<ul>
＿＿＿＿<li>イチゴ</li>
＿＿＿＿<li>スイカ</li>
＿＿＿＿<li>トマト</li>
＿＿＿</ul>
＿＿</div>
＿＿<div class="section" id="section2">
＿＿＿<dl><!-- 定義リスト -->
＿＿＿＿<dt>果物</dt>
＿＿＿＿<dd>木(木本)になる果実は果物です。</dd>
＿＿＿＿<dd>りんご</dd>
＿＿＿＿<dd>バナナ</dd>
＿＿＿＿<dd>カキ</dd>
＿＿＿＿<dt>野菜</dt>
＿＿＿＿<dd>草(草本)になるものは野菜です。</dd>
＿＿＿＿<dd>イチゴ</dd>
＿＿＿＿<dd>スイカ</dd>
＿＿＿＿<dd>トマト</dd>
＿＿＿</dl>
＿＿</div>
＿＿<div class="section" id="section3">
＿＿＿<dl><!-- 定義リスト -->
＿＿＿＿<dt>果物</dt>
＿＿＿＿<dd>木(木本)になる果実は果物です。
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li>りんご</li>
＿＿＿＿＿＿<li>バナナ</li>
＿＿＿＿＿＿<li>カキ</li>
＿＿＿＿＿</ul>
＿＿＿＿</dd>
＿＿＿＿<dt>野菜</dt>
＿＿＿＿<dd>草(草本)になるものは野菜です。
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li>イチゴ</li>
＿＿＿＿＿＿<li>スイカ</li>
＿＿＿＿＿＿<li>トマト</li>
＿＿＿＿＿</ul>
＿＿＿＿</dd>
＿＿＿</dl>
＿＿</div>
＿＿<div class="section" id="section4">
＿＿＿<h3>果物</h3>
＿＿＿<p>
＿＿＿＿<strong>木(木本)になる果実は果物です。</strong><span class="name">りんご</span>、<span class="name">バナナ</span>、<span class="name">カキ</span>は果物です。
＿＿＿</p>
＿＿＿<h3>野菜</h3>
＿＿＿<p>
＿＿＿＿<strong>草(草本)になるものは野菜です。</strong><span class="name">イチゴ</span>、<span class="name">スイカ</span>、<span class="name">トマト</span>は野菜です。
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/02 11:43

No.4

  • 回答者： ulisrt
  • 回答日時：

ご質問のそれは箇条書きです。


HTMLではリストを使います。

<ul style="list-style:none">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

段落<p>は文書を構造化する単位の一つです。通常は文脈でひとまとめにします。
改行<br>は単に行を区切るだけです。文書レイアウトの上で行を変えるものです。

文書は部・章・節・段落などに構造化されます（第○部とか第○章など）。どう構造化するかは単行本・雑誌・予稿集・契約書などによって異なり、これを文書の型(document type)といいます。

HTMLソースの先頭に書く「<!DOCTYPE HTML ～」がそれで、HTML型の文書であることを意味します。Webブラウザで使えないのであまり見かけませんが、HTML以外にもDocBookやTEIなどの文書型の定義があり、電子マニュアルのソースに「<!DOCTYPE BOOK ～」などと書いてあることもあります。

話を戻すと、文書に何の構造を与えず、ただ行を変えたいときは<p>ではなく<br>を使います。ひとまとまりの文章は<p>で、箇条書きは<ul>や<ol>で構造化します。

文書の形を「型」で縛るのは、一定のルールがあった方が意思伝達がスムーズになるためです。日本ではあまりなじみがありませんが、多言語の交流が多い欧米などでは学校で教えてくれると聞きました。私はSGMLの勉強中に身に着けましたが、文章作成の書籍などでも学ぶことが可能でしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/02 11:43

No.3

  • 回答者： ORUKA1951
  • 回答日時：

　強制改行<BR>は基本的にはHTML内に登場する事はないでしょう。

使うとしたら住所で大住所と中住所の境目を示す。あるいは詩で改行自体がコンテンツの要素であるとき!!
　それ以外は、使うことは無いはずです。
＞上記のような文は改行なのか段落なのかわかりません。
　完璧なリストでしょう。
<h3>果物</h3>
<ul><!-- 順不同リスト -->
　<li>りんご</li>
　<li>バナナ</li>
　<li>カキ</li>
</ul>
<h3>野菜</h3>
<ul>
　<li>イチゴ</li>
　<li>スイカ</li>
　<li>トマト</li>
</ul>
あるいは、
<dl><!-- 定義リスト -->
　<dt>果物</dt>
　<dd>りんご</dd>
　<dd>バナナ</dd>
　<dd>カキ</dd>
　<dt>野菜</dt>
　<dd>イチゴ</dd>
　<dd>スイカ</dd>
　<dd>トマト</dd>
</dl>
もしもリストではないのでしたら、極端な話・・・
<p>
<span class="category">果物</span>には、<span class="name">りんご</span>、<span class="name">バナナ</span>、<span class="name">カキ</span>があり、<span class="category"野菜</span>には、<span class="name">イチゴ</span>、<span class="name">スイカ</span>、<span class="name">トマト</span>などがあります。
</p>
でも構いません。
★上記いずれでも、全く同じデザインにすることができます。

　あなたの場合は、文書構造上は、完璧なリストと意識されてますよね。
　だったら、HTMLでは、率直にリストとしてマークアップすべきです。それを、リストマークをつけるとか、改行させるとか・・・どのようにプレゼンテーション(表現)するかはスタイルシートのお仕事です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/02 11:43

No.2

＃１です。

言い忘れましたので、追記します。



<p>～</p>は、表記される場合に自動で前後にスペースが入る場合が多いです。たとえば、

<p>リンゴ</p>
<p>バナナ</p>
<p>イチゴ</p>

とHTMLを書くと、ブラウザでの表示は、


リンゴ

バナナ

イチゴ


となってしまったりします。

ですので、レイアウト的にスペースがあった方が見やすいと思う場所には<p>～</p>を使う方がいいでしょう。この前後のスペースの広さは調整・指定する方法もあります。



<br>は、前後にスペースがありません。
ですので、

リンゴ<br>
バナナ<br>
イチゴ<br>

とHTMLを書けば、そのまま、

リンゴ
バナナ
イチゴ

とブラウザで表示されます。


望むレイアウトによって、<br>だけを使うのか、<p>～</p>を使うのか、<p>～</p>と<br>を組み合わせて使うのか、選ぶと良いのではないでしょうか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/02 11:43

No.1

質問文にある、



リンゴ
バナナ
イチゴ

は、HTMLでは、段落の中に改行がある、という形になります。
こう書きます。

<p>リンゴ<br>
バナナ<br>
イチゴ</p>

こう書いてもいいです。

<p>リンゴ<br>バナナ<br>イチゴ</p>



「段落」というのは、いくつかの語や文章がまとまったものです。
<p>は「段落」を意味します。
段落は、言葉のグループと思っていいでしょう。
上記の文では、フルーツが集まったグループつまり「フルーツの段落」ですね。

「改行」というのは、その行を終わりにして、下の行を使うことです。
<br>は改行を意味します。
改行は、言葉のグループの中身を整理整頓する物と思っていいでしょう。

「段落」をお弁当箱、「単語・文章」をお弁当の具、「改行」を仕切りだと思ってください。

改行は、単語の途中でも、文章の途中でも、好きな位置ですることができます。
たとえば、

リンゴ

と表示したいときは、

リンゴ<br>

というように改行を入れますが、

リ
ンゴ

と表示したいときには、

リ<br>
ンゴ<br>

というように改行を入れることも可能です。
リンゴは改行したら読みにくくなるので通常リンゴの途中では改行は使いませんが、改行した方が読みやすくなる場合、たとえば「詩」を表記する場合などには改行を使いたいですね。



学校の作文授業では通常、段落の途中で改行してはダメという作文ルールですよね。コンピューターの世界では、段落の途中で改行してもオーケーの作文ルールを適用しています。もちろん、改行をひとつも持たない段落を作るのもオーケーです。



ちなみに、

段落<p>は必ず</p>とセットで使います。段落始め<p>～</p>段落終わり、となります。

改行<br>は常に単独で使います。
行を変えたい位置に<br>と書けば、単語の途中であろうと、文の途中であろうと、<br>の後に存在するものは全て、下の行へ移動します。

段落<p>～</p>中には、改行<br>をいくつ使ってもオーケーです。無制限に使えます。改行した方が読みやすくなるだろうなあという所は、どんどん改行してしまいましょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/03/02 11:43

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報