Top Page › Web制作備忘録 › pタグとbrタグの使い方って、どうしてます?
2021 · 02 · 22 (Mon) 00:22

pタグとbrタグの使い方って、どうしてます?

FC2の新管理画面(β版)投稿画面がお披露目されて<p>タグを使う方も増えて来ると思われるので、テンプレートのスタイルシート修正が終わり次第更新をしようと作業中ですが、その前に<p>タグと<br>タグの使い方について「私の」考えを書いておこうと思います。(異論は有るでしょうが、あくまで私的な意見です。m(__)m)

簡単に説明だけ。

<p>タグはもともと英語の「paragraph(パラグラフ)」に由来する「段落」を意味するhtmlのタグで、<p>~</p>のように、コンテンツを囲って使用します。
<br>タグは「line break(ラインブレーク)」の略で、挿入した位置で改行を行うタグです。終了タグ無しで使います。

段落(<p>タグ)…1つの主題を持った文章の切れ目
改行(<br>タグ)…長い文章を途中で区切って行を新しくする事。

なので、私的には<p>タグ内の長い文章を「読み易くするために」<br>で改行、は有りだと思います。

色んなサイトの解説で「<br>はGoogleに嫌われる」と書かれているのですが、使い方次第だと考えます。
改行を目的として「空の<p>タグ」が使用されていれば、文章のまとまりであるはずのものが無いのですから、クローラーも正しく認識できません。かと言って余白を設けるための<br>タグ乱用等も、デバイスによってはレイアウト崩れを起こす原因になるので、控えるべきだと思います。
しかし、段落内の文章が長ければ「読み易いように」改行を加えても良いと思います。 読み難くて飛ばされるより、読んでもらった方が良いですから。

この度の修正案件で、今迄自分が記事を書く際かなりいい加減だった事を認識しました。
HTMLをセマンティクスにマークアップする(タグを正しく使い、意味や目的を持たせる)事で、機械が理解し易いようになり、SEOやアクセシビリティも良くなります。

折角の機会、これからは正しく記述していこうと思います。

↓とても分かり易い記事リンクを頂きましたので是非ご訪問下さい。

blog-image

日本語における段落とパラグラフについて考えてみた。

えっ!? どうしたの? なんか変なモノでも食べた? 縦書き・横書きと字下げについて。 今日は日本語の「段落」と「字下げ」について書いてみます。先日とある事をキッカケに、日本語における「段落」とその始まりを表す「字下げ」という形式について考える機会がありました。そもそも「段落」とは何なのか?どうして「字下げ」を行うようになったのか? 日本語を用いた文章をただWeb世界に垂れ流しているだけの個人ブログで...

[Tag] * Pタグ
最終更新日 : 2021-03-06

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-02-22-08:17 -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-02-22-10:16 -
[ 返信 ]
aki

Re: - 様へ

こんにちは。コメント有難うございます。m(__)m
そちらにお伺いしてお返事致しますね。
2021-02-22-11:51 aki
[ 返信 * 編集 ]
aki

Re: - 様へ

こんにちは。コメント有難うございます。m(__)m
そちらにお伺いしてお返事致しますね。
2021-02-22-14:24 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-02-22-15:26 -
[ 返信 ]
aki

Re: - 様へ

承知致しました。有難うございました。m(__)m
2021-02-22-22:31 aki
[ 返信 * 編集 ]

akiさんの意見に同意です。

こんばんは。akiさん。

以前、日本語文章における段落について調べてみたことがありました。
https://mochi1999.blog.fc2.com/blog-entry-1822.html

「段落」は日本で自然発生的に生まれたものではなく、明治時代に欧米から輸入された「パラグラフ」という概念が始まりです。
公文書等におけるパラグラフごとの改行ならびに始まりの字下げ(インデント)の形式が模倣され、縦書き文章における1字下げの形から「段落」という訳語がつけられました。

形式は取り入れたものの内容的にはパラグラフの概念も用法も漠然としたままであり、当時よりその段落についての理解教育は徹底して行われてこなかったようです。

やがてその曖昧さゆえに、読解性の向上を目的として「息抜き」「視覚」「みばえ」などの物理的な単位により改行する「形式としての段落」が日本語独自の段落として生まれました。
これは日本語文章に含まれる漢字によって空間内の文字密度が高くなりやすいことへの工夫なのかもしれません。

パラグラフと日本語における段落の違いは、パラグラフが文章を構成している論理的要素を指し示すのに対して、段落はその文章の読み方をも指し示すものだろうと思います。

僕もakiさん同様に、「パラグラフ」としての単位文章は<p>要素で括り、「形式としての段落」は<br>要素を用いるようにしています。
最近はあまり長い文章を書かないので、<br>要素を使う機会は減ってきていますが…
2021-02-22-23:18 mochi
[ 返信 ]
aki

Re: mochi 様へ

こんにちは。コメント有難うございます。m(__)m

mochiさんの記事、何となく色々スッと腑に落ちた感じがしました。
日本語環境の曖昧さ故なのか、学校で習ったはずの「段落」や「字下げ」がイマイチこの歳になっても拭えない不安感を持ってるのはこのため?と。
子供の頃から文章を書く時に「ここは字下げした方が良いのか?」「段落を分けた方が良いのか?」と悩んでいました。
言い訳ですかね。^^;
自分の中での言いたい事が文章として終了できていないのに「段落を変える必要が有るの?」みたいな違和感が有って、文末の句点で改行したいけど改段落ではない、という気持ち悪さが有るんです。

「パラグラフの概念や利用が漠然としたまま、形式としての段落が日本独自の段落として広がった。」
『形式段落』と『意味段落』、私の感じる気持ち悪さは『意味段落』としてまとめたい、けど中に入っている形式段落は改行(br)も使いたい、という事なのかなと思います。
本当は『形式段落』も全てpタグで括る事が望ましいのでしょうが、逆に行間が空き過ぎた文になって(デバイスが小さくなる程)読み辛くなる気がします。
そして句点毎にpタグで括るのは、読む方も何処までが『意味段落』なのか分からなくなると思うのです。
『意味段落』で字下げすれば分かり易くなるのでしょうが、小さい媒体では更に読み辛くなるのでは?と。^^;(私がiPhoneSE 第一世代機なもので…)

書き方は人それぞれなので強制はしません。(自由過ぎるのはどうかと思いますが。)
しかし、自分の書き方を決めておいた方が記事更新が楽になりますよね。(^-^)

p.s. 記事にブログカード貼らせて頂きました。とても勉強になる記事、有難うございます。
2021-02-23-13:32 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-02-23-16:52 -
[ 返信 ]
aki

Re: - 様へ

こんばんは。コメント有難うございます。
後程そちらでお返事致しますね。(^-^)
2021-02-23-20:45 aki
[ 返信 * 編集 ]

『形式段落』と『意味段落』

こんばんは。akiさん。
リンクカードにしていただきありがとうございます。

僕はあの記事を書く時に色々調べているうちに、『形式段落』という言葉があることを初めて知ったんですよね。
学校では『形式段落』も『意味段落』も区別なく、同じ段落として教わったように思います。

だからそれまで「<p>要素(パラグラフ)=段落」という表現に、なんとなく違和感を感じていました。
パラグラフを意識しようとすればするほど、それまでに自分が慣れ親しんできた日本語文章との矛盾や葛藤が生じてきてしまう。

でも日本語文章には『形式段落』というものが存在し、『意味段落』との違いを意識し始めたことで、ようやく<p>要素に対する理解も少し進んだように感じています。

それでも未だに文末を<p>要素で閉じて終わりにするか?<br>要素で一旦改行してから続けるか?悩むことも多いです。
日本語ってムズカシイ… (笑)
2021-02-23-23:25 mochi
[ 返信 ]
aki

Re: mochi 様へ

こんにちは。お返事頂き有難うございます。

日本語独特の…かどうかは分かりませんが、間の取り方を文字と視覚で捉える時に行間を取りたくなってしまいます。
時間の流れみたいなものの表現や心の変化とか、ズルいけど「間合いで察して」みたいなのを、段落というものでは無く文章の行間を空ける事によって表現したい、という感じです。
上下一行の余白以上の長い間合いが欲しい時、これがbr多用に繋がってしまうのでしょうね。(^_^;)

cssを知らない方に「スペースを空けるのはスタイルシートで」と言ってもなかなか出来ません。
それにテンプレートが変わったら反映しませんし。
見たまま編集画面なら尚更。そのままEnterキーでスペースを空けてしまうでしょう。
押したら「○行分の行間を空けるボタン」とかがエディターに有ったら、さぞ初心者さんに優しいだろうに。
まぁ、冗談ですけど。(^▽^;)
(pタグの話がbrタグの話になってました。失礼しました。)
2021-02-24-13:53 aki
[ 返信 * 編集 ]

To akiさん、mochiさん

今、紹介されているmochiさんの記事にコメントを書いてきました。
大変興味深い記事で私のモヤモヤしていたものが少し晴れた気がします。

日本語の段落で頭の文字が一文字字下げされてる件についても、明治時代に西洋からの輸入と書かれてます。
実際、ネットで古書を調べてみても今のところ字下げのある本はないですね。

mochiさんの記事は本当にいい記事と思いました。
2021-02-24-21:01 hige
[ 返信 * 編集 ]
aki

Re: hige 様へ

こんばんは。コメント有難うございます。

先日のコメントでも『字下げ』の事、言ってましたものね。
確かにmochiさんの記事は内容も分かり易いし、何より字下げしていて「とても読み易い!」と思いました。(^-^)

まだまだ使い方も覚束無い不慣れなpタグですが、新投稿画面共々慣れていこうと思います。
2021-02-24-22:44 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-02-24-23:09 -
[ 返信 ]
aki

Re: - 様へ

お返事遅くなってゴメンナサイ。m(__)m
後程そちらでお返事しますね。
2021-02-25-21:13 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-02-26-14:48 -
[ 返信 ]
aki

Re: - 様へ

こんばんは。お返事有難うございます。

ご理解頂けたようで良かったです。(^-^)
また何かございましたら、気兼ね無くお声を掛けて下さいませ。
今後とも末永く、宜しくお願い致します。m(__)m
2021-02-26-23:35 aki
[ 返信 * 編集 ]

Σ(゚ω゚ノ)ノ新しい機能

すみません、質問です┏●

管理画面にSEOアドバイザーなる新機能が追加されたようでして

記事内リンクチェック
title・descriptionタグチェック

の ふたつ、アドバイスをしてくれるようですが


この、title・descriptionタグチェックの方、
言われるがままにテンプレートの記述を変更した方がよろしいのでしょうか
お時間のございます時にアドバイスして下さると嬉しいです
2021-03-02-21:09 徳川たぬこ
[ 返信 * 編集 ]
aki

Re: 徳川たぬこ 様へ

こんばんは。コメント有難うございます。

私も先程気が付きました。^^;
FC2ブログもSEOに力を入れ始めて来ましたね。
既に有る共有テンプレートで、ここまでのtitleやdescriptionタグを入れているものはAkira氏のものと当方、あとは1,2名居たかどうか~という位です。
見た限りだと、現行の(当方の)テンプレートで出力されるものとほぼ一緒ですね。(descriptionはエリアモードで出し分けしてる分、うちの方がより詳細です。)
そのままでも出力されるものは一緒ですが、綺麗に出し直したい場合は<title>から</title>までを貼り換えてみて下さい。
(descriptionは、FC2版に貼り換えしない方がSEO的には良いと思います。てか、うちの方が良いと思います。)

ちょうど今、全テンプレートの更新作業してるので、title出力は「おすすめ記述」に直しちゃおうかな。(^^ゞ
2021-03-02-23:18 aki
[ 返信 * 編集 ]

ありがとうございます(ご返信不要です🍀)

いつもながら丁寧なご説明をありがとうございます

なにやらコードがわらわら出てきたのでちょっとだけ動揺いたしましたが
今の表示でまったく不満がないので放置します(*´꒳`*)

さすがakiさんやで❣
2021-03-03-11:33 徳川たぬこ
[ 返信 * 編集 ]
aki

Re: 徳川たぬこ 様へ

返信不要と有りましたが一応…気が付いた点も有りましたので。

descriptionタグチェックの方、記事内・おススメのタグ名が間違っています。^^;(discriptionになっている。)
利用する場合はスペルミスに気を付けて。
総合インフォに鍵コメ報告したけど、運営さん気付いて直してくれるかなぁ?
返信不要です。m(__)m
2021-03-03-13:16 aki
[ 返信 * 編集 ]

Re: aki 様へ

毎度お世話様です。
本件については
https://sorauta1.blog.fc2.com/blog-entry-445.html#comment2738
を読み
(1).<title>~</title>までをFC2版に貼り換え。
(2).descriptionはFC2版に貼り換えず、aki 様提供のまま。
にしました。

>現時点、(discriptionになっている。)で変化ありませんでした
2021-03-03-15:16 呑兵衛あな
[ 返信 ]
aki

Re: 呑兵衛あな 様へ

こんばんは。コメント有難うございます。

今見ても直ってませんね。^^;
お勧め記述もスペルが間違えているので、そのままコピペしてしまったら変数として反映しないのに…。
これは早く修正してくれないと困ります。

当テンプレートは"description"の所にcanonicalタグを記述しています。
canonicalタグとは、検索エンジンに正しいURLを伝えるための「URLの正規化」用のタグです。
なので、そのまま変更しないでご利用下さいませ。
2021-03-03-22:11 aki
[ 返信 * 編集 ]

Re: aki 様へ

>当テンプレートは"description"の所にcanonicalタグを記述しています。


言っている意味をわかりかねています。
前述のとおり、「descriptionはFC2版に貼り換えず、aki 様提供のまま」です。よってFC2版「descriptionタグチェック」では
>現在の記述
>><meta name="description" content="<%introduction>">

であり、これはFC2の共有テンプレートで配布されている記述と同一です。私の知識では弄っておりません。ちなみにFC2版の

>おすすめの記述
>><!--not_permanent_area-->
<meta name="description" content="<%introduction>" />
<!--/not_permanent_area-->
<!--permanent_area-->
<meta name="description" content="<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->
2021-03-03-23:07 呑兵衛あな
[ 返信 ]
aki

Re: 呑兵衛あな 様へ

返信の件、言葉が足りませんでした。m(__)m

>当テンプレートは"description"の所にcanonicalタグを記述しています。
これについて言いたかったのは、"description"を括っているエリアタグ内にcanonicalタグも入れています、という事です。なので、その部分はそのままにしておいて下さい。

例えば、呑兵衛あな様のテンプレートHTML編集枠内に書いてある

<!--permanent_area-->
<meta name="description" content="<!--topentry--><%topentry_description><!--/topentry-->">
<link rel="canonical" href="<!--topentry--><%topentry_link><!--/topentry-->">
<!--/permanent_area-->

は、個別記事ページについてで、FC2版では

<!--permanent_area-->
<meta name="description" content="<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->

になっています。見て頂くと、
<link rel="canonical" href="<!--topentry--><%topentry_link><!--/topentry-->">
というのが有ります。これが「URLの正規化」用のタグです。

当方のテンプレートでは、<!--titlelist_area-->や<!--category_area-->等、その他のエリアそれぞれに description と canonical を入れています。FC2版の場合は<!--not_permanent_area-->(個別記事以外のエリア)としてその他のエリアを一括りに
<!--not_permanent_area-->
<meta name="description" content="<%introduction>" />
<!--/not_permanent_area-->
としています。
たぬこさんへの返信に「descriptionは、FC2版に貼り換えしない方がSEO的には良いと思います。」と書いているのは、「FC2版よりも詳細に出し分けているので、そのままにしておいて下さい。」という意味でした。

呑兵衛あな様への説明が不足しておりました。
大変失礼致しました。
2021-03-03-23:56 aki
[ 返信 * 編集 ]

Re: aki 様へ

ご説明いただきありがとうございます。
><link rel="canonical" href="<!--topentry--><%topentry_link><!--/topentry-->">
>というのが有ります。これが「URLの正規化」用のタグです。

>たぬこさんへの返信に「descriptionは、FC2版に貼り換えしない方がSEO的には良いと思います。」と書いているのは、「FC2版よりも詳細に出し分けているので、そのままにしておいて下さい。」という意味でした。

いずれについても、aki 様の言われる意味はわかったつもりです。

要するに、「descriptionはFC2版に貼り換えず、aki 様提供のまま」で利用すればOKという理解です。私はそのようにしておりますので、本件について問題無しと考えています。
2021-03-04-08:02 呑兵衛あな
[ 返信 ]
aki

Re: 呑兵衛あな 様へ

こんにちは。お返事有難うございます。

更に良い方法が「SEOアドバイザー」内に示されるまでは、当テンプレートの方が良いと思います。
追加コンテンツの有無は分かりませんけども。(^^;)
返信不要です。
2021-03-04-16:15 aki
[ 返信 * 編集 ]






非公開コメント