日別アーカイブ: 2018-02-27

HTMLとJavaScript第2弾

おさらい

前回はHTMLについて何も知らないとこらからスタートして動作させる例をあげました。表示したい文言をテキストファイルにし、拡張子をhtmlにしてファイルに保存するだけでした。今回はこれらを拡張して高級化を図ります。

拡張子(かくちょうし)

その前に拡張子について考えます。拡張子とは、ファイルの種類を識別するために使われるファイルの末尾にある「.(ピリオド) + 英数字3文字」のことです。今では英数字3文字に限定されることはありません。例えば、テキストファイルだと「.txt」、HTMLファイルだと「.html」が拡張子です。

ファイルの扱いに慣れてくると拡張子を気にすることがなくなりますが、拡張子を明示的に表示する方法を示します。

ファイル名がABCD.TXTの場合、Windows10ではABCDと表示され、ABCD.DOCなどと区別しにくいことがあります。

拡張子をも含めて表示させるには『Windows10 – ファイルの拡張子を表示/非表示にする』 などを参照ください。

拡張子はアプリケーションに関連を明示するものです。数を数える際の数詞のような役割を持ち、相応しいアプリケーションの起動を手助けします。

機能の追加

前回に追加する機能を示します。

①文字に色、サイズ、書体などの装飾をする。
②俳句に合ったイラスト画像を加える。
③領域に枠線を付ける。
④読みにくい漢字に振り仮名をふる。
⑤バージョン情報を付ける。

領域に枠線を付ける部分は枠線なしになっています。コピペするときに、border:0pxをborder:1pxに2ヶ所、変更します。

俳句を表示する

小林一茶の俳句 二首

やせ蛙

 負けるな一茶

  これにあり


春雨に

 大欠伸おおあくびする

  美人かな

©TacM,2018 Ver0.01

HTMLコード

<div style="width:240px; height:70px; font-size:22px; font-family:serif; font-weight:bold; color:blue; border:0px solid orange;">
<p>小林一茶の俳句 二首</p>
</div>
<div style="float:left; width:240px; height:490px; font-size:32px; border:0px solid maroon; line-height:1.0em;">
<p style="color:green;">
やせ蛙<br /><br />
 負けるな一茶<br /><br />
  これにあり</p>
<br /><p style="color:purple;">
春雨に<br /><br />
 <ruby>大欠伸<rt>おおあくび</rt></ruby>する<br /><br />
  美人かな</p>
<p><span style="font-size:12px; color:navy; font-weight:bold;">&copy;TacM,2018 Ver0.01</span></p>
</div>
<div><img src="https://aidesign.lolipop.jp/wp-content/uploads/2017/04/frog3-300x284.png" width="264" height="250"/></div>
<div><img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/12/akubi.png" width="250" height="250"/></div>

あとがき

今回は16行のHtmlコードですが、満足のいく仕上がりになるまで結構な時間がかかりました。慣れれば短時間で作成できるようになります。完成品を少しずつ手直しして所望するものに仕上げる際の速成方法に応用してください。