日別アーカイブ: 2018-03-01

HTMLとJavaScript第３弾

ものづくり筆耕ブログ

おさらいと今回の目標

前回は文字に色、サイズ、書体などの装飾を加えたり、俳句に彩りを添えるイラスト画像を追加しました。今回は俳句や和歌に相応しい縦書きに挑戦します。 今では縦書きをサポートする市民権を得た何種類かのライブラリが存在します。その中からh2vR.jsを採用し、小林一茶の俳句二首を縦書き表示します。

タグと改行

タグ（要素）について深堀りします。前回、p、div、spanタグを使いました。それらのタグは始まりのタグ（＜div＞など）とスラッシュのついた終わりタグ（＜/div＞）から成っています。 ブロックを形成し有効範囲を明示します。

このようにタグのほとんどは始まりと終わりの対になりますが、改行タグ（＜br /＞）やimgタグのように終わりが ないものもあります。linkタグも同類ですが単独タイプは極少です。よく使われるタグを理解することがHTMLマスターの早道です。

ライブラリの入手と参照法

h2vR.jsの公式サイトから縦書をサポートするライブラリをダウンロードし「ライセンス情報」を確認します。非営利ならばソフトウェアを無制限に扱うこと が可能なようです。h2vR.jsおよびh2vR.cssを参照できるようにします。 具体的にはHTMLコードの3～4行に示します。

サンプルコードの説明

  1. 1行、オーソドックスにhtmlタグを指定。
  2. 6～8行、いままで通りの横書き領域を定義。
  3. 9～15行、一首目の俳句を表示。左に図、右に振り仮名付き俳句を指定。
  4. 10行、float:leftで横並びを指定。
  5. 11行、float:leftで隙間なく俳句を横並びにする。
  6. 16行、clear:bothで横並びをリセット。
  7. 17行、第二首目の俳句を表示。左に振り仮名付き俳句、右に図を指定。
  8. 21行、float:leftで隙間なく画像を横並びにする。
  9. 23行、htmlコードの終わりを示す。

注意事項

    　
  1. 機能を拡張する際、直前のファイルを残しておいて、改訂時に誤動作した場合、両者の差分を確認できるようにする。
  2. 公開サーバー上にアップロードする際は、h2vR.jsおよびh2vR.cssを参照するコードは不要で自動的に言語処理系が取り込む。
  3. 動作例においては2～5行を削除している。
  4. タグと改行における図に示したように、CSSファイルは別ファイルにしてスタイルシートの共通利用を目指しますが、div, p, span要素の中のstyle属性で代用することができる。

動作例

  小林一茶の俳句 二首  ©TacM,2018 Ver0.01

春雨はるさめに
　大欠伸おおあくびする
　　美人びじんかな
やせ蛙がえる
　負まけるな一茶いっさ
　　これにあり

HTMLサンプルコード

<html>
<head>
<link rel="stylesheet" href="https://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.css" charset="UTF-8">
<script src="https://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.js" charset="UTF-8"></script>
</head>
<div style="width:480px; height:80px; font-size:32px; font-family:serif; font-weight:bold; color:blue; border:0px solid orange;">
<p>&nbsp;&nbsp;小林一茶の俳句&nbsp;二首&nbsp;&nbsp;<span style="font-size:12px; color:magenta;">&copy;TacM,2018 Ver0.01</span></p>
</div>
<div style="width:480px; height:280px; font-size:32px; border:0px solid maroon;">
 <div style="float:left; margin-left:0px;"><img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/12/akubi.png" width="250px" height="250px"/></div>
 <Div class="h2vr_7" style="float:left; width:200px; height:240px; color:purple; border:0px solid gold; line-height:1.8em;">
 <ruby>春雨<rt>はるさめ</rt></ruby>に<br />
　<ruby>大欠伸<rt>おおあくび</rt></ruby>する<br />
　　<ruby>美人<rt>びじん</rt></ruby>かな</Div>
</div>
<div style="clear:both; width:480px; height:250px; font-size:32px; border:0px solid tomato;">
 <Div class="h2vr_7" style="float:left; width:210px; height:240px; color:green; border:0px solid orange; line-height:1.8em;">
やせ<ruby>蛙<rt>がえる</rt></ruby><br />
　<ruby>負<rt>ま</rt></ruby>けるな<ruby>一茶<rt>いっさ</rt></ruby><br />
　　これにあり</Div>
 <div style="float:left;"><img src="https://aidesign.lolipop.jp/wp-content/uploads/2017/04/frog3.png?2018-02-28" width="264px" height="250px"/></div>
</div>
</html>

次回予告

次回には動きのある記事にするためにscriptタグを使って更なる高級化を目指します。