久しぶりのエントリになってしまいました＞＜また元気に書いていきます★

webcre8は正直なところHTMLを学びだして大した年月を重ねているわけではありませんが、自分なりに密度の濃い学習に励んできたつもりはあります。

そしてその中ではとりあえず理解が及ばなかったり、ソースが英語で、「自分より詳しい人がこの解釈で間違いないと言っているから」「リファレンスに書いてあるから」そういうものだと受け入れてしまっているセオリー的な知識や情報も多々あります。

でも「これってそう言われてるけど本当にそうなのかな」って考えることも必要ですよね。

HTMLは内容、意味 CSSは表現、装飾

これは大前提ですよね多分。pは段落。h1、h2、h3等が見出し。sectionは段落から始まるコンテンツの塊(セクション)。blockquoteは引用。このように、HTML内に書かれたテキストや画像、コンテンツ等の文書の内容を意味ごとにまとめたものがHTMLのタグですよね(※1)。

CSSはレイアウトや装飾、見せ方を担当しています(※2)。段落と段落の間はmarginで一行分空ける。h1のサイズは本文のサイズの倍で、太字、更にボーダーも、等。これはHTML(素の文書)が「ただの文字や画像の羅列」であることに対し、CSSはそれを見やすく、単なる文字やコンテンツ情報以外の部分の「人間が読むことを意識した」ものであると言う事ですよね。

空白の行→brbrって本当にダメなのかな？

これが最近まで抱えていた疑問です。

段落と段落の間に空ける一行のスペースなんかはpタグの下のmargin-bottom等のCSSで作るべきであって、brbrと改行タグを2つ並べて空行を作るべきではないと言う話ですね。常識です。brbrなんてダメですよ！

ああ、石を投げないでください。

意味はよーくわかっているんです。brタグは「改行」と言う意味のタグであって、「一行分の間隔を空ける」タグではない。間隔を空けたいならCSSのマージンを使う。そうですね。

でもこれってタグしか見てない結論のような気がしたんですよね。その空白で本当に「間」と言うか、時間的、空間的、心理的な空白を表現したかった場合、それはCSS的な「見やすさの為の空白」ではなく「コンテキストとしての空白」になる筈だと思う訳です。

意味を持つ空白

じゃあ意味を持つ空白って何ですかね。

小説なんかで言うと、3行開けることで時間、空間的な隔たりを示すことがあるみたいです。これは立派な「意味」を持っていますよね。

ただこの三行が「それぞれ3つの空の行」なのか「それぞれ3つの空白の段落」なのか、「例外的な文法上の存在」なのか…あ、「空の行が一行入った段落(前後は他の段落と同じように空白が入っている)」かも知れないですね。ちょっと分かりませんね…。エロい人に教えて欲しい。原稿用紙上では紛れもなく三行の空行なんですがｗ

ケータイ小説、ライトノベル、webの面白ブログ等の場合

「無意味に空いた空の行はケータイでページを表示させたとき自動的にページを分割させるただのPV稼ぎである」との話もありますが…ｗ そういうのを置いておくと、個人的には演出としてページをスクロールさせないと見えない場所にオチを持ってきたりするような表現は面白かったりするので肯定したい気持ちです。アレはどうなるのか？

ぶっちゃけた話ああいう書き方はHTML自体に詳しくない人がやりがちな書き方だと思いますし、更新者がweb制作者でない場合も考えると編集画面の仕様で吸収するべき問題だとは思います。WYSIWYGエディタはやってくれますしね。

あと特に前述のような「文章を書くとき常に三行開ける」みたいなことがしたいんだったらもうpタグのmargin-bottomを3emとかしておけばいいですよねｗ

でもライトノベルや面白い文章の演出として、狙って「ここは行を大きく開けたい！」と思った場合、それがお芝居や演芸で言う所の「タメ」のようなものであると考えると…果たしてそれはCSSに任せていいものでしょうかね？

PCで配信される小説をCSSを切って読んだりRSSで読んだ場合

とにかく、HTML5が内容である以上、内容としての空白はHTMLで表現されているべきな気がします。特にCSSを切った場合、先ほどの例で言えば読み手は場面転換に気付かなかったりするかもしれませんし(RSSで読まないでサイト行ってやれよって話ですがｗ)、タメがなくオチが見えてしまって興ざめしちゃってるかも知れないですね。

なんでそんなことしたいの？正しい文章書こうよ

いやいやいや。表現と言うものは思いつくことが出来る限り、書くことが出来る限り、あり得るものなんです。文法的に許されてないから、慣習に則って書くことが出来ないからって、存在できない訳はないですよね。書きたいことが、媒体のルールに制限されて書けないなんて、ナンセンスですよね。空白を空けたいから空けるんです。

結論として「意味として空白」にはどういうマークアップがあり得るか

正直こんなマークアップしたくはないですけどｗ

と言う訳で、意味として空白をどのようにマークアップするか、です。

候補としては

1. 空白を作るpタグとpタグの間にbrを複数置く
2. 空白を作る直前のpタグ内最終行にbrを複数置く
3. 空白を作る直後のpタグ内最前行にbrを複数置く
4. brを複数置いたpタグを置く
5. brを一つ置いたpタグにclass=”shift-scene”等のクラスを付与する

と言ったものが挙げられます。

まあ1は論外ですね。2、3もなんか微妙です。

pタグで囲えばCSSが効かなくてもとりあえず改行されますけど、やはり空白のためにはbrタグを置くしかなさそうです。marginだけで作っちゃうとCSSを切った時一行も空かなくなっちゃいますから。

結局問題はbrをどこに置くか、みたいですね。しかし例えば10行空けるような必要性が仮にあったとして、そこに10個の段落があるのかと言われるとなんだかそれも微妙ですし、空のpタグを置くにしても改行を複数置かなければ複数行空かないですね。

間をとって、5の方法では一行分の空白が出来るので空白は再現されますが、CSSを切った状態では空白の広さは反映されません。ですが基本的な文章としての改行よりも広い空白(普通の空白行)が入るため、ギリギリで「意味としての空白」と「brを連続設置して行間を表現しない」という両方を保っている気もしますね。

まあぶっちゃけwebcre8個人としては表現したいものによっては別にbrbrでも良くない？と思ってますｗ …このルール自体安易で変なマークアップが蔓延しないようにとの先人の配慮である気もしてますしｗ(分かりにくい例外なんか置いといて「ダメだよ」と言っといた方がいいよね)

まとめ

あとは一応、「意味のある空白」と言うものが果たして文書として必要か、という部分にちょっと議論の余地があるかも知れません。

段落の間の普通の間隔を空けたい改行に関しては当然CSSでやるべきです。それは見やすさの為であって、空白に意味があるわけではありませんからね。

以上、「これはこういうものだ」ではなく「どうしてそうなのか」を考えてみよう、と言う話でした。

もし見当はずれなこと書いてるなーと思われましたら@webcre8へのリプライかコメントでご指摘頂けると有難いです★

協力

今回は「HTML」と「文学」にも造詣の深いwebクリエイタ、@olivesystemさんにちょっと話相手になってもらいました。この「比べる」カテゴリではこのように、webcre8の見地のみではなく、議題について詳しい人にも議論に加わってもらい、今後もこのように何が正しいのかを多角的に探っていきたいと考えています。

蛇足：携帯サイトのマークアップ

webcre8は少なからず携帯サイトのマークアップを経験してきており、そこにあったバッドノウハウに毒されていた部分もなくはないと思います。特に更新する人がコーダではない場合、一行空きの文章にbrbrを使うようなことはよくありますし、そもそも古い携帯にはCSSも使えないし、見た目の共通化のためには段落なんてpタグで囲んですらいませんでしたね。

普通にXHTML+CSSコーディングから入った人からすればどんな理屈をこねられようとbrbrは気持ち悪いって人もいると思いますし、webcre8がこれもありなんじゃないかと思うのは、そういうカオスなコーディングを見慣れてしまってるだけかもしれませんｗ