ホームページの作り方2

最近のホームページの作り方はどんどん変わってきています。

「最近の?」違和感がありますか?
そう感じたとすれば、上の1行がドッグイヤーと言われるITの世界の話を一般の世界の時間感覚で述べたからです。

一般の世界では10年15年は「最近」ですよね、
ついこの間甥が生まれたと聞いたばっかりなのに、この間会ったら中学生になっていた…
よくあるお話かと。

なので、「最近の」と書いたのですが、この「最近」という短い間に多くの変化がありました。

私がホームページを作り始めたころはHTML3の時代でした。
このころの作り方は「テーブルコーディング」と呼ばれます。
それ以前の白い地に黒い文字がただ横に並んでいるだけのホームページから、
「レイアウト」というものを意識したホームページに変わりました。
一つのページを表に見立て、その表の中に文字や画像を配置します。
EXCELでポスターを作るようなものですかね。
このころのサイトは広い画面で見ると左に寄っている事が多かったりします。
まだパソコンの画面解像度が低く、横幅が800ドットのノートPCでも横スクロールが
起きないようにするためでした。

 

数年してHTML4の時代になります。
スタイルシートやJavascirptを使ったページ作りが主流になり、
テーブルコーディングのサイトは「古い」と言われるようになりました。
これはHTMLは構造を作り、見た目はスタイルシートに任せるというHTML4の考え方に従ったものです。
たとえば、文字の色。
HTML3の時代はフォントの指定をするHTMLタグを使いましたが、HTML4の時代ではスタイルシートで
フォントや色を指定します。
同じくレイアウトもスタイルシートで構築するようになりました。
さらにマウスがリンク画像の上に載ると薄くなるといった初歩的な動的要素もスタイルシートが行っています。

JavascirptもHTML3の時代はちょっとしたお遊びでマウスカーソルを追いかけるものを出したり、
前述のマウスがリンク画像の上に載ると画像を「切り替える」といった動的な要素の実装を担当していました。
HTML4の時代ではJQuaryというJavascirpt用ライブラリの実用化でスタイルシートやコンテンツ自体の
動的変更が出来るようになり、表現の幅やフォーム等の利便性向上に貢献しています。

そしてパソコンのモニタサイズと画面解像度の拡大に対応して、
ホームページを作る時の横幅も時代が進むに従って、大きくなって行きました。
大きくなったことで、サイドメニューを設けたり、ページを縦に分割したサイドカラムが
よく使われるようになりました。

そして現代。
今はHTML5の時代です。
ビューポートやメディアクエリを駆使してマルチデバイスへの対応が行われています。
以前はホームページと言えば、パソコンで見るものでした。
i-mode用HTMLなどを使った携帯サイトなんてものもありましたが、それらは携帯向けサービスがあったり
屋外でサイトを見てもらう事がビジネスに繋がる企業などが用意する例外的な存在でした。
ところが、スマートフォンの普及で話が一変します。
画面サイズが拡大一辺倒だったのが、突然大昔のパソコンより狭い画面でホームページを見る人が
多数現れたのです。
しかも、タブレットと言う初期のノートパソコンくらいの画面解像度の機器も登場します。
この結果、「どんな大きさの画面の機器で見ても見やすいサイト」を作る事(マルチデバイス対応)が
現在の流れになっています。

ちなみに大きさと言っても話は単純ではありません。
解像度と見た目のサイズの問題があります。
スマートフォンでは実際の液晶の解像度と表示上の解像度が違ったりします。
スマホの場合見た目は小さくても、実際は高解像度の液晶なので、ビューポートを設定せずに
そのまま出すと字が小さくなって読めません。
そのため実際の液晶の解像度と表示上の解像度の違いなどを適切に処理するために
ビューポートと呼ばれるものを指定するようになりました。
また、画面解像度に合わせてレイアウトを調整するための仕組みとしてメディアクエリも
使われています。
そうやってスマートフォンでも見やすいように調整しないと今時のサイトとしては落第です。

なにしろ、2017年の今ではスマートフォンやタブレットでサイトを見る人のほうが多いという
統計が出ていますから。

さて、そんな時代の流れはホームページだけでなく、ホームページを探す検索サイトにも
影響を与えています。

 

人気ブログランキングに参加中なのでぽちっとお願いします!

タイトルとURLをコピーしました