今週のお題「最近、初めて〇〇しました」
序
見開きの和英対訳あるいは新旧対照表みたいな表示を、TABLE 要素を使わずに書く。これは旧世代の HTML 4.0 + CSS 2 でも、float を使って出来た筈だが。その頃は上手く行かず、そのうち HDD も自分も壊れてやっていなかった。はてなブログは HTML を書けるので、やってみることにした。そういう訳で、自分としては初めての試みとなる。
手順
要は、段落要素 P を横並びに出来ればよい。
- P 要素を2つ書く
- DIV など上位の区画構成要素 %block で括る
- 意匠をスタイルシートで整える
これで出来る筈だ。CSS(Cascading Style Sheet) を書ける場所は
- 別にアップロードしたテキストファイル
- Head 要素内の Style 要素内
- Body 要素内の各区画構成要素の開始タグ
と複数あって、重箱のように重ねて上書きできるから Cascading という。はてなブログでは、1. が標準装備され、2. を「デザイン」から設定でき、3. を「HTML 編集」タブで編集できる。そこで、3. を試してみよう。試行環境は、たぶんスマートフォンで見るのが最も厳しいので、手持ちの Xperia に標準装備の Google Chrome でやってみる。実は 2. が使えなかったので、3. しかなかった。
準備：HTML 編集
移植作業中の『吸血鬼』序文に引かれたバイロン卿『チャイルド・ハロルドの巡礼』の一部を例として、「見たまま編集」タブに貼り付ける。
空は變じぬ！何等の變！あゝ夜よ、
あらしよ、暗よ、竒しくつも強し爾等は、
されど強くていみじかり、譬へば女性の黒き目の
光に似たり！遠くあなたは
峰より峰に鳴り渡り、巖の間（あひ）に生ける雷霆（らいてい）
をどりとぶ、たゞ一片の雲のみならず、
The sky is changed!—and such a change; Oh, night!
And storm and darkness, ye are wond'rous strong,
Yet lovely in your strength, as is the light
Of a dark eye in woman! Far along
From peak to peak, the rattling crags among,
Leaps the live thunder! Not from one lone cloud,
あらゆる山今舌を得つ、
ヂューラは霧のおほひつらぬき、
高く彼女に叫び叫ぶ歡喜のアルプスの聲に答ふ。
But every mountain now hath found a tongue,
And Jura answers thro' her misty shroud,
Back to the joyous Alps who call to her aloud!
「HTML編集」タブに切り替えると
<p>空は變じぬ！何等の變！あゝ夜よ、</p>
<p>あらしよ、暗よ、竒しくつも強し爾等は、</p>
<p>されど強くていみじかり、譬へば女性の黒き目の</p>
<p>光に似たり！遠くあなたは</p>
<p>峰より峰に鳴り渡り、巖の間（あひ）に生ける雷霆（らいてい）</p>
<p>をどりとぶ、たゞ一片の雲のみならず、</p>
<p>The sky is changed!—and such a change; Oh, night!</p>
<p>And storm and darkness, ye are wond'rous strong,</p>
<p>Yet lovely in your strength, as is the light</p>
<p>Of a dark eye in woman! Far along</p>
<p>From peak to peak, the rattling crags among,</p>
<p>Leaps the live thunder! Not from one lone cloud,</p>
<p>あらゆる山今舌を得つ、</p>
<p>ヂューラは霧のおほひつらぬき、</p>
<p>高く彼女に叫び叫ぶ歡喜のアルプスの聲に答ふ。</p>
<p>But every mountain now hath found a tongue,</p>
<p>And Jura answers thro' her misty shroud,</p>
<p>Back to the joyous Alps who call to her aloud!</p>
あ。ダメですねコレは… はてなブログでは「見たまま編集」に書いた記事を自動的に HTML へ変換してくれるのだが、そのプログラムは改行要素 BR を知らないようだ。また、要素 P を纏める要素 DIV か ARTICLE は、自分で書くしかない。CSS 抜きの HTML は、次の通り。
<DIV>
<P>空は變じぬ！何等の變！あゝ夜よ、<BR>
あらしよ、暗よ、竒しくつも強し爾等は、<BR>
されど強くていみじかり、譬へば女性の黒き目の<BR>
光に似たり！遠くあなたは<BR>
峰より峰に鳴り渡り、巖の間（あひ）に生ける雷霆（らいてい）<BR>
をどりとぶ、たゞ一片の雲のみならず、</P>
<P>The sky is changed!—and such a change; Oh, night!<BR>
And storm and darkness, ye are wond'rous strong,<BR>
Yet lovely in your strength, as is the light<BR>
Of a dark eye in woman! Far along<BR>
From peak to peak, the rattling crags among,<BR>
Leaps the live thunder! Not from one lone cloud,</P>
<P>あらゆる山今舌を得つ、<BR>
ヂューラは霧のおほひつらぬき、<BR>
高く彼女に叫び叫ぶ歡喜のアルプスの聲に答ふ。</P>
<P>But every mountain now hath found a tongue,<BR>
And Jura answers thro' her misty shroud,<BR>
Back to the joyous Alps who call to her aloud!</P>
</DIV>
スタイルシート記入
display: flex;
これで自動的に振り分けされるが、半々にするには
display: flex;
justify-content: space-around;
とすれば良い、筈だが。
<DIV style="display: flex; justify-content: space-around;">
<P>
<P>
これは思うように行かなかった。左右横並びにはなるものの、半々にならないし、左右の文字列がくっついてしまう。そのスクリーンショットを……と思ったが、思ったより面倒なので後回し。面倒臭いが、P 要素にもスタイルシートを入れるしかないようだ。
結論（暫定）
<DIV style="display: flex;">
<P style="width:50%; margin-right:0.5em;">左側文章</P>
<P style="width:50%; margin-left:0.5em;">右側文章</P>
</DIV>
HTML + CSS をこのように書けば、左右半々に振り分けられ、間に1字分空けられることを確認できた。
とか書いていたら、日付が替わってしまったから、取り敢えずここまでにする。また後で。
