Article page

by
  • Comment:8
  • Trackback:0

段落を意味する
<p>
というタグと
改行を意味する
<br>
というタグ

それぞれの使い所や、FC2に於いては「新投稿画面で 改行 を行うと勝手に
<div>
で挟まれてしまう 問題(?)」も絡めていきます。


pってそもそも何なんだ


pは paragraph(ぱらぐらふ) のpです。
webの標準言語は英語ですので、見た目のそれも 英語のGrammar に則っていることがほとんどです。

* Grammar (ぐらまー) = 文法

一般的な英字新聞ってこんな感じ ↓




わかりやすくすると ↓




これがパラグラフ。
pタグの存在意義というのはまさしくこのためです
こうして英字新聞をイメージするとpタグの使い所がわかるのではないでしょうか。



pタグの初期値


htmlタグというのは文書内容・文書構造の 意味・定義 を司るものですが、それぞれに必ず 見た目の初期値 を持っています。
この初期値は CSS が担ってます。
「何も意図的変更を加えなければ勝手にそうなる」ってのが初期値ですね。
例えば 見出し を意味する
<hx>
(xは1〜6の数字) は勝手に太くなりますし、1〜6の段階に応じて文字の大きさも勝手に変わります。
それが初期値。
pタグも当然初期値を持ってます。

pタグの初期値

display値は block
marginは 上下に各1em(文字1つ分), 左右は0

これが初期値、つまりデフォルト。
テキストの一定範囲を
<p>
</p>
で囲うと、上下に空白ができます
それが正しいというか、各ベンダーは親切にもそうした初期値を設定しています。

* vener (べんだー) = 販売元, リリース元

親切なんですよ? (´・ω・`)
だって英語的には段落間に空白を設けるルールなわけだから。



親切は時におせっかい【リセットCSS】


リセットCSS というのを耳にしたことが有る方も多いかと思います。
htmlタグの初期値というのは各ベンダーが独自につけていることも多いんですね。
するとそのまま利用した際に ブラウザ間で見た目の格差ができてしまう ことになります。
クロスブラウザ問題 (´・ω・`)
ブラウザ毎に見た目が違うなんてのは望ましくないですし、コントロールが難しくなりますので、

全部なくな〜れ



ってするのがリセットCSSです。
特徴的なCSSは一旦全て無かったことにしてしまうという、ある意味荒業ですが、フツーに行われていることです。
CSSはあくまでもスタイリングの分野であって、htmlの意味や定義を変えてしまうといったことはありません。
ブラウザ間格差を無くすことも目的の一つですが、
最近って色んなCSSスタイリングが出回っていてですね、例えば見出しひとつにしても色々な装飾がありますよね。
で、大抵は「コピペでOK!」みたいな感じ。
そうなると、CSSの初期値をご存知ない方がサイトなんかで調べてそのままベタ貼りしてしまうわけなんです。
pタグなんてのは比較的よく利用されるhtmlタグですし、実際pタグを用いた特殊なスタイリングを紹介しているページもたくさん存在します。
そうなるとやはりpタグの初期値が 邪魔 になってしまうんです。
例えばCSSだけでリボンを描画しようと思ったとして。
「なんか… サイトに書いてあった通りのCSSソースなのに、リボン幅がめちゃめちゃ広い 何故だ…」
とかさ (´・ω・`)
初期値が親切どころかおせっかいになってしまうパターンです。

pタグに限定して言うと、それだけじゃないんですね。
エディターによっては改行するたびにpタグで囲まれる
ことがあります。
Amebaのエディターなんかがそうです。
FC2ブログのエディター(新投稿画面)はpでなくdivです。



ほとんどの方が改行を間違っている


これもうホント何度も同じこと書いて申し訳ないのですが。

改行は Enter/ Return キーじゃなくて Shift + Enter/ Return キーですぜ旦那!

Enter/ Return単一キー押下は 改行ではなく改段落 なんです。
この事実をご存知の方がものすごく少ない。
だからみなさんが「改行(だと思いこんで)」する時はEnter/ Returnキー (以下「改行もどき」と称す)なんですね。
で、こういう時にみなさん改行もどきを行います。

例)
こんにちは。
今日は良い天気ですね!
気持ちの良い一日が過ごせそうです \(^o^)/

図解するとこんな ↓




感覚的にはhtmlはこうなってると思ってる(しかし思い込み) ↓

こんにちは。<br>
今日は良い天気ですね!<br>
気持ちの良い一日が過ごせそうです \(^o^)/<br>

ところが本人が「改行した」と思い込んでいるだけで 改行もどき = 改段落 ですので、実際のhtmlはこうです ↓

<p>こんにちは。</p>
<p>今日は良い天気ですね!</p>
<p>気持ちの良い一日が過ごせそうです \(^o^)/</p>


みなさんは自らこの形にしているんです。
これはエディターのせいではなくて、改段落と改行を間違えているユーザーの自己責任だねぇ (´・ω・`)
でもって、pタグにリセットがかかってないと初期値適用ですからこうなる ↓

こんにちは

今日は良い天気ですね!

気持ちの良い一日が過ごせそうです \(^o^)/



なんか勝手に行間空いとるな、と (´・ω・`)
でも勝手に空いたわけではございません。改段落を行ってわざわざ空けたんです。ユーザーが自分で。

-------- 追記 同日

one-sentence paragraph (わんせんてんす ぱらぐらふ, 一文段落)について

しばしば議論になりますが「一文のみで段落となり得るか。正当か。」
Not legitimate 正当でない。
とされることもありますが、昨今では、特にwebに於いては「正当でないとも言えない。」という感じではないでしょうか。
そもそも論でこの議論はGrammarではなくstyleである、とされています。
文法ってより見た目のことでしょ? みたいな。
私の学生時代は not legit って言われてましたけどね。
どうなんでしょうね(結局わからんのかーい)



改行と改段落


【改行】というのはこういうのですよね ↓

例)

あいうえお
かきくけこ
さしすせそ


全部横並びで
あいうえおかきくけこさしすせそ
と書いてあると非常に読みづらいです。
だから可読性を重視する意味で任意改行を行うことがあります。

【改段落】というのは 物事や意味の切れ目 に入れるものです。

例)

3月3日の行事予定は○○と●●です。
担当者は事前に連絡をお願いします。

3月4日の行事予定は△△です。
担当者のみ出席ですので、他の方は待機願います。

3月5日は何もありませんので、みなさんどうぞゆっくりお過ごしください。
以降の連絡はメールで送信する予定です。


全部で3段落。
この段落の中にはもちろん【改行】も含まれています。

日本語ってね、やっぱ英文とは随分違うんですよね (´・ω・`)
英語というのは

Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book–shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.

こうなんです。
ピリオドが入ったからといって改行したりは基本的に しません
日本語ってどうなんでしょう。
正しいGrammarがわからない ( ̄∀ ̄;)
だって基本、縦書き文化じゃん。



連続brタグの利用の是非


Grammar的な観点から言えばやっぱり NO ってことになるんでしょうか (´・ω・`)
ホントにね、英語論文を書いたことがある方はよくご存知かと思うんですが、
段落間には空白だとか、斜体の使い所とかも細かく指示されるわけなんです。
で、文章と文章の間に1行分以上の空白が有った場合、そりゃ段落間空白だろ? とみなされるわけなんですよ。
そもそもがそうなんです。
連続で
<br>
を入れるということは最低でも1行分は空白ができるわけで、1行以上の空白は「段落の切れ目」だろう、と。
こういう理屈よね (´・ω・`)
ですから「何故連続brがアカンのや!」という回答をちょっと視点を変えてみると、それはGrammarなんです。
たぶん(笑)
そしてそれが段落間空白行であるならば、即ち
<br>
じゃなくて
<p>
だろ、と。

是非はね、是非は… 正直よくわからん。
私も連続brなんて多用してますし。
厳密に言って連続は良くない、と言われれば納得はできます。
修正しないけど(笑)



何故FC2ブログはpでなくdiv なのか


改行と思い込んだ改段落を行った時、Amebaブログでは
<p>
で挟まれます。
ですがFC2では
<div>
です。
この理由について推測。

これまで記した通り、pタグというのは特徴的なCSS初期値を持ってます。
でもそれを知っている人が少ないわけ。
さらに正しい改行の仕方を知ってる方も少ないというコンボ。
で、運営というのは CSSの初期値リセットはなるべく避けたい んじゃないかと思うんですよね。
親切が翻って余計なお世話、ってのも書きましたが、仮にpタグの習性を良く知っており、グラマティカルに規則正しくhtmlを利用したい人が
「なんでp使ったのに段落間に空白ができないんだ!おかしいじゃないか!」
ってなる可能性だってあるんです。
その場合はリセットの方が大きなお世話なわけで。
やっぱり正しく理解している人が正しく使える、というのが理想ですよね。
例え寧ろ間違っているのがマジョリティだったとしても。
そしてCSS初期値に変更を加えるなんてのはひとつ責任を増やすことにもなると思うんだ(笑)
そういうことは避けたいはず (´・ω・`)

改段落がpで挟まれるのはhtml構文的にも正しいのだけれど、改行キーの勘違いのせいで多くの方が初期値のままpタグを使うことになると、これはもう大きなクレームになることは目に見えてます。
そこでpと同じdisplay初期値がblockであり、どのブラウザでもmarginのつかない汎用的に使えるタグ
<div>
を選択。
ってことじゃないかなぁ (´・ω・`)

Amebaは一旦 p から div へのプログラム差し替えを行っていたようです。
が結局「html的にも正しいんで…。」という説明を添えつつ p に差し戻してます。
marginのリセットを設けた上でpで挟んでる。
初期値を消したくない気持ちと、html構文を守りたい気持ち。
でまぁ、後者を優先した、と。
大変ですね(笑) ← 超ひとごと

FC2の div は柔軟だと思います。
FC2はAmebaと違ってレイアウトの統率をしていないので、divを選んで正解だと思います。
テンプレートによってはpタグにリセットかけてないものだってあるはずなので。



まとめ


え?特に無い (´・ω・`) ←←←
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 8

-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/23 (Sun) 19:53 | EDIT | REPLY |   
hige  
よく解りました!

 私のような独学できた者にはAkira氏の今回の記事で、pタグの存在理由が胸にすとんと落ちました。
 本当に解りやすい解説です。今まであったもやもやが解消された気分です。
 ところで本来のpタグは上下に空白と書かれておられますが、実際は下部(margin-bottom:1em)に1行文の空白を設定と解釈して宜しいのでしょうか。

2017/04/23 (Sun) 20:43 | EDIT | REPLY |   
Akira  
To pタグの件 内緒さん

> ツイッターのDMでエンター改行ができず、調べてみるとシフト+エンターで改行ができるというのも この文化から〜

そうですね。FBもそうです。
FBやTwitterをご利用のみなさんはちゃんと使いこなしてるはずだと思うんです。
FBとTwitterはそういった仕様だから… って感じで。
実際は仕様とかじゃなくてPCの扱いではそっちこそが正しいってことなんだけども(笑)

> 結局連続改行したいなら<p> </p>使っても良いということですね〜

というよりも、文章間に複数行にまたがる空白があるのなら、「それは段落でしょ?」という感覚でしょうか。
「段落だから空白行があるんでしょう?」みたいな。

英米圏の方はやたらな改行はしないですね。メッセ的なものであっても。
日本は文面でも雰囲気を伝えることがあるじゃないですか。
例えば
例)

私…。



昨日はあまり眠れませんでした。

====

こういう大きな空白があるとあちらの方は何かしらのサプライズがあると考えるんですね。
日本人的には単なる余韻ですが。
あちらの方はそういうのはあんまり無いので、「は?サプライズもなく段落でもない?…意味わかんね (;`ー´)」ってなると思います(笑)

2017/04/23 (Sun) 20:53 | EDIT | REPLY |   
Akira  
To higeさん

> 実際は下部(margin-bottom:1em)に1行文の空白を設定と解釈して宜しいのでしょうか〜

上下のmarginというのは相殺というのが起こるんです。
例えば先行要素のmargin-bottomが50pxだとします。
後続要素のmargin-topが20pxだとします。
この場合の先行A要素の下marginと後続B要素の上marginというのは同じ場所を指しますよね。
そういう時には、marginの大きい方に小さい方が吸収されてAとBとの距離(空白)は 足して70pxではなく、大きい方の 50px になります。
それが「上下margin相殺」です。
この性質もmarginが難しいとされる特徴のひとつ。
あと、上marginにも大きな特徴があって、
「marginは外側に空白を取る」という説明が定石になっていますが、実際には「外の要素を引っ張る」って言うんでしょうか。
ちょっと説明が難しいんだけど ^^;
上のmarginはひとつ外回りの親を引っ張りますので、例えば親に背景がついていて、中の子にmargin-top: 50px; と指定があると背景が実際の位置より50px下に引き下ろされます。
これコメント欄では説明しきらん(笑)

あと、ここには書きませんでしたが、<br>とは別で<wbr>ってのもhtml5にはあるんです。
これは日本人の方にはあまり使う機会がありませんが、後ほど追記しようかな (´・ω・`)
お風呂入ってから ←

2017/04/23 (Sun) 20:59 | EDIT | REPLY |   
hige  
marginの相殺

早速の回答ありがとうございます。
エディタで早速確認してみました。
そう云うことですね。了解しました。

2017/04/23 (Sun) 22:18 | EDIT | REPLY |   
Akira  
To higeさん

はい。相殺されているので一方向にしか効いていないように見えるだけです。
見えるだけってより、実際効いていないわけだけど(笑)

2017/04/24 (Mon) 18:51 | EDIT | REPLY |   
あっちゃん  
勉強になりました。

改行キーだと思い込んでいた、モノ、です。
今回は、shift+enterで、入力いたしましたぜ。(笑
ついつい、ennterキーだけですましてしまおうと思っちゃう。
ワンアクションですむもんだから。( ̄ー ̄)ゞポリポリ

2017/04/30 (Sun) 17:12 | EDIT | REPLY |   
Akira  
To あっちゃんさん

学習能力の高さ(笑)

もしあっちゃんさんが「旧投稿画面」で「改行の扱い【自動】」をご利用であればSiftキーは不要ですよ。
Enterだけで改行とみなしてくれるのが「改行【自動】」です。
新投稿画面で<br>にしたい場合はSift+Enterで。

2017/05/01 (Mon) 20:11 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い