背景バー
背景バー
背景バー

本サイトの大改修の記録

ページ
トップ


パソコンを見てショックを受ける

素人の私が1箇月で作成したホームページは、最初、様ざまな問題があった。それを最初に大改修したときの記録を紹介しています。

このときの大改修で、現在の形にかなり近くなってきました。




1.ホームページを大きく改修しようとしたきっかけ

執筆日時:

最終修正:


(1)ファイルの内容が複雑になってきた

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

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

今になってみると、かなり高機能なソフトなのである。しかし、ホームページを作り始めた当時は、その機能の内容さえよく理解できなかった。そのため、別途Wordでページを作成して、作成したページをExpression WEB 4にカットアンドペーストで貼りつけたのである。それでもブラウザで見ると整っていたので、そのときは、それで大丈夫だろうと思っていた。しかし、実際にはそんな方法では、きちんとしたホームページにはなっていなかったのである。

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

【HTML文書】

<h4>・・・表題・・・</h4>

<p>・・・内容・・・</p>

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

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

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

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

【HTML文書】

<h4 class="style1">・・・表題・・・</h4>

<p class="style2">・・・内容・・・</p>

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

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

【cssファイル】

.style1 {

 font-size: medium;

 color: #0000FF;

 font-weight: bold;

}

.style2 {

 font-size: small;

}

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

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

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

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

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

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

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

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

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


(2)小さな改修が困難になってきた

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

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

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

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

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

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

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


(3)信頼されるためにも見た目は大切

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

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

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

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

【プロが作成したように見えるサイトとは】

  • ① 人物が写っているコラージュされた写真が多用されている。
  • ② プロが写したと思われる写真が使用されている。
  • ③ プロが作成したと思われるイラストやロゴが使われている。
  • ④ 動きがある(JavaScript/JQueryを用いている)が、動きが多すぎることはなく、文字そのものには動きはない。
  • ⑤ トップページに文字数が多くなく、ひとつひとつの項目がごく短時間で読める。
  • ⑥ 表題が目立つようになっており、どこに自分の必要なコンテンツがあるかがすぐに分かる。
  • ⑦ 項目が整理されており、共通な項目は枠などに収まっている。
  • ⑧ ボタンがグラデーションされていたり、図形に影があったりする(これについては、最近の流行ではない。しかし、この程度のことでも、意外にプロが作ったように見えるものである)。
  • ⑨ 表示させるデバイスのWindowの幅によって、表示されるサイト内の項目の配置や大きさが変化する(※)

※ イメージがわかないかもしれないので、具体的な例として、平児の社会と政治を語るにリンクを張っておく。最近の改修だが、メディアクエリーを使用している。ブラウザの表示をウインドウにして、横幅を変えてみると、表示の配列や大きさが横幅に合わせて変化することが分かる。

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

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

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

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

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

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

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

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

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


2.ホームページを改修の目的

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

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

【最初の大改修時の目的】

  • ① htmlファイルとcssファイルの内容を整理して、無駄な表現をなくし、構造化を図る。
  • ② HTML5を採用する。
  • ③ ページごとに作成していたcssファイルの共有化を図る。
  • ④ 各サブページを画面の中央に表示できるようにする。
  • ⑤ 左側の"ページ内ジャンプ"のサイドメニューをアコーディオン方式にする。
  • ⑥ 各項目を枠で囲む。
  • ⑦ 各ページ内の表題をデザイン化して見やすいものにする

また、そのときは時間の関係から、JavaScript/JQueryの採用と、画面サイズに応じた表示の調整(メディアクエリー)の2点については将来の課題として残すことにした。

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

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


3.ホームページを改修する

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

しかし、その後もしばらくは、Expression WEB 4を使用していた。自動作成機能は使用しなかったが、WEB作成のエディタとして、しばらくは重宝した。(※)

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

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

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

ただ、InternetExplore8以前の一部の古いブラウザでは正確に表現できないものがあるのだ。IE8はWindows7に標準装備されていたものである。当時、一部の企業などではWindows8や10がインストールされたパソコンをわざわざWindows7にダウングレードしていたケースがあり、IEまでIE8にしていた。

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

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

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

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

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

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

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

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

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

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


4.最後に

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

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


プライバシーポリシー 利用規約