[12-2] なんでHTMLとCSSはセットなの?

「ほんっとにはじめてのHTML」なのに、CSSがかなりしつこく登場していますね。
ここらで1度、HTMLとCSSの関係について整理しましょう。
セットで使わなきゃならない、ちゃんとした理由があります。
それは「HTML文書」の本来のあり方の確立と、「アクセシビリティ」の確保です。

昔はぜ〜んぶHTMLだけで書いてた…!

1990年代中頃、私がウェブサイト制作を始めた頃ですが、
この頃にはもう既に「CSS」はあったんですけど本格的には使っておらず、HTMLソースだけでサイトを作っていました。CSSを使う事そのものが、あまり一般的でなかったんです。

その理由は、CSSをサポートしているブラウザと、そうでないブラウザが混在していたから。
そして、各ブラウザはシェアを獲得しようと独自に(かなり勝手に)HTMLタグを作っていた。
当時は何でもアリの「ブラウザ無法時代」だったんですよ。(遠い目…)

★「ブラウザの歴史」については「CSSレイアウトメモ:コラム_HTMLの歴史とCSS」のページ下部「ブラウザの歴史」が参考になるかも。見てみてください。

ヘタにスタイルシートを使うと、ビジター(ユーザ)のブラウザによって見た目が変わってしまうので、どんなブラウザでも同じ見た目にするために、table要素でレイアウトを組んでいました。
文字の色や大きさを変えるHTMLタグを駆使したりね。

正しくないtableの使い方

デザイナーにとってはこれがベストの方法だったんです。
誰でも同じように見えるようにしなければクライアントの不利益になる。ビジターにも不利益。
この「誰でも同じように」っていうのが、とっても大事なんです。

ちなみに、今は亡きMacromedia社のFireworksも、スライスで切ってHTML出力すると、tableで組んで出してきましたしね。
(Fireworks、Dreamweaver、Flashという優秀な製品は、もともとMacromedia社製品。今はAdobeさんの製品。買収されてしまったんですなあ。)

ただし、table要素は、その名のとおり本来「表組」を構成するためのもの。
これを無理無理にレイアウトに使うのですから、当時はかなり違和感はありましたけどね。
tableタグのせいで、HTMLがめっちゃ長く、しかも複雑怪奇になるし。
tableの意味はまったく無いし。<th>を使う理由だって、単に「文字が太くなるから」だったんですから…。

正しいtableの使い方

W3Cが交通整理に乗り出した!

サイトの見た目の情報をHTMLに大量に書き込むため、HTMLソースがやたらに長く複雑になってしまった。それでも、ブラウザによっては、見れるページと見れないページがある。
しかもこれでは、HTML本来の用途「文書構造を表示する」が達成されていない。
そろそろ誰かどうにかしなきゃ。

ということで1996年、W3Cが「CSS1.0」をまとめ見栄えの情報はCSSで定義するよう勧告しました。
「HTMLは文書構造のみを、CSSでレイアウトを」と提唱したのです。
言わば、みんな好き勝手にドライブしてる無法地帯だったのを、
W3Cが交通整理に乗り出したってとこですね。

★W3C (World Wide Web Consortium) とは、WWW (World Wide Web) で利用される技術の標準化を促進する団体。
Web技術に強い企業・学術団体・個人が集まって、1994年に発足しました。
htmlについても標準化した企画を提唱している。強制ではなくてあくまでも提唱ですが。

それ以降、各ブラウザはW3C準拠で開発を進め、
おかげでどのブラウザでも、CSSをソースどおりの表示にできるようになったんです。
(独自仕様にこだわってたIEも、とうとう観念したのか、IE9からCSS3に対応するようになりました)

W3C準拠で作るから「HTMLとCSSはセット」

ブラウザはW3C準拠の仕様になっているのですから、W3C準拠の仕様でサイトを作れば、
どのブラウザでもこちらの意図どおりの表示で見せられる
のです。

で、W3Cが「HTMLは文書構造のみを、CSSでレイアウトを」と提唱してるのですから、
そのとおりに作る。 だから「HTMLとCSSはセット」で使うんですね。

「HTMLは文書構造のみ」なら、みんなが正しく情報をゲットできる

W3Cが言うとおりに、HTMLは文書構造だけにしておいて、見た目の情報はCSSでやっておけば、
ビジターみんながそれぞれちゃんと、そのサイトが伝えたい情報をゲットできるんです。

例えば、
★古いブラウザで見てる人
★低速環境で見てる人
★で、画像や動画は重いから読み込まない設定にしてる人
★CSSを無効にして見てる人(ユーザー独自のCSSを指定してる人もいます)
★文字をでっかくしたい人(単に老眼とかだけでなく、大きくしないと見えない人もいます)
★音声読み上げブラウザを使ってる人(視覚情報無し。音声情報だけの人もいます)

とにかくサイトに訪れてくれる、いろんな人に、
みんな誰でも同じようにサイトの情報がゲットしてもらえる。
この「誰でも同じようにゲットできる」っていうのが、とっても大事なんです。
これがアクセシビリティという考え方です。(ユーザビリティとも)

W3C準拠の作り方をしていれば、アクセシビリティが確保できる。
サイトに訪れる人にも有益。サイトを作った人にも有益、というわけです。

アクセシビリティ(accessibility) とは、「アクセスのしやすさ」って意味です。
建物や交通施設へのアクセスだけでなく、製品、情報、サービスなどのあらゆるものに対しての近づきやすさを表すのが本来の意味。
Webの場合は、閲覧環境などへの対応性も表します。
「ユーザビリティ(usability=使いやすさ)」という考え方も、Web上では同じかな。
小さい子が読む本に「ルビ(ふりがな)」つけますよね。あれが日本に昔からあるusability、accessibility。

で、具体的にはどうする?

別にコレと言って特別なことをする必要は無く、これまでやってきたようにHTML要素を正しい用途で使えばOK。それでHTMLの文書構造は正しく構築できます。
タイトル<title>、見出し<h1>〜<h6>、段落<p>など、それぞれをただ、
「その役割どおりに正しく」使うだけでいいんです。
どのHTML要素もそれぞれ固有の役割(意味)を持っています。これを理解して使うのが大事。

で、HTML要素だけではできない「見た目」の指定はCSSでする

HTML要素は、ブロックレベル要素はこのようにタテに並ぶのがデフォルト。

HTMLとはいろいろな要素の集まり、という概念の図説

ですからヨコに並べたい時はCSSで「float」などの指定をしなければなりません。

他にも、文字に色を付けたり、背景に色や画像を入れたり、したいですよね。
これはHTMLだけではできない指定なので、CSSの役目になります。
CSSで、ビジュアル面を整えるんです。

CSSでビジュアル面をどれだけ追求しても、
HTML文書をきっちりと構築してあれば、
HTMLだけで(ビジュアル的に見てない人にも)、情報はみんなに同様に伝わります。

HTML文書だけでサイト情報が全て伝わるのが理想。まずそこを目指してHTMLを書く。
で、HTMLでは指定できないビジュアル面をCSSで整える。
この方法でやるのがベスト。

ちなみに、CSS指定をしなければ、各ブラウザはデフォルトのCSSで表示します。
それで内容が十分わかるサイトが、ほんとに優れたサイトなんです。
(好きなサイトをブラウザで「CSS(スタイルシート)を無効」にして見てみてください。)

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.