ぱそこん遊ぶろぐ -36ページ目

ブラウザに内容を表示させる仕組み

　Webページの表示には、ブラウザというソフトウェア（アプリケーション）が使われます。ブラウザを動作させる命令の言葉(=言語)には、マークアップ言語のHTMLとスタイル言語のCSSの２つがあります。

　HTMLはページに載せる内容を(構造的に)示す役割を、CSSはその見た目を受け持ちます。

ページの構造を記述、定義するHTML

HTMLの要素（element）とは

　ページ（記事）の中身を内容（content）と言います。具体的には、text、画像などです。これらは土台だけで、直接画面に表示させることはできません。

　text　　　　　…　内容（content）

　表示させるには、タグで囲む必要があります。表示用にタグで囲んだものを要素と呼びます。

text　…　要素（element）

HTMLタグとは

　ページの内容や構造(文章上での役割)を示し、意味を表すために使われます。

　見出し（header）を表すために、見出しタグはh1からh6まで６種類用意されています。文章の段落を表すにはpタグが、単に文章のまとまりを表すにはdivタグがあります。その他にも多くのタグが用意されています。

通常の要素

HTML

メロスは激怒した。かの暴虐なる王を除かねばならぬと決意した。

タグは段落要素を表すタグです。タグは、段落の終わりを表すとともに使います。

表示

メロスは激怒した。

かの暴虐なる王を除かねばならぬと決意した。

「走れメロス」（太宰治著）より

空要素

　内容が画像の場合は、少し事情が異なります。絵のデータは画像ファイルとして独立して存在しています。そのファイルのある場所から呼び出して、HTMLの文書に埋め込む必要があります。

その役割を持ったタグが　<img>　です。

<img="URL＝画像の置かれている場所">

これで、画像も文字の様に表示することができるようになります。

　imgタグは、内容を持ちません。自身は、絵として表示するための受け渡しする橋のような役割しか持っていないからです。そのため終了タグはありません。

　具体的な内容を持っていないこのような要素を空から要素ようそと呼びます。空要素自体を内容の代理と見なすこともできます。

ページの見た目を記述、定義するCSS

CSSの役割

HTML

親譲りの無鉄砲で子供の時から損ばかりしている。小学校にいる時分学校の二階から飛び降りて一週間ほど腰を抜かしたことがある。なぜそんな無闇をしたと聞く人があるかもしれぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくらいばっても、そこから飛び降りることはできまい。弱虫やーい。とはやしたからである。小使におぶさって帰ってきた時、おやじが大きな目をして、二階ぐらいから飛び降りて腰を抜かすやつがあるかと言ったから、この次は抜かさずに飛んでみせますと答えた。

　上の文章をCSS無しで表示すると、

表示

親譲りの無鉄砲で子供の時から損ばかりしている。小学校にいる時分学校の二階から飛び降りて一週間ほど腰を抜かしたことがある。なぜそんな無闇をしたと聞く人があるかもしれぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくらいばっても、そこから飛び降りることはできまい。弱虫やーい。とはやしたからである。小使におぶさって帰ってきた時、おやじが大きな目をして、二階ぐらいから飛び降りて腰を抜かすやつがあるかと言ったから、この次は抜かさずに飛んでみせますと答えた。

　次のようなCSSコードを書いて、要素にスタイル（装飾）付けをします。

CSS

p. {

text-indent: 1em;

}
.question {
color: #f0f;
}

.student {
color: #080;
}

.father {
color: #e70;
}

.Self {
color: #08f;
}

表示させると、

表示

(「坊ちゃん」夏目漱石著より）

　text-indent　というのは、段落初めの字下がりを実行させるCSSプロパティです。

　colorプロパティを使い喋った人ごとに色を変えることで会話の所が地の文から浮き立つようにしています。

　このようにCSSを使うことで、文章の形式を整えたり、装飾を加えることででアピール力を高めたりできるようになります。

HTMLとCSSはWebコンテンツのいわば車の両輪のような役割を果たしています。