html,css 3.2.1 html,css概要 - comm.tcu.ac.jp · 第3部・第2章 html,css . 3.2.2....

第 3 部・第 2 章 HTML,CSS

3.2.1 HTML,CSS 概要

私達が普段見ている Web ページは、そのほぼ全てが HTML(HyperText Markup Language)と CSS(Cascading Style Sheets)をはじ

めとするいくつかの技術の組み合わせによって作られています。そして私達でも簡単に Web ページを作ることができます。

この章では、HTML と CSS に関して、皆さんが初めて Web ページを作る際に覚えておくべきことを解説します。順を追ってひとつひと

つ解説する「チュートリアル」や、各々の要素について詳しく説明する「リファレンス」ではありませんので注意してください。

なお、次章で HTML や CSS を簡単に入力できるソフトウェア

Dreamweaver について解説していますので、

この章で基礎を抑えてから、次章に進みましょう。

1. HTML はテキストエディタで簡単に作れる

HTML は、ただの文書に段落・見た目・属性などの要素を付け加える言語です。元々はただの文書(テキストファイル)ですから、それ

に要素を付け加えた HTML ファイル(および CSS ファイル)は一般的なテキストエディタで編集できます。

つまり、特別なソフトウェアなどがなくても魅力的な Web サイトを作ることができるのです。これは Word ファイルや PDF ファイルと大きく

異なる点であり、HTML が普及した要因のひとつと言えるでしょう。

図 2-1 Web ページは HTML をはじめとする複数のファイルで構成される

図 2-2 HTML の例

図 2-3 CSS の例

Campus System Guide- 49

2. HTML は時代とともに変化している

HTML は 1989 年、スイスの研究所が大量のデータを効率的に管理するために開発しました。そしてインターネットの普及とともに発

展した結果、画像・動画・音楽などを扱えるようになったほか、ブログ・SNS のように情報発信も行えるようになりました。これらの変化

の過程で、HTML の書き方も変化しています。新しい書き方には、デザイン面以外にも、維持管理しやすい、様々な装置でも使いやす

い、視覚に障害のある方も使えるといった利点があります。

※キャンパスシステムガイドでは、2014 年現在よく使われる書き方を解説しています(HTML5,CSS3 を基準に、互換性に問題が少

ない要素を説明しています)。

3. CSS を覚えよう

いまから Web ページの作り方を学ぶ皆さんにとって、HTML と同時に CSS を学ぶことは必須です。

HTML が登場してしばらくの間は、文字の色や大きさなどは全て HTML 内に書いていました。しかし書き方が非常に煩雑であること、ソ

ースコードが見難くなること、デザインの修正が面倒になることなどから、HTML には内容と構造のみ書き、デザイン面の記述をすべて

他のファイルに分離することになりました。そうして生まれたのが CSS です。

CSS は、Web ページの見た目に関して、HTML とは別に用意します。CSS 側で「この部分は太字で赤」「この部分は大きい文字」とい

った具合で指定します。具体的な記述方法は後ほど説明します。

この「構造とデザインの分離」はとても大切です。

CSS を用いて構造とデザインを分離することには、次のような利点があります。

HTML のソースコードがわかりやすくなる

複数のページ(HTML)で統一したデザインを使うことができる

デザインの変更を一括で行える（維持管理の省力化）

CSS を切り替えることで、様々なデバイスでも最適な表示を行える

検索エンジンや視覚障害者向けのソフトウェアが解析しやすい

特に理由がない限り、構造とデザインの分離は徹底するべきです。

※最新の HTML である HTML5 ではさらに構造とデザインの分離を強化する要素が追加されています。興味がある方は調べてみてく

ださい。(header タグ、section タグ等)

4. 他の人が作ったサイトを見て学ぼう

ここでは、最初に学ぶべきごくごく簡単な事のみ解説しています。解説していない要素や使い方などが多数あります。また HTML の仕

様やトレンドは絶えず進化しており、ここに書いてある内容も時代遅れになっていくでしょう。

HTML や CSS に関しては、すべてを列挙した情報サイトがとてもたくさんあります。また企業など他の人が作ったホームページのソース

コードを参考にしてもよいでしょう。自分の作りたいサイトに合わせ、いろいろなことを学んでみてください。

5. 正しいコードを心がけよう

実は、HTML やCSS のコードに多少ミスがあっても、ブラウザーはうまく解釈し「それっぽく」表示してしまうことがあります。しかしそうした

コードはエラーの原因になりますし、ブラウザーによっては正しく表示されません。常に正しいコードを書くことを心がけましょう。

コードの文法が正しいかは、以下のサイト等でチェックしましょう。

例: http://validator.w3.org/ , http://www.htmllint.net/html-lint/htmllint.html など

一方で、正しい HTML にも関わらず、ブラウザーのバグによって正しく表示されないことがあります。特に Internet Explorer の古いバー

ジョンはバグが多いにも関わらず利用者が多く、問題になることもあります。場合によっては他の方法を使うなど、バグへの対応が必要

になることもあります。

50- Campus System Guide


3.2.2 HTML,CSS の編集の仕方 HTML や CSS は、テキストエディタで編集し、ブラウザーで確認する、その繰り返しで作ります。テキストエディタではただ文字の羅列だ

ったものが、ブラウザーではその指示通りレイアウトや装飾がされ表示されます。

HTML の編集にはテキストエディタを用います。Windows に付属しているメモ帳

では力不足なので、Terapad や秀丸エディタ、Sublime text2 などを使用してくだ

さい。これらのソフトウェアは横浜キャンパスの演習室の PC にあらかじめインスト

ールされています。また自宅等で使いたい場合は、インターネットから自由にダウ

ンロード可能です。

また、Dreamweaver やホームページビルダーといったホームページ作成ソフト

を使用することもできます。

なお、Word はテキストエディタではありませんので使用できません。

ここでは例として Terapad での操作方法を説明しますが、他のテキストエディタ

でも編集方法は変わりません。

補足：拡張子の表示

この設定は、学外の PC で HTML を編集する場合に必要です。横浜キャンパスの PC では初めから設定されています。

Windows でファイルを扱う際、拡張子が表示されていないと様々なエラーの原因となります。

(拡張子とは、ファイル名末尾の「.html」「.css」「.txt」「.jpg」といった部分)

画像を参考に、拡張子が表示されるよう設定して下さい。

図 2-5 拡張子の表示

1. Terapad の起動

それでは、スタートメニューから Terapad を起動し

てみましょう。次のように操作します。

ここで文字を書き始めれば、新しいファイルとして編集をはじめることが出来ます。

図 2-4 Web 制作の基本フロー

図 2-6 Terapad の起動


2. ファイルを開く

既存のファイルを開くには、表示させたいファイルを Terapad のウィンドウにドラッグ&ドロップして下さい。ファイルの内容が表示され、

編集できるようになったはずです。

図 2-7 Terapad でファイルを開く

3. ファイルの新規保存

新規ファイルの場合、次のように操作します。

「名前をつけて保存」から保存すると文字コードの設定が行えず、文字化けの原因となります。注意してください。

図 2-8 Terapad 文字/改行コード指定保存



4. ファイルの上書き保存

既存のファイルの場合、Terapad の上部メニュー「ファイル」から「上書き保存」をクリックすれば保存されます。

図 2-9 Terapad 上書き保存

編集中にキーボードの Ctrl キーと S キー(Save の S)を押すことで素早く保存することもできます。

5. ブラウザーの起動

ブラウザーを起動するには、画面最下部にあるタスクバーの Internet Explorer ロゴマークをクリックします。

図 2-10 InternetExplorer 起動方法

6. ブラウザーで HTML を開く

表示させたいファイルを Internet Explorer のウィンドウにドラッグ&ドロップして下さい。HTML ファイルが表示されたはずです。

図 2-11 InternetExplorer HTML を開く

7. ブラウザーの画面を更新する

Internet Explorer でページを表示した場合、その後にテキストエディタでファイルを更新しても自動的には反映されません。

更新ボタンまたはキーボードの F5 キーを押し、再読み込みを行いましょう。


図 2-12 InternetExplorer 再読み込み

これ以降は図 2-4 の通り、エディタで編集・保存を行い、ブラウザーで再読み込み・内容の確認を行うことの繰り返しで作っていきま

す。

8. アップロードと確認

作った Web ページを誰にでも見られる状態にするには、Web サーバーにアップロードする必要があります。

Web サーバーは Web サイトを設置するのに特化したコンピュータで、個人であれば専門業者からレンタルして使うのが普通です。とい

っても、サーバー自体を借りるのではなく、専門業者が設置しているサーバーにデータをアップロードするだけです。企業であれば、自

社でサーバーを持っていることもあります。普通のパソコンを Web サーバーとして使うことも可能ですが、セキュリティなどに問題がある

ためおすすめしません。

また横浜キャンパスの学生には、各個人が使えるサーバーが用意されていますので、これを使うことも可能です。

使い方に関しては情報基盤センターHP 等を参照してください。



3.2.3 HTML まずは HTML の書き方について学びましょう。

CSS で装飾したり、JavaScript で動かしたりするためにも、土台である HTML をしっかり作ることはとても大切です。

1. HTML の基本、HTML タグ HTML ファイルは、単純に言えば文書の各所を「タグ」で囲み意味をもたせたものです。

図 2-13 HTML の表示例

<～>が開始タグ、</～>が終了タグです。(「br」など終了タグが存在しないタグもあります)。タグは基本的には、間に挟んだもの(文

字や画像)に効果を与えます。タグとそれに囲まれた部分を要素と呼びます。

「～」部分の示す役割を知れば、自ずと HTML が理解できることになります。

上の図では、h1 タグは見出し、p タグは段落、strong タグは強調を表します。

開始タグ内には、複数の属性を付けることができます。たとえば上記の例では、「html」タグの「lang」が属性名、ja が属性値です。属

性値は基本的にダブルクォーテーション「”」で囲みます。

また、タグは入れ子にすることができます。入れ子にした場合、要素同士で親子関係ができます。

図 2-14 ツリー構造を成す HTML


HTML 内では、改行と行頭の半角スペース・タブは無視されます。これらは自分が見やすいコードを書くために利用できます。

上記の画像のようにインデントを行い(行頭にタブ記号や半角スペースを入れることで、入れ子構造をわかりやすくする)見やすいコー

ドにしておくことで、タグの対応関係がわかりやすくなり、管理・修正が楽になります。なおこの解説では、行頭のインデントを横棒で表し

ています。ハイフンではありませんので入力しないでください。

一方、全角文字(スペース含む)の扱いには注意しなければなりません。

HTML・CSS ファイルや画像ファイルの名前に全角文字は使えません。また CSS 内では全角文字を使うことが出来ません。

HTML 内でも、全角文字を使えない場所があります(コンピュータが処理できないため、そのまま表示される部分以外に使うことが出

来ない)。特にタグを全角文字で書いたり行頭に全角のスペースを置いたりすると正常に処理されなくなってしまいます。

※HTML4.01 と比べ、HTML5 で意味が変化するタグや、削除されたタグがあります。

例:hr タグ(水平線→話題の区切り)、b タグ（太字→強調ではない太字）、i タグ（斜体→特に意味のない斜体）、

small タグ(文字を小さく→注釈など)、em タグ(強調→強勢)

※一部タグは省略可能ですが、理解を深めるため省略しないほうがよいでしょう。ここではすべて省略せずに解説しています。

例:head,body,p タグの終了タグ

2. 骨格を成すタグ

HTML ファイルは、図 2-15 のような構成になっています。

全体を html タグで囲み、その中に head 要素と body 要素をおきます。各々の要素については後ほ

ど説明します。

この他、html タグの前に doctype 宣言というものを書く必要があります(<!DOCTYPE html>)の

部分。ブラウザー側に HTML のバージョンを認識させるために書きますが、とりあえずこのように

書いておけばよいでしょう。

3. HEAD タグの中には文書の情報を書く

head 要素にはファイルに関する情報を書きます。例えばページのタイトルや中身の簡単な説明などです。

また、ページ全体に関わる CSS や JavaScript なども、head 要素内に書きます。

title 要素:ページのタイトル

title 要素（ページのタイトル）のみ必須です。title 要素を指定すると、ブラウザーで表示した際にそのタイトルがタイトルバーに表示さ

れます。

meta charset:文字コードの指定

また文字化けを防ぐため、文字コードに関する指定も行ったほうがよいでしょう。

「<meta charset="UTF-8">」と書くことで、ブラウザーはそのページが「UTF-8」という文字コードで書かれていることを認識します。

UTF-8 以外の文字コード(Shift-JIS 等)を使用することはおすすめしません。

meta タグは文書に関する様々な情報を含めることができるタグで、中身の説明や著者名などを書くことも出来ます。

図 2-16 meta 要素

図 2-15 HTML の全体像



4. BODY タグの中には文書の内容を書く

いよいよ body 要素です。

body 要素に書いたことが、ブラウザーに表示されます。

しかし、デザイン(見た目)に関することは HTML では書きません。見た目はあとで CSS を使い指定します。

p 要素:段落

文章を書く際は、p タグを使います。

p タグは、パラグラフ＝段落を意味するタグです。文章の段落ごとに p タグにおさめていくのが正しい書き方です。

br タグ:改行

HTML は文書の中身と構造を司る言語ですから、文章のどこで改行するかというのは、本来ブラウザーが判断するものです。br タグ

を用いれば改行は可能ですが、基本的には使いません。

ちなみに br タグには終了タグは必要ありません。大きな間隔を開けたい場合でも、br タグは連続して使ってはいけません。

なお、HTML ファイルを作る際に Enter キー等で改行しても、その改行は無視されます。

5. リンクを作ってみよう

やはり Web ページといえば、他のサイトやページへのリンクです。そのリンクを作ってみましょう。

a 要素:リンク

a タグで囲んだ部分はリンクとなり、クリックできるようになります。また href 属

性を使用し、リンク先の URL を指定します。

a タグには、開くウィンドウを指定する target 属性、マウスを乗せた際の説明

を表示する title 属性などが存在します。

6. 画像を貼ってみよう

画像を貼るためには img タグを使用します。

img 要素:画像

src 属性を使用し、画像のアドレスを指定します。終了タグは必要ありません。

図 2-18 img 要素

alt 属性は代替テキストです。画像を表示できない場合などに表示されるもので、画像の内容を詳細に説明する必要があります。バ

リアフリーの観点からも、なるべく書き込むようにしましょう。

なお、img 要素を a 要素の中におくことで、画像リンクを作成することが出来ます。

補足：絶対パス・相対パス

ファイルの場所の指定として、「絶対パス」と「相対パス」があります。

絶対パスは、住所で言えば『日本国神奈川県都筑区牛久保西…』というようにどこからでも唯一の場所指定を指します。

ですから、ネット上では『http://www.yc.tcu.ac.jp/…』のように場所を指定する方法です。

対する相対パスですが、これは相対的なパス、つまりファイル自身から見た別のファイルの位置の指定方法です。ですから住所

図 2-17 a 要素


で言えば『お隣の○△さん』や『隣町の八百屋さん』といったような、他の場所へ行けば違うものを指すことになってしまうような指

定方法です。

相対パスの記述においては、最初に現在の(自分自身の)フォルダを表す「./」を書き、その後にディレクトリ(フォルダ)名やファイ

ル名を書いていきます。自分より上のフォルダを表すには「../」と書きます。

①自分自身(HTML ファイル等)と同じディレクトリにあるファイルを指定するには、単にファイル名のみを書きます。

例: ../sample1.html

②自分自身(HTML ファイル等)から見て下のディレクトリのファイルを指定するには、「../ディレクトリ名/ファイル名」と書きます。

例: ../dir/sample2.html

③自分自身(HTML ファイル等)から見て上のディレクトリのファイルを指定するには、「../../ファイル名」と書きます。

例: ../../sample3.html

7. 表を作ってみよう

表を作るには table、tr、th、td といったタグを使います。

table,tr,th,td:テーブル（表組み）

表組みは少々複雑です。

Table タグの中に、行を意味する tr タグを入れ、その中にセルを意味する th タグ（見出し）または td タグ（通常）を入れていきます。

また td タグに colspan 属性や rowspan 属性を指定することで複数のセルを結合することも出来ます。

図 2-19 テーブル

テーブル要素をこのまま設置しても、枠線は表示されません。枠線の表示は CSS で行います(このあと解説しています）。

テーブルタグを使用することでコンテンツを容易に上下左右に並べられますが、テーブルをデザイン目的で用いてはいけません。

8. その他のタグ

その他、よく使うタグをご紹介します。

strong,b,i,em,cite:テキストの意味付け

strong 要素はその部分が重要であることを意味します。

一方 b 要素は太字で表示するべき内容であることを意味し、重要という意味は持ちません。キーワードなどに使います(この解説文で

もキーワードは太字で表しています)。

同じく i 要素は斜体で表示するべき内容であることを意味し、何らかの意味は持ちません。

em 要素は強勢を意味します。日本語文書では通常使いません。

論文等で作品名等を書く際に斜体で表記することがありますが、これには cite 要素を使います。

u 要素を使うと下線が引かれます。


図 2-20 テキストの意味付け

いくつかのタグで見た目が同じになっていますが、これはあくまで一般的なブラウザーでたまたま同じように表示されるだけです。意味

を考えて使うようにしましょう。

単純に見た目を変えたいだけの場合、span タグで囲み CSS で設定するべきです。

h1～h6:見出し

h1,h2,h3 などのタグを使うと、見出しを作ることができます。

h1 タグは基本的にページのタイトルとして、その下の小見出しは h2、さらに下の小見出しには h3 を使います。

見出しタグを使うと文字の大きさが変わりますが、文字の大きさを変えるためだけに使ってはいけません。

ol,ul,li:リスト(箇条書き)

ol 要素(順序の関係ないリスト)または ul 要素(順序付きリスト)の中に li 要素を並べると、箇条書きのように項目を列挙することができ

ます。

箇条書きを行う際には基本的にリストタグを使いましょう。

コメントアウト

ソースコード上にコメントを書きたい場合は、という表記を使いコメントアウトします。

図 2-21 コメントアウト

ソースコード上にこのように書くと、ブラウザー上では表示されません。

自分のためのコメントの他、一時的に消しておきたい項目などをコメントタグで囲うと便利です。

9. ブロック要素とインライン要素

body タグ内に書く要素のほとんどは、ブロック要素とインライン要素に分類されます。覚えておきましょう。

ブロック要素は、(基本的に)縦に並びます。また縦・横の大きさを決めることもできます。

インライン要素は、文字のように横に並びます。基本的に縦・横の大きさを決めることはできません。

図 2-22 ブロック要素とインライン要素

インライン要素の中に、ブロック要素を含めることはできません。

※HTML5 では、この分類は廃止され、7 種類のカテゴリに分類されます。これはとても複雑であり、覚えにくく使いにくいものです。

使い方はほとんど変わっていませんから、現在の 2 分類を覚えておくとよいでしょう。

10. span 要素と div 要素

次は、汎用要素と呼ばれる span 要素と div 要素について解説します。

div,span:汎用要素

div 要素は、なんの意味も持たないブロック要素です。

span 要素は、なんの意味も持たないインライン要素です。

その部分を囲ってまとめてスタイルを指定したい場合や、JavaScript で操作したい場合に使用します。

具体的な使い方はこの先「03.2.5 実際に Web ページを作る」で説明していきます。

11. id と class

ほぼすべての HTML タグには、id と class という属性をつけることができます。

id は、要素につける名前です。複数の要素に同じ id をつけることはできません。その要素の固有の名前になります。

class は、要素につける種別名です。複数の要

素に同じ class 名をつけることができます。イメージ

としてはまさに学校のクラス分けで、同じ仲間に同

じ class 名をつけ、まとめて操作する際に使いま

す。

具体的な使い方はこの先「03.2.5 実際に Web ページを作る」で説明しています。

12. HTML のまとめ

以上で紹介したものが、主な HTML 要素,タグです。これらを実際にどのように使うのかについては「03.2.5 実際に Web ページを作る」

にて解説しています。

今回紹介した以外にも、要素,タグには沢山の種類があります。興味がある方は調べてみてください。ただし、「構造とデザインの分離」

に反するものなど、現在では非推奨とされているタグは使わないようにしましょう。

非推奨とされるタグの例:<font>（文字の色などを指定）、<center>(中央揃え)

図 2-23 id と class



3.2.4 CSS ここからは CSS について説明します。

CSS は「どの部分をどのような見た目にするか」を設定していくシンプルな言語です。

1. 書き方の基本

CSS はどのように書くか、次のように記述します。

図 2-24 CSS の表示例

画像のとおり、どの部分にどのようなスタイルを適用するかを書いていきます。

CSS の記述は図のようになっています。

2. どこに書くか

CSS を HTML に対して適用するには、3 パターンの方法があります。

別ファイルに書く

HTML ファイルとは別に CSS ファイルを作り、そこに CSS を書くことができます。

この場合、link タグを使って HTML ファイルから CSS ファイルにリンクを貼ります。

通常、この方法を使うべきです。

図 2-26 別の CSS ファイルを参照している例

head 内に書く

HTML の head 内に style タグをおき、内部に CSS を書くことができます。

ページごとに CSS を変更したい時に使います。

図 2-25 CSS の書き方


図 2-27 head 要素内に Style タグを配置した例

各タグの style 属性に書く

HTML 要素のスタイルを個別に書く場合、要素の style 属性に CSS を書くことができます。

この場合、セレクタ(後述)は必要ありません。

図 2-28 要素に直接スタイルを指定する例

3. セレクタ

スタイルを適用する対象を指定するのがセレクタです。ここで先ほど説明した id と class が登場します。

セレクタは次の三種類が基本です。

タグを指定：タグ名をそのまま書く

id を指定 : ＃を先頭に書く

class を指定 : .(ドット)を先頭に書く

この他にもさまざまな種類のセレクタがあります。

図 2-29 セレクタ

なお、CSS で指定したスタイルは、指定された HTML 要素の子孫全てに継承されます(例外あり)。



図 2-30 CSS の継承

4. プロパティ

セレクタで対象の要素を選んだら、そのプロパティに値を設定します。

プロパティには様々な種類があり、様々な HTML 要素に対して使えるものから、一部の HTML 要素専用のものまであります。

ここではいくつかのプロパティを例に解説しますが、その他のプロパティについても必要に応じて調べ、使用してください。

5. 文字の見た目を変えてみよう

文字の見た目を変えるには、次に挙げるプロパティを使用します。

文字の大きさ： font-size

文字の色 : color

文字の太さ(太字) : font-weight

図 2-31 文字の装飾(CSS)

この他、斜体にする font-style、書体を指定する font-family、下線や取消線をつける text-decoration などのプロパティがあります。

またこれらを統合・省略した font プロパティを使うことも出来ます。

これらのプロパティを文字を含む要素に指定すれば、見た目を自由に変えることができます。

※ここで設定できる項目は、以前は HTML の font タグで設定できたものです。「構造とデザインの分離」に従い、font タグは HTML5

で削除されました。

補足：カラーコード

CSS 内で色を表す場合、基本的な色は英語でその色の名前を書くだけで表示させることが出来ます(red,green,orange 等)。色

名には多くの種類がありますから、興味がある方は調べてみてください。

細かい色を表したい場合は、#で始まる 16 進数 6 桁(または 3 桁)のカラーコードで表します。


図 2-32 カラーコードの例

補足：単位

CSS で文字や要素を設定する際、いくつかの単位を使用することが出来ます。基本的には以下の２種類を使います。

代表的な単位は px(ピクセル)です。基本的に、１ｐｘは画面の 1 ドットを表します。

行間の指定などにはよく em を利用します。1em はフォントの大きさを基準とするので、行間(line-height)を 2em に指定すれば

文字の下の１行分の行間があくことになります。

図 2-33 CSS で使える単位

6. ページの背景を変えてみよう

ページ全体の設定をするためには、body 要素にスタイルを設定します。

背景に関するプロパティをいくつか挙げます。

背景色:background-color

背景画像:background-image

図 2-34 背景色と背景画像

上記のほか、背景画像の繰り返しを指定する background-repeat、背景画像の位置を指定する background-position などのプロ



パティがあります。またこれらを統合・省略した background プロパティを使うことも出来ます。

画像を指定する場合は、HTML ファイルを基準に画像ファイルを指定する必要があります。

これらのプロパティは、一般的なブロック要素では概ね使用可能です。

7. 枠線をつけてみよう

ブロック要素には枠線をつけることも出来ます。一般的には border プロパティを使用します。

border プロパティでは、太さ、色、スタイルをまとめて指定します。順番は関係ありません。

図 2-35 枠線

border-left プロパティ等を使い、上下左右の枠線を別々に指定することも出来ます。また最近のブラウザーでは、枠線の角を丸くす

る border-radius プロパティを使える場合があります。

8. テーブルに枠線を表示しよう

HTML でテーブル要素を設置しただけでは、ブラウザーでは枠線が表示されません。

セレクタはカンマ区切りで複数記述することにより、それぞれのセレクタに合致する要素すべてにスタイルを適用することができます。

そこで、ページ内の table 要素、td 要素、th 要素の全てに枠線を設定することで、表に枠線が表示されるようにしてみましょう。

図 2-36 テーブルに枠線を表示

これで枠線は表示されますが、線が太くなってしまいました。これは 1px の枠線をもったセル同士が並ぶことで見た目上 2px になっ

てしまったのが原因です。table 要素に border-collapse プロパティで「枠線同士を重ねるよう」に設定します。

図 2-37 枠線同士を重ねる

これで、ページ内の全ての表に正しく枠線が表示されます。


発展：いろいろなセレクタ

セレクタはカンマ区切り以外にも様々な指定方法があります。調べてみてください。

図 2-38 いろいろなセレクタ

9. マウスを乗せたら見た目が変わるようにしてみよう

CSS を使えば、例えばマウスポインタが乗った時だけ色が変わる文字を作ることも出来ます。それには、擬似クラスを使います。

以下に例を載せます。

図 2-39 マウスオンで見た目が変わる

上記のように書くと、class「sample」の要素の上にマウスポインタを乗せた時だけ文字が緑色になります。

ここで使ったのが hover 擬似クラスです。

CSS のセレクタは条件に合致する要素を探すものですが、例えば上記の例では「class が sample で、hover 状態にある(マウスが乗っ

ている)要素を探す」セレクタになっていると解釈してください。

擬似クラスには、クリックされている要素を表す active 擬似クラスなどもあります。

10. 要素の大きさを変えてみよう

ブロック要素は自由に大きさを変えることが出来ます。以下の 2 つのプロパティを用います。

幅: width

高さ: height

図 2-40 要素の大きさを変える

大きさをきっちりと決めず最小値や最大値のみを定める min-width,max-width といったプロパティもあります。



11. margin と padding

ブロック要素には、margin（マージン）と padding(パディング)をつけることが出来ます。

margin は外側の余白、padding は内側の余白です。margin 同士は重なりあうという特性を持っています。

図 2-41 margin と padding

12. CSS のまとめ

以上で紹介したものが、主な CSS の使い方およびプロパティです。実際にどのように HTML と組み合わせて使うのかについては次の

章にて解説しています。

ここで紹介した以外にも、CSS のプロパティには様々なものがあります。中には一部のブラウザーでしかサポートされていないものや、実

験的に採用されている先進的なものなどもあります。興味がある方は調べてみてください。


3.2.5 実際に Web ページを作るここまでで、主な HTML 要素および CSS プロパティを紹介してきました。この章ではそれらをどのように組み合わせて Web ページを作

るのかについて、例を挙げて説明します。

1. 完成形をイメージする

サイトを作る際は、早速 HTML や CSS を書き始めるのではなく、

完成形をイメージすることが大事です。

たとえば、図 2-43 のようなものを、紙に書いてみましょう。

2. div を並べていく

完成形ができたら、今度はその図に構成を書き加えていきま

す。ここで登場するのが「汎用ブロック要素」div です。

今回は、まず上下に「header」「middle」の２つの div を配置し、

後者の中に左右に「left」「content」の div を配置します。

おおまかな構成が決まったら、細かい部分も決めていきましょう。どこまで細かく決めておくかは好みで問題ありません。

図 2-43 div の配置を考える

3. 中身を作る

この段階では、いよいよパソコンを使い実際に HTML を打ち込んでいきます。

図 2-44 実際の HTML,CSS にしていく

まず「おおまかな構成」にそって骨組みを作っていきます。この段階では各要素は空っぽ構いませんが、ここではダミーとして「●」を

並べてあります。まずは HTML を作り CSS で並べたのち、微調整していきましょう。

図 2-42 まずは紙に書いてみる



骨組みができたら、今度は中身を入力していきます。HTML と CSS を同時進行で、細かい部分を調整しながら完成させていきます。

最終的に以下のようなソースになりました。(div に関連する重要な部分のみ抜粋しています。)

図 2-45 ソースコード


3.2.6 付録ここでは、本文で解説した「覚えておくべき」こと以外に、覚えておくとよいことをいくつか説明しています。

1. 文字実体参照

HTML タグでは「＜」「＞」などの記号を用います。これらが本文中にあるとどこがタグなのか分からなくなってしまうため、使うことがで

きません。

ただし、本文中に文字実体参照という形で記入すれば表示することが出来ます。主な文字実体参照には次のようなものがあります。

図 2-46 文字実体参照の例

2. よく使うファイル名について

Web サイトにおいて、トップページは通常 index.html とします。これは Web サーバーの仕様で、ファイル名を省略してアクセスした際に

通常このファイルが開かれるためです。サイト全体で統一して使う CSS は、common.css や style.css とすることが多くあります。

3. ディレクトリを用いたファイル整理のすすめ

Web サイトを作る際、ファイルは整理しておかなければなりません。

Web サイトは様々なページが相互にリンクを張り合うことで成り立っています。また HTML ファイル、CSS ファイル、画像ファイル、スクリ

プトファイルなど多くのファイルを管理する必要があります。

サイト全体で使うものに関しては、image,css,script といったディレクトリを用意し、まとめて管理しましょう。

4. CSS の優先度

同じ項目に違うスタイルを適用した場合、どのスタイルが優先されるのでしょうか。答えは、「より後に読み込まれたスタイル」になりま

す。

同じファイルの中では、下の方で書いた CSS が優先されます。また HTML 内に直接スタイルを記述した場合でも、後から指定したも

のが優先されます。

図 2-47

5. デフォルト CSS

CSS を用意しなくても、例えば h1 タグ内の文字は大きくなりますし、p(段落)タグは適当な間隔を開けて並びます。

これはユーザーが指定していない項目のデフォルトの値(初期値)を決めるデフォルト CSS によるものです。



各ブラウザーにはそれぞれデフォルト CSS が設定されているため、ユーザーが何らかの設定をしなくてもある程度のスタイルを適用し

てくれます。しかしデフォルト CSS にはブラウザーごとに差異があるため、たとえば Internet Explorer での表示と Firefox での表示が違

うといったことはよくあります。

6. 開発ツール

HTML や CSS は、エディタで書いて保存して、その都度ブラウザーで確認する必要があります。これを面倒に感じる場合は、専門の

開発ツールを使うことで楽になるかもしれません。

Adobe Dreamweaver(前章で解説)やホームページビルダーといった有料ソフトを使えば、見た目を確認しながら HTML を書くことが

できます。また Google Chrome や Firefox にも拡張機能として Web 制作支援ツールがあります。興味がある方は調べてみてください。

コラム:HTML4、HTML5 と XHTML

文中で何度か登場した HTML5 とはなんでしょうか。

HTML は登場後何度か改良が加えられ、1999 年に勧告（リリース）されたものが HTML4.01 です。それから約 15 年かけ、満を

持して登場したが HTML5 です。検索サイトや SNS、Web アプリケーションなど最新の Web 動向を反映し、それらを便利に使える

ように作られているのです。

HTML5 は正式に勧告（リリース）されたばかりです。そのためブラウザーごとに対応の度合いが異なります。

実は HTML5 の前に、HTML4.01 の後継として作られた XHTML1.0 という規格がありました。XHTML1.0 は厳密な文法が必要と

され、またブラウザーの対応にも問題が多いものでした。結果として移行が進まず、改良版の XHTML2.0 の開発は打ち切られ

HTML5 に統合されてしまったのです。

この裏には、従来 HTML や XHTML を開発してきた Web の中心的な団体 W3C と、それに対立し作られ HTML5 を提案した団

体 WHATWG(Apple,Mozilla,Opera が設立)の対立や協力といった事情があるようです。


html,css 3.2.1 html,css概要 - comm.tcu.ac.jp · 第3部・第2章 html,css . 3.2.2....

Documents