※　イメージ図（©photoAC）

私は、定年を過ぎてから、ホームページ（HP）を作り始めたのだが、最初はホームページの作り方についての知識はほとんどなかった。というより、漠然とではあるが、専用のソフトを使えば、Word 感覚でできるのだろうなどと思っていたのである。

なにか良い HP 作成ソフトはないかと思っていろいろ探してみたのだが、定年を過ぎて収入のなくなった状況ではあまりコストをかけたくはない。そんなときに Microsoft 社の HP 作成ソフト"Expression WEB ４"が無償化されたという All About の記事を見つけた。これはというので、さっそくダウンロードして、使ってみたのである。

今になってみると、かなり高機能なソフトなのである。しかし、ホームページを作り始めた当時は、その機能の内容さえよく理解できなかった。

そのため、別途 Microsoft Word でページを作成して、作成したページを Expression WEB ４にカットアンドペーストで貼りつけたのである。

当時もブラウザで見るとけっこう整っていた。そのため、そのときは、それで大丈夫だろうと思っていたのである。しかし、実際にはそんな方法では、きちんとしたホームページにはなっていなかったのである。

図のクリックで拡大します

図は、改修直前のサイトであり、サイト開設時に比べるとかなり修正している。図だけでは分からないが、グローバルナビゲーションはプルダウン形式となっている。

しかし、キービジュアルはスライドショーにはしていなかったし、ページトップへ戻るボタンもアニメーション対応はしていなかった。

ホームページは、簡単に言えば、本体はhtmlファイルで作られ、レイアウトや文字飾りをcssファイルで決めている。HTMLで文書を記述するときは、タグと呼ばれる記号で前後を囲む。例えば、次のような記述になる。

<h4>・・・表題・・・</h4>
<p>・・・内容・・・</p>

実際に、Windowsのメモ帳などの適当なエディタでこれだけ記述して、ファイルをhtmlファイルとして保存^（※）しただけでも、適当なブラウザで閲覧すれば読むことはできる。ただし、たんに文字が表示されるだけである。

※　標準テキスト形式で保存する必要がある。

レイアウトを何も指定していないので、ブラウザの設定したレイアウトで表示されることになる。内容の部分は、横幅が画面サイズと同じになり、行間隔がまったくない。このため、長文の文章の場合だと、実際に読むことは不可能に近い。

そこで、cssファイルを用いて表題のフォントを調節したり、本文の行間を調節したり、さらに画面上の位置を指定したりするわけである。そのために、通常は、HTML文書のタグに"名札"を付ける。次の図で"style1"とか"style2"と記述している部分がそれである。この名前は自由につけられる。

<h4 class="style1">・・・表題・・・</h4>
<p class="style2">・・・内容・・・</p>

そして、例えばcssファイル^（※）で次のように、装飾をするのである。

※　htmlファイルに記述することもできるが、通常はcssファイルに記述する。

.style1 {
　margin: 10px;
　font-size: medium;
　color: #0000FF;
　font-weight: bold;
}
.style2 {
　font-size: small;
　line-height: 1.7;
　margin-left: 2em；
}

なお、ここに示したcssファイルだと表題のフォントは青で太字になり、内容のフォントはやや小さめになる。

実際のホームページのhtmlファイルは、「内容」だけではなく他にも記述しなければならない事項がある。使用するcssファイルがどこにあるかを記述しておかなければならないし、HTMLの種類やバージョンを宣言するなどの必要もある。

また、HTMLページの表題を付けたり、内容を説明したりする文章もつけるのが普通である。しかし、htmlファイルで内容を決めて、cssファイルで様式を定めれば、それだけでもホームページは作れるのである。

といってしまえば簡単そうなのだが、これを"自動"でホームページ作成ソフトにやらせると、内容がきわめて複雑な形になってしまうのである。

例えば上記のhtmlファイルで使用した<h4>タグや<p>タグにはそれぞれ意味がある。<h4>のhは"heading"の略で、<p>のpは"paragraph"の略である。従って第４階層の見出しには<h4>、本文には<p>を使うと分かりやすいし便利なので、普通はそうするのだが、HTMLは自由度が高いので、適当なタグを使用したとしてもホームページはできてしまう。

そして、ホームページ作成ソフトにタグ付をまかせると、ソフトの方では、それが見出しなのか本文なのかは分からないので勝手に適当なタグを付けてしまうのである。これでは後で修正することが不可能になってしまう。このため最初にホームページを公表するまでに、同じ要素には同じタグが付くように、手作業でそろえることだけはした。

また、タグはひとつの段落の前後にだけ付けるわけではなく、文書の途中にもつけることができる。自動でタグ付けをすると、やたらにタグが付いて、本文よりもタグの方が多いという状況になる。

しかし、一つの文章にいくつもタグが付いていたり、同じ要素でもページによって別な種類のタグがついていたりするなど、かなりおかしな形になってしまった。実はCSSによる様式の指定は、htmlファイルにまとめて記入することもでき、タグの中に直接記入することもできる。Expression WEB ４にタグ付をまかせると、ほとんどをhtmlファイル中にまとめて記入し、タグに直接、記入することもある。

二重に指定したとしてもHTMLのルールで優先順位が決まっており、表示上の問題はないのだが、実際にhtmlファイルの中身をみると、二重、三重に指定があったりして、きわめて複雑になっていたのである。

たとえhtmlファイルが複雑でも、ホームページに新しいコンテンツを付け加えるだけなら、それまでのコンテンツと同じ形式で付け加えればよいので、簡単にできてしまう。そのため、ホームページ公開から10箇月近くはそのままにしていた。しかし、ちょっとした形式の変更をしようとすると、かなり難しいという状態になっていたのである。

例えば、すべてのページの<p>タグが付いている段落の行頭を一字下げたいというときに、cssファイルが共通になっていてhtmlファイルが整理されていれば、cssファイルを一か所だけ修正すればよいのだが、整理されていないとすべてのページのすべての段落を修正しなければならないことさえある。これでは改修に大変な手間がかかるどころか、現実には不可能に近いことになる。

また、ネットには、利用が自由に許可されている小さなボタンやツール類がかなり公開されており、これらを使ってみたいと思うこともある。だが、小さな改修であってもやはり、サイトの内容が整理されていないと、これらを利用することが難しいのである。

そんな状況ではあったが、サイト上部のグローバルナビ^（※）の部分にプルダウン方式を取り入れたくなり、ネットで探してみたところ、Webparkというサイトに「CSSで作ったドロップダウンメニューのドロップの動きいろいろ」という記事が載っていたのを見つけた。早速、参考にさせて頂いて導入したのだが、このときネットで紹介されている様々なツール類を採用するには、自らのサイトが整理されていることが必要であると、さらに痛感したのである。

※　各ページトップの横長のメニューボタンの部分。

また、ホームページの形式の小さな改修を行なおうとすると、公開されている既存のツール類を使うような場合であってさえ、HTMLやCSSの理論が全く分からないと難しいのである。一般に公開されているツールを利用するときは、さすがにExpression WEB ４を用いてワープロ感覚で行うことはできない。htmlファイルやcssファイルに直接、書き込むことになるが、そのまま書き込めるわけではなく、多少は自分のファイル用に修正しなければならない。

私の場合、ホームページの小さな改修を悪戦苦闘しながら続けていると不十分ではあるが自然に知識もついてきた。ところがHTMLやCSSの理論が分かりかけてくると、今度は逆に自分のサイトの、冗長で無駄な記述や、複雑な記述が眼についてくるのである。思い切って改修したくなってくるのだ。

また、WEBサイトはコンテンツの内容も重要だが、読みやすさや、見た目も重要である。みるからに整理されていないサイトに、細かな文字で文章がぎっしりと詰まっていたら誰も読もうとは思わない。そういうサイトでも素晴らしい内容が含まれていることもあるのだが、いくら内容がよくても誰にも読まれなければ意味がない。

やはりWEBサイトは見た目も大切ということである。一見、プロが作成したようなものは無理にしても、センスの良いサイトにしたいとは誰でも思うことであろう。

実際に自分でWEBサイトを作っていると、いろいろなWEBサイトを見ていて、「これはプロがつくっているな」とか、「これは社内の職員の自作だろうな」などと思えるようになってくる。当たっているかどうかは、もちろん定かではないが・・・。

では、どんなサイトだとプロが作成したと思えるのだろうか。これは自分でも明確に言うことはできない。いろいろなサイトを見て考えてみたのだが、決定的なものはよくわからない。しかし、私個人の感覚ではあるが、プロが作成したと思えるサイトの共通点は、次のようなものではないかと思えてきた。

もっとも、意外にGoogleやYahooがこの原則に適合していなかったりするし、素人が作ったと思われるものでもJavaScriptやJQueryを用いたと思われる動きのあるサイトはあるので、どれが決定的かは分からない。

また、私はナビゲーションやサイドメニューのボタンに、グラデーションを採用したのだが、これは最近のトレンドとは言えないのでご留意頂きたい。最近のトレンドはフラットなデザインである。Windows８が世に出たとき、例えばエクスプローラのスライドバーがWindows７の立体的な形からフラットなデザインに変更されていた。

最近のトレンドは、ボタンを立体化しないデザインが多様化されるようになっている。私のホームページのボタンは、開設した当初はフラットボタンを採用していたのだが、その後、グラデーション型に変更した。トレンドとは逆方向の変更だが、ユーザビリティを考えた場合、この方がよいのではないかと思っている。また、トップページのサイドメニューにアクア風のボタンを用いているが、これも実を言えば数年前のトレンドである。

さて、一方で、素人が作ったという印象を受けるのは、上記とは逆のサイトである。このほかにも、例えば、サイト全体が大きな画面の左側に表示されるものもいかにも素人的に見える。当初、私のサイトはトップページはセンタリングされて画面中央に表示されていたのだが、サブページが左側に寄って表示されていた。

これをいくつかのサイトの記述を参考に中央寄せにしようとし、一見、成功したように見えたのだが、後で気付いたら、たんに画面の左側からの一定の距離で表示されるようになっていただけだった。これでは、サイズの小さな端末で閲覧することが困難である。これも早急に解決する必要があった。

なお、ときどき、トップページにカウンタが設置してあるサイトを見かけることがあるが、私個人はこれを見ると、いかにも素人が作ったサイトという印象を受ける。頑張って作ったので、多くの人に訪問して欲しいという意識が見えて微笑ましい。

いずれにせよ、読者から信頼されるためにも、プロが作ったようなものにするのは困難にせよ、ある程度の見やすさを確保することが重要な課題になっていた。

とはいえ、①の人物が写った写真や、②のプロが作成したロゴやイラストを使用するのは費用の点から困難と思える。人物のビジネス用途向けの写真は、有料のものは^（※）高価すぎて個人では手が出ない。また、ロゴやイラストの作成も個人では無理である。ネットでは無償で配布されているものもあるが、なかなかぴたりとするものはないものである。

※　このときは知らなかったが、現実には無償の者が存在している。現在は、このサイトでも人物写真を使用している。なお、肌の露出の多い写真は、男女を問わず使用しない方がよい。

そこで、他の項目を採用して画面を見やすいものにすることとした。

とはいえ、個人で設置しているサイトの悲しさで、改修に力を入れればコンテンツの追加や改訂に用いる時間がなくなってしまう。私自身は、家族のための時間も確保したいと思っているし、その年は労働衛生コンサルタント試験を受けており、学科試験に受かったので面接試験の準備も必要だった。あまり自由になる時間は確保できない状況だった。

そこで、コンサルタント試験の面接試験が終了してから、目標を絞って修正を図ることとした。このときの目的は以下のことに絞った。

また、このときは時間の関係から、JavaScript／JQueryの採用と、画面サイズに応じた表示の調整（レスポンシブデザイン）の２点については将来の課題として残すことにした^（※）。

※　この２つは後に採用して現在ではサイトで利用している。このうち、JavaScript／JQueryは WEB サイトに動きをもたらすための技術である。例えば、サイトのトップの画像が自動的に切り替わっているが、これはこの技術を用いている。また、サイトの右下にトップページへ戻るボタンがあるが、これもJQueryを用いて動きのある表現をしている。

ただし、この技術以外でも、アニメーション的な動きは実現できる。ナビゲーションのプルダウンメニューは若干のアニメーションで上から降りてくるし、ボタンにマウスカーソルを載せると若干の時間をかけてボタンが様々な変化をする。これらはcss3の技術で実現しており、JavaScriptは使用していない。

※　イメージ図（©photoAC）

さて、このときの大改修では、①の html ファイルと css ファイルの整理にもっとも時間をかけた。それが最大の目的だったからである。Expression WEB ４が自動的に作成した部分はすべて削除した。見た目は前よりもおしゃれ感が出たが、実を言えば記述量はかなり減った。ナビゲーションのプルダウンメニューの部分を除けば、事実上、ゼロから記述した。

しかし、その後もしばらくは、Expression WEB ４を使用していた。自動作成機能は使用しなかったが、WEB 作成のエディタとして、しばらくは重宝したのである^（※）。

※　Expression WEB ４があまりにも古くなったことから、現在は Microsoft 社の Visual Studio Code を使用している。

css3 については、きちんと身に付けようと思って、大野幹著「10日でおぼえるCSS/CSS3入門」を購入した。いろいろある関係参考書の中で一番しっくりしそうなものを購入したのだが、購入後に奥付きを見てやや古いことに気付いて、一時後悔した。しかし、内容はしっかりしており、よくまとまっていて参考になった。図などもネットからダウンロードできるようになっており、個人的な使用・改変は自由とのことなので、一部使わせて頂いている。この本は、電車の中などで３～４回は読み込んだ。

HTML5 についてであるが、当時 WEB サイトで用いられている HTM Lは、HTML4.01、XHTML1.0、HTML5 の３種類があり、その後は HTML5 が主流になってくるものと予想されており、事実、そうなっている。

今となっては過去のことだが、当時はまだ根強く使われていた Internet Explore 8（IE8） 以前の一部の古いブラウザでは正確に表現できないものがあった。IE8 は Windows７に標準装備されていたものである。当時、一部の企業などでは Windows8 や 10 がインストールされたパソコンをわざわざ Windows7 にダウングレードしていたケースがあり、IE まで IE8 にしていた。

しかし、Windows７はともかく、IE8 は 2016 年１月にサポートが終わっており、IE までなぜ 8 に戻しているのか理解に苦しむが、そのような現実があったことは事実である。しかし、当時でも、IE8 のシェアは急速に低下すると思われていたので、思い切ってHTML5 にすることとしたのだ。

html ファイルと css ファイルを整理してしまえば、あとはそれほど難しいものではない。なお、サイトのボタンをグラデーション化しているが、これは基本的に CSS３の技術を用いている。ただし、ページの右上にある３つのボタンだけは CSS３で作成したわけではない。

先ほどの参考書に添付されていた図を流用して、２種類のボタンの画像を別途、画像ソフトで作って、重ねて表示しておき、マウスポインタが重なったときに上側の画像を消すという操作をしているのである。CSS3が普及する前は、普通に行われていた方法らしい。

表題の飾りは「CSS で作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン」を参考にさせて頂いた。またポイント画像は「超シンプル素材集」を利用させて頂いている。

また、各ページをセンタリングするようにし、トップの画像はすべて作り直した。もともとは各ページのトップ画像に、デザインのつもりで英単語を入れていたのだが、分かりにくいというご意見を頂いたので日本語にした。

またそれ以前はトップページの画像に、文字を重ねていたのだが、古いブラウザでユーザが文字の大きさを変更すると画面が乱れることが分かったので、文字を画像にしてしまうことで解決した。ただし、これは後に元に戻している。SEO対策からは、あまりよい方法ではないためである。

また、現時点ではトップページの文字数が多すぎるように思ったので、一部を別なhtmlファイルに移してリンクを張ろうかとも思ったのだが、プシュケとアモルの写真について、彫像の作者や展示場所がルーブル美術館であることは権利関係の絡みがあり、同じページ内に表示する必要がある^（※）。そうすると、他の部分を別ファイルにしても意味がないかと思いなおし、そのままにした。

※　当時はそう思っていたが、すでに彫像の著作権はパブリックドメインとなっており、その必要がないことが分かったので、現在は別なページに移している。

なお、"サイト内検索"のボタンと"ページトップに戻る"の２つのボタンを立体化した。これも最近のトレンドからは逆行している。

図のクリックで拡大します

このとき、目的が達成できなかったのは、左側のメニューのアコーディオン化である。アコーディオン化までは成功したのだが、なぜか左側のボックスの中に入らなかったのである。<div>タグで全体を囲んで、この<div>に幅を指定して左側に寄せているのでできないはずはないのだが・・・。半日ほど、努力してみたがうまくいかないので、そのときは今後の課題とした^（※）。

※　後に、改修に成功した。

ホームページのcssファイルを修正すると、ユーザ側でキャッシュに入っている古いcssをそのまま参照するため、表示が乱れるという現象が起きる場合がある。ただ、今回は、cssファイルの名前を変えてしまったので、ブラウザ側で新しいcssファイルを読みに行くはずなので問題はないはずなのである。ところが、実際にChromeで変更後のサイトを表示してみると画面表示が乱れていた。そこでキャッシュをクリアしてみると正常に戻った。この原因はよく分からない。

実を言えば、最近、当サイトのhtmlファイルの中で、ユーザ側でキャッシュを保存しないようにする設定をしたのだが、この設定をしておくと再読み込み時に時間がかかるという問題がある。しばらくはcssファイルを修正することもあるので、当面はこのままにしておいたが、現在はこの設定は削除している。

この改修の後、コンサルタント試験支援ポータルの立上げ^（※）、衛生管理者試験支援ポータルの完全htmlファイルによる立上げという内容の充実化を図った。これにより、当サイトの閲覧者数は飛躍的な増加を遂げることとなる。

※　この時点では、過去問の解説は PDF ファイルで公開していた。

さらに、独自ドメインの取得と常時 SSL 化^（※）を図り、セキュリティの強化を行った。また、コンサルタント試験支援ポータルで、それまで PDF ファイルだった過去問解説の html ファイル化などを行い、さらに PDF ファイルのコンテンツをすべて html ファイルに変更した。また、メールフォームの設置の他、コンサルタント・衛生管理者試験の過去問解説の使いやすさのために、問題文を簡易に参照できるモーダルウインドウの設置など行っている。

※　通信の暗号化のことである。常時SSL化を図ると、URL が http:// から https://に変更される。

※　イメージ図（©photoAC）

そして、2022年には、長年の課題であったスマホ対応を行った。そのときの記録は「本サイトのレスポンシブ化の記録」を参照して頂きたい。