満腹詩人ブログ

ぐっすり眠ってたらふく食らい、好んで味わうセンチメンタル。悩みらしい悩みもないのだけれど、幸せだとは思っちゃいない。ぼくもあなたも「まんぷくしじん」- まだ何を書いていくか定まらない多文量ブログ。

はてなブログの改行が気になるの話つづき。

先日の改行の話の延長戦。
今回は同じ話題をHTMLタグ的な側面からの考察。


私の拙い知見によるものですが、
技術的な側面から考察をメモしておきます。

普通のenterと、shift+enterでは、
厳密にいうと何が起こっているのか。
それにはどういう違いがあるといえそうか。
という内容です。


結論からいうと、埋め込まれるタグが異なります。
見た目が違うだけでなく、意味合いが違ってくるよね。
という話になります。


そういうわけで今回は、
「タグとは何か」という説明と、
「具体的に使われているタグ」を書いておく、
というとても退屈なエントリーです。

 

インターネットとHTML

さて、インターネッツの文章は、
たいていHTMLという一種のプログラム言語で
書かれているんですね。


HTML言語の使い方はこんな感じです。


例えばこの文字を太くするとしますね。
そのとき、文字を太く、をどうやって太くしているかというと、
はてなブログではHTML言語の<strong>を使っています。


<strong>みたいなのを、HTMLタグと呼びます。
ただのタグと呼んでもたぶん通じます。

 

タグの使い方

<strong>タグは、
文字を強調するという意味を持つタグです。
セットで</strong>という閉じタグを使うことで、
強調する文字の範囲を指定することができます。

この<strong>タグを使って、文字を太くする方法はこんな感じ。

①文字を太くする ←before

②<strong>文字を太く</strong>する  ←タグで囲む。

文字を太くする ←完成


あなたが観ているホームページの裏側では、
こんなことがたくさん行われています。
観るだけなら普段は気にしなくて構わないのですが、
仕組みはちょっとややこしいですね。


ふつうのenterは</p>

文字を太くするのに専用のタグがあるように、
改行を行うときにもタグがあります。
はてなブログのHTMLを確認したところ、
enterのときに挿入されているタグは</p>のタグです。
<p>というのは、パラグラフ、つまり文章として表示したいときのタグです。
閉じることで<p>ここからここまでが文章ですよ</p>というような
表示の指定を行うことができるのです。


shift+enterのときは<br>

一方、shift+enterの時に挿入されるタグは<br>です。これはブレイク、そのままズバリ改行という意味です。
そのままでは文章の指定にならないため、
先ほどの<p>タグと合わせて使います。
具体例として示すと

<p>ここからここまでが<br>文章ですよ</p>

といった具合です。


<p>と<br>の違い

前回のエントリーでは、
改行幅の違い、としてしか説明しませんでしたが、
実際に挿入されているタグにも着目してみると、
enterとshift+enterはその意味合いまで違うことがわかります。
同じ3行の文章を、</p>と<br>で書いた場合を比較してみましょう。


●<p>タグを用いる場合

<p>これは文章です。</p>

<p>これも、文章です。</p>

<p>これだって文章です。</p>

 

●<br>タグを用いる場合

<p>三行に別れていますが<br>
 これはぜんぶで<br>
 ひとつの文章です。</p>

この2種類の3行の例をみて、
見た目だけでなく意味合いが違うということも
なんとなくご理解いただけますでしょうか?


意味合いが違うという意味

私の文章の書き方は、前項の例で言うと、
文章が別れる度に改行するのではなく、
文章中の適当なところで改行するスタイルなので、
見た目だけでなく意味合い的にも<br>の方が
好ましいということは言えそうです。


ここで話を終えてしまうとただの細かい話、
で終わってしまうのですが、
このタグの区別を付けておいた方が
良い場合が明確にあります。


それは音声読み上げブラウザで閲覧される場合です。


ブラウザによって仕様や設定は異なりますが、
</p>は文章の末尾を宣言してしまうタグです。
そのため、私のようなスタイルで
文章を区切っている場合は、
1行毎に読み上げが停止してしまうことになります。

<br>ならば、同じ文章の始発と終点の<p></p>タグは
それぞれひとつだけなので、途中で改行が行われていても
ひとつの文章を一気に読み上げることができます。


好みもあるかとは存じますが、
たいていの場合、後者の方が意味合い的にも正しいですし、
よりスムーズに閲覧できるのではないかなあと存じます。

 

まとめ

最近は「webアクセサビリティに準拠した」といった
言い回しも使い古された感があって、
「PC、スマホ、タブレットなど、様々な端末に対応したサイトを作りましょう。」
みたいな話も流行だと思います。


解像度の違いだけでなく、
閲覧のされ方にも注目が集まって、
なんか定番のやりかたが定まってくるとやりやすいんじゃないかと思います。


そんなわけで、</p><br>の違いを、
ただ見た目だけでなく、意味の違いにも着目して扱えると、
一歩進んだ書き方といえるんじゃないかと思いますが、
そんなことを気にしているのはやはり私だけかも知れません。


前回と同じオチで恐縮ですが、
どなたか改行の初期設定を変更したり、
運営様に要望を出す方法をご存じでしたら教えてください。


あと本エントリーにツッコミどころがあれば
ぜひ勉強させてくださいね。


それじゃあ、まったねー。

 

 

やっぱり見た目が9割 (新潮新書)

やっぱり見た目が9割 (新潮新書)

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針