CSSとHTMLの違いはなんだ? その1


初歩的な問題だけど、自分が理解している範囲で書こう。HTMLとCSSは基本的に役割が違うわけなのさ。たしか私がホームページを作り始めた時代(1990年後半)はCSSなんてものはなかったはずなんだが…。そして、いまだに私はCSSが苦手だ(HTMLも苦手だけど)

がんばってまったくの初心者にHTMLとCSSとはなんだ? ということを説明したい。がんばります。

みなさんが見ているホームページ、ブログはHTMLという言語で書かれている。FIREFOXをお使いならば上のメニューの「表示>ページのソース」を見れば、HTMLの形式で書かれたソースと呼ばれるものが見れる。<DIV>とか<STRONG>とかいろいろ書いていると思う。こういう感じで表示しないさいよー、という指示書みたいなものだ。

人間が見ても<DIV>とか<a href>とかわけのわかりにくい表示でも、このHTMLの指示書を読み取って人間的にわかりやすく表示してくれるソフトを「ブラウザ」という。ホームページを閲覧するためのソフトだ。代表的なものに「インターネットエクスプローラー」やモジラの「FIREFOX」グーグルの「CHROME」とかがある。(ソフトによって微妙に指示書の解釈の仕方が違うので、表示がちょっと異なる場合もあるよ。さらに、ソフトの中でもバージョンによっても違ったりするのでやっかいだ)

HTML側で指示する主な要素は以下のような感じです。HTMLは<>タグと呼ばれるもので囲んだ部分に、その指示が適用される。<p> なんとかかんとか</p>で終わるけど、この<■■>で始まり、</■■>で終わると、その挟まれた間に<■■>の指示が適用される。始まりと終わりのタグで基本的にワンセットだ。

以下、代表的なタグを記載してみる。

・<h1> 〜 </h1> などの記事の見出しがありますよ、という指示。この場合は<h1>今日の麻雀ニュース</h1>と書けば、<h1>で囲った部分にこのページの見出しがあるんだな、と認識してもらえるよ。たしか「ヘッドライン」の「h」だ。

・<p> 〜 </p> ここで囲った部分は文章の「段落」として一塊なんだ!と認識される。段落を示す「パラグラフ」の略称だと思う。

・<img>ここに画像を表示させなさいという指示。「イメージ」の略かな。

・<a>〜</a>クリックするとリンクできるように設定しなさいという指示

・<strong> 〜 </strong> ここの部分は需要なことが書いて有りますよ!という指示。強調という意味だ。

他にもいくつかあるけど、実のところ数はそんなに多くない。ここからここまでが「引用」ですよ、と示すタグや、ここで「改行してください」という指示を出す<br>などがある。


<h1>今日の麻雀ニュース</h1>

<p>麻雀大会がありペチョーリンさんと、爆牌ウシジマさんが対決しました。結果は<strong>爆牌ウシジマさんの優勝</strong>おめでとうございます。本人の談話は本人のホームページで見れます。<a>こちら</a>をクリック!</p>

例なので端折って書いているけど、イメージとしてはこんな感じです。このソースを読み取ったグーグルなどの検索エンジンやブラウザなどは、いくつかの指示した情報を理解してくれる。

・このページの見出しは「今日の麻雀ニュース」なんだと理解してくれる
・「爆牌ウシジマさんの優勝」は強調される重要なことなんだ
・「こちら」の部分をクリックするとリンクするんだな などなど

極端な話では、ホームページとはこれだけで十分だ。ブラウザは初期設定の段階で自動的に<h1>の部分を大きな文字で表示してくれるし、<strong>の部分を太字で強調してくれる。人間が見ても最低限の「何が重要で、何が書かれているのか?」をちゃんと視覚的にも表示してくれる。

ただし、問題はHTMLは基本的に飾り付けをしたり、文字を赤くしたり、レイアウトを配置する、デザイン的なことはやらないって部分だ。HTMLの役割は 「何が書かれているのか?何が重要なのか?」という論理的な記述だけを行う。HTMLで文字を赤くしたり、背景にお花を置いたりの装飾はしないってことですね。

重要な部分を赤くしたり、段落を組んでみたり、背景に海の画像を置いて華やかにするのは、それは「人間的にはわかりやすい/楽しい」けども、「コンピューター的にはどうでもいいこと」なんですね。



この写真のようにお洋服で飾り付けをしているけど、重要な情報は生物として「全員ホモサピエンスである」という感じであって、服の値段どうこうはどうでもいい感じです。HTMLの部分には、せいぜい「ホモサピエンス(霊長類ヒト科) オス 身長170cm 重量60kg」などの無機質だけど重要な基本的な情報だけを書けばいい。

ただし、HTMLだけでやると、どうしても味気ない無機質なページになる。それに、文字を赤くするのは人間的にはよりわかりやすい(人間には視覚があるので)。背景にお花の画像を置くと見ている人も楽しくなる。お客さんもいっぱいみに来てくれるかもしれない。そこで、そういった飾り付けの情報を書いてあげるのがCSSです。

続く!


コメント
とてもわかりやすい説明ありがとうございます☆ 続きのアップを待ってます☆
  • さおり
  • 2013/05/13 12:24 AM
コメントする








   
この記事のトラックバックURL
トラックバック

カテゴリー

月別の記事

プロフィール

最近のコメント