CSS3+HTML5
- このHPをいじくっていると、ときおり私が用いているHTML/CSS文法に時代遅れを感じることがある。weblikerというWebサイトにもっとも使い易いvalidation toolとしてDirty Markupが挙げてある。ソースコードを貼り付けて「clean」を押すと、文法チェック、汚いコードの整形、改行やインデントの自動挿入が行われるとある。私の最新の記事「敗戦の反省」に対してやってみた。ただし本文は、一段あれば十分だから、大半は省略した。
まず「敗戦の反省」の原コードは
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META NAME="GENERATOR" CONTENT="JUSTSYSTEMS Ichitaro19">
<META NAME="CREATIM" CONTENT="12:39:21">
<META NAME="BUILD" CONTENT="2019/8/24">
<style type="text/css">
<!--body {line-height: 150%;}-->
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<TITLE>敗戦への反省</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF"
VLINK="#FF0000"><BASEFONT SIZE="4">
<H3 ALIGN="LEFT">敗戦への反省</H3>
<IMG SRC="CUT_785.GIF" ALIGN="RIGHT">
<DL><DD>太平洋戦争敗戦75年目と言う節目だからか、あるいは元号が令和に改まった初年だからか、例年よりも力の入った関連解説報道がメディアを賑わした。(以下省略）
</DL>
<H4 ALIGN="RIGHT">('19/8/24)</H4>
<CENTER><A HREF="WELCOME.HTM"><IMG SRC="BTN_122.GIF" BORDER=0></A></CENTER>
</BODY>
</HTML>
である。その自動修正コードは
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="JUSTSYSTEMS Ichitaro19" name="GENERATOR">
<meta content="12:39:21" name="CREATIM">
<meta content="2019/8/24" name="BUILD">
<style type="text/css">
<!--body {line-height: 150%;}-->
</style>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>敗戦への反省</title>
</head>
<body bgcolor="#FFFFFF" link="#0000FF" text="#000000" vlink="#FF0000">
<basefont size="4">
<h3 align="left">敗戦への反省</h3><img align="right" src="CUT_785.GIF">
<dl><dd>太平洋戦争敗戦75年目と言う節目だからか、あるいは元号が令和に改まった初年だからか、例年よりも力の入った関連解説報道がメディアを賑わした。（以下省略）</dd></dl>
<h4 align="right">('19/8/24)</h4>
<center>
<a href="WELCOME.HTM"><img border="0" src="BTN_122.GIF"></a>
</center>
</body>
</html>
となった。
- 修正点は冒頭の<!DOCTYPE html>の追加、英大文字→英小文字、</dd>の追加、shift_jis→utf-8 であった。<!DOCTYPE html>は本HPの「JavaScript入門」（'14）のタネ本にお呪いと思って頭に付けよとあった。文書がHTML5で作成されたものであることを宣言している。ほとんどCSS利用のない私の簡単なHTML文では無くても同じ結果になる。
- 小文字化は最近のコード文ではかなり徹底されているようだが、私のような"古"世代では大文字が普通だった。今でもそれで通用する。</dd>は省略可能というルールになっている。付けた方が区切りがはっきりはする。日本語コードをutf-8とするのは最近の傾向のようだ。でも我ら世代はshift_jisが大半だ。
- 想定内の修正コード文だったので一応安堵はした。Weblikerの記事には「（HTMLもCSSも）バージョンによって文法が微妙に違う」と言う気になる話がある。「JavaScript入門」（'14）にあるように、私のHPはもう20年以上昔のテキストに基礎を置いている。実際は一太郎2009の「HTML形式で保存」のボタンを押してのち、修正を加えるだけにしている。一太郎2009は10年昔の文法による変換だ。見よう見まねでテキストにないタグを増やしてきた。Googleからスマホでも読めるようにしろと云う指示が来たときは、大慌てで対策コードをWebサイトからコピペで填め込んだ。
- 「HTMLクイックリファランス」というWebサイト（http://www.htmq.com）にウェブ制作チュートリアルというページがある。全30章建てで目次を見るとたいそう充実しているように見えた。もともとは同じ著者による秀和システム社の本だそうだ。このHPでは、既述の通りの制作歴史の背景から、CSSの役割はごく僅かだが、本式にスタイルシートで形を整えた、ユーザーとの対話が出来る多彩なHPを作るつもりなら、もってこいの入門書だろう。
- HPを開いてくれるユーザーのPCのOSはいろいろだし、必ずしも最新のヴァージョンになっていないことへの配慮が所々に出てくる。ことに事業商用のHPではこの点は大切だ。スマホは受け付けるがガラケーではダメというコードもあるらしい。PCと携帯ではそもそも画面のサイズが違うし、スマホでは縦横の問題がある。その対応方法もしっかり述べられている。
- 最終章は「PHPでメール送信フォームを作る」という題だ。ユーザーとのやり取りのためのフォームの解説である。私のHPにもかってはメール送信フォームがあった。今は外している。そのメール送信フォームにはなかった未入力チェック機能が解説してある。そのためにHTML語のPHP文に<?php･･･?>なるコードが入って、その中の入れ子のif文により、FortranやC言語と言ったプログラミング言語のように、コンピュータが考えるプログラムになる。「危険な文字列を入力された場合にそのまま利用しない対策」は「サイバー攻撃」（'18）の主題だった。その具体策も述べられている。
('19/8/27)
