月別アーカイブ: 2018年3月

『春を行く』良寛の詩に添えて

良寛禅師の漢詩

 

またまた、旅立つ若者へのはなむけの言葉を贈ります。良寛禅師の漢詩から『行春』を開始画面に表示しました。ドドーンと花火を上げてお祝い申し上げます。

はなむけの言葉

 

動作コード

<html>
<body onLoad="ctx.drawImage(img0, 52, 0, 397, 460);setTimeout('test()', 5000);">
<canvas id="sample" width="500" height="460" style="background-color:mediumblue; border:0px green solid;"></canvas>
<audio id="dodoooon" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/01/se-039ac.mp3"></audio>
</body>
<script type="text/javascript">
const X0 = 20;
const X1 = 0;
var img0 = new Image();									//新規画像オブジェクト,ロードする
img0.src = "http://aidesign.lolipop.jp/wp-content/uploads/2015/04/45fc2e10896580ca2a9af33c50b6f9c2.png";//ヘッダー画像, 727x843
var img1 = new Image();									//新規画像オブジェクト,ロードする
img1.src = "http://aidesign.lolipop.jp/wp-content/uploads/2018/03/Hanabi4.png";	//花火を打ち上げる画像, 500x460

var count = ctx = 0;
var canvas = document.getElementById('sample');			//描画コンテキストの取得
if (canvas.getContext)	ctx = canvas.getContext('2d');
else					alert("not support canvas!");

function test() {
	if(++count == 50)	document.getElementById('dodoooon').play();
	ctx.beginPath();
	ctx.globalCompositeOperation = "source-over";		//合成の形式を指定する
	ctx.drawImage(img1, X1, 0);							//描画内容を指定 ■■■ destination-in ■■■
	if(count < 300){
		ctx.globalCompositeOperation = "destination-in";//合成の形式を指定する
		ctx.fillStyle = "navy";							//青い円を描く
		ctx.arc(X1+240, 288, count+X0, 0, Math.PI*2, true);
		setTimeout('test()', 30);
	}
	else{
		ctx.fillStyle = "yellow";
		ctx.font = "24px 'MS ゴシック'";
		ctx.fillText("祝", 5, 25);
		ctx.fillText("旅立ち", 428, 25);
		ctx.fillStyle = "darkgreen";
		ctx.fillText("2018-03-26", 5, 455);
		ctx.fillText("\xA9TacM,2018 Ver0.01", 280, 455);
	}
	ctx.fill();
}
</script>
</html>

 

絵入り記事の作り方

縁取り画像に更なる画像

文字だけの記事は読みにくいです。そこに写真やイラストなどが入ると読みやすくなります。くどくど説明する文面より、一枚の写真が大いなる訴えを提起したことは数えきれないでしょう。

lady alpha

 

ただ、通り一遍の表現に飽き飽きして訴え力が低下することがあります。そこで画像を縁取りにする方法をハート型写真を作るで語りました。今回は、もう少し高度化して縁どる方法を示します。

重ね書き方法

画像や文字との重ね書きは二つのdiv領域をmargin-leftとmargin-topで重ねるやり方と、もう一つはposition:relativeとposition:absoluteによって重ね合わせる方法があります。前者がシンプルですが納得動作にならないことがあり、後者のやり方を採用しています。

縁取り型

縁取り型に文字や画像を入れてアクセントを出した表現をするには、まず鯛焼きを作るときなどに使う型を用意します。その手順を以下に示します。

ひな型になる画像を用意する

    • 絵心があれば、お絵かきソフトで型を作りますが今回は既存のイラストから作りました。

      右のような画像を用意して中に文面や写真を入れやすいように空洞を作ります。

    • Windows10に常備しているペイントで目や口を消します。その後、中を透明色にします。

      透明色にするにはフリーソフトのPaint.netの魔法の杖を使っていますが、ペイントでも可能のような気がします。透明色にすると上書きした時に下になった画像が消されずに表示されます。

    • 上の図のように背景が白色、型の内部を透明色にします。

HTMLコード

  1. div要素で表示領域を定義しposition:relativeで基準とします。
  2. 次に本命の図をimg要素で指定します。
  3. その後、熊を象(かたど)ったマスキング画像を指定します。二つの画像はposition:absoluteで表示位置を調整します。
  4. 上書きした画像の透明色部分だけが浮き彫り表示されます。


<div style="position:relative; width:210px; height:210px; border:0px green solid;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/03/sumire4.png" style="position:absolute; left:45px; top:45px; width:128px; height:135px; border:0px red solid;" alt="bear">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/03/bearShaped.png" width="210px" height="210px" style="position:absolute; left:0px; top:0px;" alt="shaped">
</div>


 

動作例

bear shaped

JavaScriptによる高級化

今回の例題は、4行からなるHTMLコードで成り立っています。ここで月始めに季節ごとの花を描画するためには、JavaScriptコードを追加します。

 

JavaScriptには日付を取得する関数があり、日付に同期した12種の画像を呼び出すようにプログラミングします。

象(かたど)り画像がひとつでは見栄えがしなければ、曜日ごとに変化させることが可能です。

近くの気象台から天気データを取り込んで、天候に応じた描画に改変することもできます。HTMLとJavaScriptによる機能を組み合わせて魅力的なブログ、ホームページを構築しましょう。天気情報を取得する関数も参考にしてください。

さいごに

画像、写真、イラストの扱い方をマスターして記事を装飾することにより魅力あるブログに変身します。

寒さから解放されたのを機に新しい分野に挑戦され、大いなる飛躍を期待します。

 

 

旅立ち2018に寄せて

新しい旅立ちを祝う

季節はめぐり巡ってきます。うれしい桜の開花ニュースが流れてきました。新たに旅立つ皆様へ、はなむけの言葉に代えてHTMLとJavaScriptで祝意を述べます。BGMの演奏に応じて風景と和歌の透過率が変わります。

 

雲路みちゆきゲーム

雲路(うんろ)とは

雲路(うんろ、くもじ)とは進路、針路、行き先のことです。JavaScriptのcanvasを用いてリサジュー曲線を描いてみました。リサジュー曲線(LissajousCurve)はパラメーターをちょっと変えるだけでさまざまな幾何学模様を表現することができます。

大学などにおいて、そのアカデミックな雰囲気を醸し出す形を象徴にした校章が採用されています。動作例のヘッダー画像に電気通信大学などのロゴマークを取り上げています。

リサジュー曲線を描くとき、その軌道を予測しクリックして当たったときの得点数を競うゲームを作りました。ゲーム名は軌道予測が合っていますが、ちょっとひねって、雲路みちゆきと怪しげな名前にしてあります。使い方を以下に示します。

ゲーム利用法

使い方は、開始ボタンをクリックしスタートします。リサジュー曲線の2000ヶ所に及ぶポイントを通過する際、進路を予測し的中すれば当たりとなり、得点が1点加算されます。

描画速度をinput要素のnumberタイプで3ms~30msに変更可能です。

初期値を15ms以外でゲームをする場合、速度設定後に開始ボタンをクリックします。

描画予測位置の少し先をクリックするとヒットしやすいです。描画速度が極端に遅い場合、的中回数が複数になる場合があります。

動作例

 

Animateのあれこれ

動きを求める

HTML文書は文字の他、画像や音楽を伝えることができます。石、竹、木簡、紙に思いを記録した時代を考えると隔世の感がします。インターネット時代にはHTMLの規約に則って多くの人に格安で迅速に意思を伝達することができるようになりました。

その中で動きのある文書にするにはJavaScriptによる表現が適しています。JavaScriptを使った動的表現を以下に示します。

花火打ち上げ©TacM,2018 Ver0.02

 

JavaScriptはHTMLから独立して語られるほど大きなテーマです。一方、CSSの中にAnimateプロパティがあり、コンパクトな定義ながら動きのある表現を可能にしています。

Animateはモダンブラウザならば、おおかた、動作するようですがIE11でつまずき解決に至ったので記録に残します。

IE11で動作させたい

transformとrotateを用いてdiv要素を回転させるに当たり、keyframesとanimateを駆使したところ、chrome, firefox, opera, edgeでは期待した動作になりましたが、IE11ではどうしても正常動作にはできませんでしたが、ネット上のアドバイスにより解決しましたので記録に残します。

動作コード

以下のサンプルコードにおいて、CSSは別ファイルにせず、style要素で定義し一つのファイルに納めました。

<html>
<style>
.box{
  width: 260px;
  height: 260px;
  background: lightcyan;
  animation: kf 30s ease 0s 1 alternate none;
}
@keyframes kf{
0%{transform: scale(.3);}
50%{transform: scale(.6) rotate(-45deg); background: red;}
100%{transform: scale(1) rotate(180deg); background: blue;}
}
</style>
桃の花言葉:天下無敵、気立ての良さ
<div class="box">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/03/peach568A.png" width="260" height="260"/>
</div>
</html>

変更箇所

7行目、animation: kf 30s ease 0s 1 alternate none running; ⇒
    animation: kf 30s ease 0s 1 alternate none;
上記のようにnoneの後のrunningを削除しました。インターネットを検索したら、ありがたい情報が見つかり採用したところ期待した動作になりました。

動作例

桃の花言葉:天下無敵、気立ての良さ

ひとこと

動作コードに示すように、JavaScriptコードを一行も使わないで動きのある文面を作ることができましたがまだ、納得のいかないところがあります。動きのある文書作りの一環として、animateを見直しもっと深く理解したいと考えています。

 

作者と作品にお別れ

文学作品の読み方

文学作品の読み方は人それぞれです。何かテーマを決め、その周辺をひとりの作家に関わらず横断的に読みほぐす方法があります。

一方、特定の作家を決めその作家の作品を縦断的に読む方法があります。当方は後者に属します。

この場合は多くの作品を発表している作家に偏りがちですが、長い期間にわたり楽しむことができます。

このたびの作家の作品はテレビドラマにもなり放映されたようですが、気が付きませんでした。その頃は藤沢周平、平岩弓枝、池波正太郎の作品に気を取られていたのでしょう。

作品の終結

ここ2~3か月、江戸時代の武家・町人の暮らしを描いたシリーズもの、北海道出身の女性作家の作品を追いかけました。

見習いの職人からスタートし、身分違いではないがきっぷのいい美人芸者との異質な組み合わせの思いがけない恋愛を成就させ、地道な生活を営む通い髪結い職人・同心の小者とその周辺を取り巻く人々の生き方がテーマになっています。

職人・芸者夫婦に息子が生まれ、主家の武家娘との交流が読者を惹きつけます。


別式女(べっしきめ:江戸時代、
貴人女性を警護する女武芸者)

二人の幼児期、幼少期、少年期を経て山あり谷あり修行の身の青年期を乗り越え、最大難関の身分違いの恋をクリアしてハッピーエンドを期待しながら読みました。

二人が人生の荒波に揉まれながらも登山ならば9合目まで到達していました。読者も否、私は次の進展を期待しましたが、作家が乳がんでお亡くなりになりました。作家本人が一番の心残りだったことでしょう。

さいごに
総合南東北病院の
ホームページより

作家のプロフィールや作品のあらすじを調べてから読書に入ればこのような不完全燃焼を体験することはないでしょう。それは楽しみを半減させます。

修行中の別式女と絵師のほのかな恋情も読み手の心の中で暖められ大切にされることでしょう。

作品の完結の前に作品の終結を迎えてしまいました。充実した3か月をありがとう。

カスタマイズの薦め

カスタマイズとはイージーオーダーのような中途(半)完成品をユーザーの好みに設定を変更することです。洋服や家具などは自由に改良を加えることが可能ですが、車や精密機器は改変は許されていません。

安全基準を守ることを義務付けられているものへのカスタマイズは難しいです。HTMLとJavascriptのサンプルコードを自分の好みに改訂することについてまとめます。

プログラミングの歴史

毎度、古い話で恐縮ですが知っていると何かの役に立つことがあります。プログラムコードを安易に変更して実行させるとコンピュータがクラッシュを起こす時代がありました。コンピュータシステムの総額が数億円する大型コンピュータで体験したことがあります。

今では未完成ソフトを実行しても、異常状態で停止するのは該当ソフトだけであり、他に影響を及ぼすことはほとんどなくなっています。ほとんど無いというのが実情ですが致命的なダメージを与えることは皆無と思われます。

改造の薦め

当ブログは古い内容が多く明るさに欠けていると思われていることでしょう。それは様々な理由があり、著作権の保護期間が保有者がなくなってから50年後までと定められていることが一因しています。

音楽を鳴らすにも人気のある楽曲には著作権が付いています。著作権問題をクリアするために古典や明治時代の唱歌などを取り上げています。

家族やサークル内だけで楽しむ場合は著作権を気にする必要がない場合もあります。そのような条件下ならば、軽快な音楽に変更してください。著作権の保護期間中なのにダウンロードできるものが多いです。

ダウンロードしても営利活動をしたり個人利用の範囲を超えて利用しなければ心配することはありません。どんどん、自分流を貫いて改訂してください。それでも自己責任で行うことは忘れないでください。

あまりに、いいものができたので公開したいという前に著作権のことを考えてください。ずいぶん前ですがYoutube上に公開した動画に一瞬、テレビが映って、その番組の著作権に抵触している旨の警告がありました。当初はビクッとしましたがロボットが行うチェック機能に引っかかってしまったようです。

著作権教育

背景に人気タレントが移った画像なども芸能事務所から苦情が届くかも知れません。

ディズニーや日本の人気芸能プロダクションの商品は厳格な著作権管理がされていると聞きます。

学校の教育課程上の運動会などで漫画の複製などは著作権者に無断で利用することができるようです。

このことが許諾を受けることなく無断使用できると生徒に錯覚を植え付けていないでしょうか。当ブログもすべて許諾を得ているわけでないので要自戒です。

実例と必要な周辺知識

遠く離れた家族や同好の友人に自分の作品を贈る例を以下に示します。例そのものは著作権保護期間が終了したものにしてあります。

このようにひな型になるものを入手して、少しずつ改訂してみてください。

BGMを気に入った曲にするには許されているときはリンクを貼る(張る)のが簡便なやり方です。それにはリンクの貼り方をマスターしなければなりません。

リンクの貼り方はネット上に回答がありますので検索してください。曲のダウンロードが可能ならば自分の環境に格納して参照します。彩りのあるサイトを始めるにはこれらの周辺知識をマスターしてください。カビが生えた、古臭いとの愚痴は自分で解消しましょう。

 松尾芭蕉の俳句
はる

 さくらけて

  しまひけり



あけぼの

 まだむらさき

  ほととぎす

©TacM,2018 Ver0.01

 

顔文字から絵文字へ

絵文字の薦め
🚑

今回は今までのHTMLとJavascriptの系譜から離れ、日本から発祥し世界的な広がりを見せている絵文字さらにemojiをフィーチャーします。右の絵は絵文字(ユニコード:0x1f691)です。

今や顔文字は市民権を確立したのだろうか。かつて報告書の氏名欄に、自分の名前の後にハートマークやビックリマークを付ける癖を持った女性がおりました。役所や事務所では違和感があります。

顔文字はインターネットが普及し、感情表現に使われ始めたと記憶しています。インターネットの普及は、洋の東西を問わず研究機関から始まりました。

よって硬派な雰囲気が漂っていて顔文字の類も怒ったり笑ったりが中心で、複雑な表情を含んだものは皆無でした。顔文字はキャラクタ文字を組み合わせたものから始まり、5~10文字程度が多かったようです。

笑い、泣き、驚き、混乱、苦笑などを表す次のような顔文字がありました。(^_^)、(^○^)、(^-^)、Σ(°Д°;)、(;_;) 、(T_T)、(@_@) 、(^_^;などです。そのうち、少数ながら顔などを象った顔文字が普及しました。それが発展して今や13万文字を超すemojiがUnicodeに定義される時代になりました。絵文字からemojiに時代は進みました。

顔文字から絵文字へ

嬉しい、悲しい、さみしい、照れる、しょぼん、怒る、泣くなど様々な顔文字が策定された今、複数の半角文字を組み合わせて表す絵文字は時代遅れと言えます。

(^○^) → 😄


顔文字から絵文字へと変更したとしてもユニコードは1~6バイトと多岐にわたるので、情報の節約になるとは限りませんがデバイスごとに絵文字が定義・規格化され文字形式で絵文字を表示することができます。その上、絵をカラーで表示するブラウザが多くなっています。

 

絵文字のカラー化

スマホのサポート状況は詳細はわかりませんがパソコン用バラウザでは、インターネットエクスプローラーを除きほとんどのブラウザでemojiはカラー表示されます。カラー表示をサポートしているブラウザではp、span、div要素のstyle属性やCSSによるcolor指定で絵文字に色を付けるのはできませんが、鮮やかなカラー表示は大きな魅力です。

動作例

歌の状況を絵文字で表示します。遅延動作ボタンをクリックしてください。

スーダラ節 ©TacM,2018 Ver0.01

 ユニコード:
歌の状況を絵文字で表示

 

HTMLとJavaScript第4弾

おさらいと大いなる飛躍

前回は詩や和歌を表示するのにふさわしい縦書をサポートしました。ここまでは、いずれもスタティックなものばかりでダイナミックなものはありませんでした。

今回から動的な記事作りに挑戦します。動的な記述はanimateタグを使うことによりHTMLだけの範疇でも実現可能ですが本格的な機能をサポートするにはJavascriptタグを使用します。

まず、バックグラウンドミュージックを鳴らして画像やメッセージを切り替えてみます。音楽の終了に同期して描画は終了になります。静から動への進展は大きな飛躍です。

処理を遅らせる

コンピュータにおいて処理を遅らせることが苦手です。機能の小さなパソコンで動作したアプリが高速になった新しいパソコンで誤動作するという話はよく耳にします。こられを本格的に処理するには同期やイベントについて調べなければなりませんが、今回は一定時間後に動作する関数setTimeoutを使って簡便な同期を実現します。

読込み時の処理

HTMLやJavaScriptは高速に対応できるマルチ処理を可能にしています。ビデオの描画では読み込みながら表示していることは進行状況を表示するバーで確認できます。このため、動作時間の短縮が図られますが読込みが表示動作に追い付かれて期待した動作にならないことがあります。

これを解消するために、onLoadというイベント関数を定義します。二つの画像データロード完了で切り替え動作が起動するようにしています。

音声の再生と画像やメッセージの切り替え

audio要素をJavaScriptから操作するためのさまざまなメソッドが用意されており、今回は再生メソッド(play)を使います。画像においてはcanvas要素のdrawImageメソッドを使って切り替えます。メッセージの切り替えはinnerHTMLメソッドを使ってdiv要素の指定データを切り替えます。

動作例

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

春雨はるさめ
 大欠伸おおあくびする
  美人びじんかな
美人・佳人・麗人
花言葉大百科
やせがえる
 けるな一茶いっさ
  これにあり

動作コード

<html>
<head>
<link rel="stylesheet" href="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.css" charset="UTF-8">
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.js" charset="UTF-8"></script>
</head>
<body>
<div style="width:490px; height:80px; font-size:32px; font-family:serif; font-weight:bold; color:salmon; border:0px solid orange;">
<p>&nbsp;小林一茶の俳句&nbsp;二首&nbsp;<span style="font-size:12px; color:magenta;">&copy;TacM,2018 Ver0.01</span></p>
</div>
<div style="position:relative; width:490px; height:260px; font-size:32px; border:0px solid maroon; line-height:1.8em;">
 <canvas id="bj0" width="250" height="250"></canvas>
 <Div class="h2vr_7" style="position:absolute; left:250px; top:0px; width:200px; height:240px; color:purple; border:0px solid darkcyan;">
 <ruby>春雨<rt>はるさめ</rt></ruby>に<br /> <ruby>大欠伸<rt>おおあくび</rt></ruby>する<br />  <ruby>美人<rt>びじん</rt></ruby>かな</Div>
</div>
<DIV id="mj0" style="float:left; width:230px; height:30px; border:0px solid tomato; font-size:24px; color:deeppink; padding-top:14px;">美人・佳人・麗人</DIV>
<DIV id="mj1" style="float:left; width:260px; height:30px; border:0px solid darkblue; font-size:24px; color:navy; padding-top:14px;">花言葉大百科</DIV>
<div style="clear:both; position:relative; width:490px; height:250px; font-size:32px; border:0px solid tomato; line-height:1.8em;">
 <Div class="h2vr_7" style="position:absolute; left:-10px; top:20px; width:200px; height:234px; color:green; border:0px solid orange;">
やせ<ruby>蛙<rt>がえる</rt></ruby><br /> <ruby>負<rt>ま</rt></ruby>けるな<ruby>一茶<rt>いっさ</rt></ruby><br />  これにあり</Div>
 <canvas id="bj1" width="256" height="234" style="position:absolute; left:200px; top:20px; width:256px; height:234px; border:0px solid tomato;"></canvas>
</div>
<audio id="bgm" src="http://aidesign.lolipop.jp/wp-content/uploads/2014/09/yorunowaltz.mp3" controls controlsList="nodownload"></audio>
<script type="text/javascript" charset="Shift_JIS">
const lady=["\u24ff小野小町", "\u2776見返り美人", "\u2777額田王", "\u2778カジュアルガール", "\u2779万葉美人", "\u277a浴衣とうちわ", "\u277b花火と夕涼み", "\u277c三月の鮠佳人葉津",
			"\u24ff誠実", "\u2776慈愛", "\u2777信頼", "\u2778つつましい幸せ", "\u2779田園の喜び", "\u277a温順", "\u277b思慮深い", "\u277c希望"];
// --------------- 美人 花ことば
const LR_width  = [300, 256, 300, 234];						//図形幅、図形高さ
const DS_width  = [250, 256, 250, 234];						//図形dest幅、図形dest高さ
const bjn = ["bj0", "bj1", "mj0", "mj1"];					//美人画像ID & 花ことばID
const gazo = ["http://aidesign.lolipop.jp/wp-content/uploads/2016/11/Bijinga.png",  "http://aidesign.lolipop.jp/wp-content/uploads/2018/03/Flower8.png"];
var Img = new Array();										//イメージオブジェクト
var time2 = count = 0;
	document.getElementById('bgm').play();					//夜のワルツをオルゴールで演奏
for (var i = j = 0; i < gazo.length; i++) {
	Img[i] = new Image();
	Img[i].onload = function() {
		if(++j==gazo.length) setTimeout('change()', 2000);	//二つの画像データロード完了で切り替え起動
	}
	Img[i].src = gazo[i];									//画像データをロード
};

function change(){											//画像切り替え
var k = (count >> 1) % 8;									//BGMの長さ(56秒)を8等分する、7秒間隔。
var n = count++ % 2;
var canvas = document.getElementById(bjn[n]);				//canvas取得
var ctx = canvas.getContext('2d');							//context
	document.getElementById(bjn[n+2]).innerHTML = lady[n*8+k];//メッセージ
	ctx.drawImage(Img[n],  k*LR_width[n],0,  LR_width[n],LR_width[n+2],  0,0,  DS_width[n],DS_width[n+2]);	// 切り替え画像
	if(count < 16)	time2 = setTimeout('change()', 3500);	//(56秒)を8等分し、さらに半分にする。16回*3.5秒
	else			console.log("Fine!");
}
</script>
</body>
</html>

HTMLとJavaScript第3弾

おさらいと今回の目標

前回は文字に色、サイズ、書体などの装飾を加えたり、俳句に彩りを添えるイラスト画像を追加しました。今回は俳句や和歌に相応しい縦書きに挑戦します。 今では縦書きをサポートする市民権を得た何種類かのライブラリが存在します。その中から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="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.css" charset="UTF-8">
<script src="http://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="http://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="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/frog3.png?2018-02-28" width="264px" height="250px"/></div>
</div>
</html>

次回予告

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