30歳で未経験からWebデザインを始めた話

divタグ?CSS?数年ぶりにサイトを作ろうとしたら色々変わってた

30歳で未経験からWebデザインを始めた話

連絡BBS、キリ番、相互リンク、画像への直リンク禁止、隠しページ、勝手に流れ出すMIDI。

90年代後半~2000年初頭ころ。
インターネット上では、個人が作成したホームページで趣味や思い出を公開するのが流行していました。(今でいうSNSやブログの様な物です。)

私も当時ホームページを運営しておりましたが、高校受験を理由に2年ほどで閉鎖。
その後15年以上webサイト制作から離れていました。

そして2019年。久々にwebサイト制作に着手。昔取った杵柄で何とかなるっしょ!と始めたものの、当時の知識やノウハウは一切通用しないことを察しました

サイト制作、2000年頃と現代の違い

一番の違いと感じるのは、文字の色やサイズ、背景の色、その他レイアウトを行うのがHTMLではなくCSS(カスケードスタイルシート)と呼ばれるファイルで行う様になったこと。

HTML上で<font size=”4″ color=”#0000ff”>と入力して文字を装飾したり、<table>タグでメニューを配置してレイアウトを組むといったことは行いません。

当時の様にHTMLファイルに<table>タグを使用してレイアウトを行ったサイトはテーブルレイアウトと呼ばれており、先述のCSSを使用した物はフルCSSレイアウトと呼びます。

現代ではフルCSSレイアウトが主流になっています。

HTMLはマークアップ(文字や画像を配置し、意味付けをする)を行うための物。CSSは装飾を行っていく物、と言った様に役割が分担されています。

テーブルレイアウトが少なくなった理由

HTMLでも装飾できるのに、どうしてわざわざCSSを使うのか。

私は以下の理由から、CSSを利用したスタイリングにメリットがあると考えています。

  • CSSの方が柔軟性のあるスタイリングが出来る
  • 複数のページで同一のCSSファイルを使いまわせる
  • レスポンシブデザインに対応出来る

CSSの方が柔軟性のあるスタイリングが出来る

思い出してみて下さい。テーブルレイアウトが主流だった時代、下記の様なボタンやバナーを設置しているサイトが多く有りましたね。

DoGgyブログ

当時はペイントソフトで画像を作成していました。
しかし、CSSで以下の様に数行打ち込むだけで簡単に再現出来てしまうのです。

.btn {
font-size: 20px;
line-height: 40px;
width: 200px;
font-weight: bold;
text-align: center;
background-color: #ffc5c5;
border: 10px outset #fccfcf;
}

さらにCSSではアニメーションを付けることも可能です。

DoGgyブログ

この様に、HTMLでは表現できないレベルの物がCSSでは表現できるのです。

複数のページで同一のCSSファイルを使いまわせる

cssファイルはhtmlの<head>タグ内に下記の様な記述をして呼び出します。

<link rel=”stylesheet”href=”css/style.css”>
(意味:スタイルシート用に「css」フォルダの中の「style.css」を参照しなさい)

そして複数のHTMLファイルから同一のCSSファイルを参照する事が可能です。

例えば、「index.html」と「profile.html」で共通のフォントや壁紙、ボタン等のパーツを使用したい場合、同じCSSファイルを参照させるだけで実現する事ができます。

これにより工数を削減できるだけでなく、ページ毎に数値の指定ミス等による誤差が無くなります。また変更が必要になった際にも一ヵ所の記述を変えるだけでOKというメリットもあります。

レスポンシブデザインに対応出来る

以前と違い、webサイトを閲覧する環境はパソコンだけで無く、スマートフォンやタブレット、ゲーム機など多岐に渡るようになりました。

最近は、同じURLなのにパソコンで見た時とスマホで見たときでレイアウトが違う!というwebサイトが大半を占めていますよね。これをレスポンシブサイトと呼びます。

同じURLなのにレイアウトが何種類もあるなんて不思議!どういう仕組みなんだろう?

はい、CSSの「メディアクエリ」という仕様です。

表示された画面環境に応じて、表示するレイアウトを切り替える機能です。同じCSSファイル内にPC用レイアウト、タブレット用レイアウト、スマホ用レイアウトを事前に作成しておき、メディアクエリで来訪者の環境(ディスプレイのサイズ)を判別し、適切なレイアウトを表示させる事が出来るのです。

<div>タグ、<section>タグ、当時は使わなかった

最近のwebサイトのhtmlファイルでは、<div>や<section>等、当時見慣れないタグが頻繁に使われていますね。

これらは、「<div>~</div>で囲った部分の背景を青くする」といった様に、CSSでスタリングする際に、対象を指定するための目印を付けるのに用いられます。(ざっくりのイメージです)

HTMLはSEO対策に大活躍

html

CSSってすごいじゃん!これならスタイリングは全部CSSにお任せだね!・・・あれ?
HTMLさんって文字とか画像とか置いて目印付けるだけ?CSSさんと仕事量に差がありすぎじゃない?

いえいえ、決してそんなことはありません。

確かにテーブルレイアウト全盛時代と比べて、サイトの見た目に関わる部分はのお仕事は少なくなりました。

しかしその分、HTMLさんはSEOで活躍してくれているのです。

HTMLでSEO対策(検索エンジン最適化)を行う

がっつり説明すると長くなるので、箇条書き形式でざっくりお伝えします。

  • webサイトの来場者数を増やすために、googleの検索結果で上位に表示させたい
  • 上記を達成するための取り組みを「SEO対策」という
  • 検索結果の順位はgoogleのプログラムが巡回、評価し決定
  • 評価プログラムは人間と違い、テキスト情報だけでサイトの内容を理解することが出来ない
  • HTMLが評価プログラムにも解るようにサイトの意味を伝えてあげる
  • 評価プログラムが適切に内容を理解できたサイト=良質なサイトと認められやすい

つまり、HTMLはサイトの来場者数に直接的に影響してくる部分を担っている訳です。
すごいよHTMLさん。

もちろん、googleの検索プログラムから良い評価を得るためには適切にマークアップをすることが必須です。

おわりに

冒頭で「BBS」や「キリ番」と入力した瞬間、昔を懐かしむあまりタイピングの手が止まってしまいました。笑

西暦2000年頃、中学生だった私は某人気プロ野球ゲームの攻略サイトを運営しておりました。

友人が作った自己紹介サイトを見て、自分でも作ってみたい!と思ったのがきっかけでした。

「ホームページを作るソフトって何円で買えるの?」と友人に聞いたところ、「タダだよ。メモ帳ってソフト。知ってる?」と言われ、色々な意味で衝撃を受けた記憶が有ります。

それからYahoo!Japanで「メモ帳 HP作成」と検索し、HTMLの勉強に没頭して…と、また思い出に浸ってしまいました。

本記事では、私が数年ぶりにwebサイト制作に触れた際に沸き上がった 疑問 について記載しました。私と同じ様な境遇の方に、少しでもお役に立てたなら幸いです。

トップページへ戻る