【HTML 】はてなブログで詩を書く、対訳するための HTML + CSS について & ショスタコーヴィチ第7弦楽四重奏曲

注意
はてなブログで詩を書くための HTML
- 段落になる P 要素と改行する BR 要素
- 余白を取るスタイルシート: margin
対訳形式のスタイルシート

一年かけずに全訳するつもりで始めたボードレール『悪の華』だったが、一年かけてやっと「憂鬱と理想 SPLEEN ET IDÉAL」の章を終え、それから今まで「絵に描いたパリさまざま TABLEAUX PARISIENS」の章をやっていて、ようやく終わった。LE VIN, FLEURS DU MAL, RÉVOLTE, LA MORT と残り4章あるから、「『悪の華』翻訳終わりました」なんて、この年内に言えれば良い方だろう。数は少ないながら、大作が多いので。

併せて、対訳表示する HTML + CSS についても漸く目処がついた。ソース表示を見る人以外は気付かない程度の変化ながら、前章から色々試して、使えるもの使えないものが解ってきた。ただ、ブログで詩を書くには、それ以前の問題があるから、段階的に説明していこう。

注意

出典を示すために HTML Standard のサイトにある HTML 仕様書に連鎖しているが、web ページとして非常に重い造りになってしまっている。Java Script は切っておいた方が良いし、それでも読み込みにかなり時間が掛かるのは承知されたい。

html.spec.whatwg.org

はてなブログで詩を書くための HTML

段落になる P 要素と改行する BR 要素

はてなブログでは、エディタに「見たまま編集」が用意されているから、利用者の大半は此方で編集していることであろう。筆者もほぼ常用している。ただ、詩を書く上では困ることもある。

詩の第1行

詩の第2行

詩の第3行

と直接書き込んでも、別にテキストエディタで書いて貼り付けても、行間が間延びして見えるし、余白を取りたくもなる。ここで「HTML編集」に切り替えると、

詩の第1行

詩の第2行

詩の第3行

と表記されており、問題の一端がここに窺える。P 要素は paragraph つまり段落を構成する要素であり、段落の前後を改行する形になる。どうやら「見たまま編集」で改行を入れると、自動的に「段落の終わり」と構文解析されている。つまり「3行1段落」ではなく「3段落」と表記されているので、なんか間延びして見えるわけだ。だから「段落」を「改行」に書き換えてやれば良い。

改行 Blake line には BR 要素を使う。「見たまま編集」で改行のみを入れる機能があれば良いのだが、そんなボタンは用意されていない。なので「HTML編集」モードで

詩の第1行 

詩の第2行 

詩の第3行

と書き換え、「見たまま編集」に戻ると

詩の第1行
詩の第2行
詩の第3行

と、改行を段落分けから区別して表示してくれる。このとき と書いているのが P 要素の開始タグ、 が終了タグ。HTML(HyperText MarkUp Language) は SGML(Standard General MarkUp Language) の実用なので、その文法は SGML に拠り、<要素名> を「開始タグ」、</要素名> を「終了タグ」とし、開始タグ〜終了タグを「要素 element」とする。タグ開始を < 、タグ終了を > 、終了タグ開始は </ で表記 MarkUp するため、此等の文字は予約されているから、そのまま HTML で使うことはできない（ブログのエディタは自動変換）。そして、このように中身がある要素を container と呼び、BR のように中身のない要素と区別することがある。容れ物でない BR 要素は、終了タグを省略し開始タグのみ、スタイルシートは書けない。

余白を取るスタイルシート: margin

引用文を示すための BLOCKQUOTE 要素で字下げにはなるけれど、意味が違うので濫用はお勧めできない。そもそも HTML 書類は構造化文書といって、書類を意味論的な要素に還元して記述し、読むときに再構築するもので、見た目の意匠は切り捨てる意味論に基づく。このようにするのは、使用環境に左右されないユニヴァーサル・デザインを目指すためである。つまりハイパーテキストは、どんな画面で見ても印刷しても読み上げを聞くだけでも、きちんと意味の通る作品になっていなければならない。

それで文字や背景や余白をどうするか、といった意匠の指示は、スタイルシートに書く。HTML 書類では、CSS(Cascading Style Sheets)を使うことに決まっている。「垂れ下がり」というくらいには書き分けできるのだが、ここでは単純に、P 要素の開始タグに style 属性 attribute としてスタイルシートを書き込む。「HTML編集」で次のように書いてみよう。

詩の第1行 詩の第2行 詩の第3行

margin-left: 8%; というのが「スタイルシート」で、style="" がP 要素の「style 属性」である。属性 attribute は各要素ごとに HTML 仕様書で決められており、そこにないものは使えない。HTML 書類のスタイルシートは、CSS(Cascading Style Sheet) を使うことになっている。概ね C 言語の書き方に拠るので、スタイルシートの終わり、あるいは複数指定するときは ; で区切る。

BR 要素の表記が書き込んだものから変更されているのは、エディタが構文解析して直しているのだが、HTML 仕様書に従えば、元のままで構わない筈。これは、はてなブログの仕様というより、XML との互換性配慮だったと思う。改行が改行表示されないのは見た目に判り難いのだが、これは変えられないようで、「見たまま編集」に戻ると

詩の第1行
詩の第2行
詩の第3行

と表示される。余白を文字数で絶対指定するときは em を単位とし margin-left:4em; のように指定する。CSS では余白の指定として margin とpadding が用意され、その位置関係については CSS2.1 Box Dimensions を参照されたい。

対訳形式のスタイルシート

CSS の置き場所

スタイルシートの取り込み方は、CSS では3通りある。

独立したテキストファイルに書き込み、アップロードしておく。その URL を、各超越書類（ハイパーテキスト）の HEAD 要素内に、LINK 要素で指定する。超越書類読み込み時にインクルードされる
各超越書類の HEAD 要素内に、STYLE 要素の中身として書き込む
表示したい各 container 要素に、style 属性として書き込む

管理上、1. が最も楽なのだが、自分のサイトでないとできない。ブログでは 2 か3 しかなく、2. が使えると解ったので、ここに公開する。

「設定」でスタイルシート記入

管理画面から「設定」〜「詳細設定」に入り、「<head>要素にメタデータを追加」で次のように記入。

<style type="text/css">
article.parallel {
    display:flex;
    padding-bottom:1em;
    color:#000064;
    background-color:#fffff0;
}
p.parallelA {
    padding-left: 1em; 
    width: 50%; 
}
p.parallelB {
    padding-left: 1em; 
    padding-right: 1em; 
    width: 50%; 
}
</style>

対訳形式の要が display:flex; で、指定した要素内にある区画要素 block elementsを横並べにする。しかし対訳形式にするなら、横並べは2要素に限る必要がある。このスタイルシートでは、p 要素に限らず、区画要素なら何でも際限なく横並べにするので、プレビューしてみてアッと驚くこともある。

色指定は RGB の16進表示で、この組み合わせだとオフホワイトの背景に濃紺の字になる。お好み次第で、ここは変えても消しても構わない。

此処に書くスタイルシートに、margin は使えなかった。どう書いても無視されるので、サーバで予約されているようだ。他にも予約済のものが有るかもしれない。そのため、余白指定は padding を使う。width は範囲指定で、50% ずつ2要素とすれば、半々になる。p 要素の余白と範囲指定は、しなくても差し支えない…　と当初は考えていたけれど、やらないと非常に見苦しく感じることがある。