第5回ホームページ作成講習会

準備

お約束

前回の補足

空白の扱いについて

前回口頭で説明しましたが、一応文書化しておきます。HTML上の(文字参照を用いない)半角スペースは、しばしばブラウザ側に無視されることがあります。どういうことかといえば、下のソースを実際にブラウザ上で表示させてもらえば分かるのですが、

こん にちは

前回の補足

空白の扱いについて

このように、無数の半角スペースはHTML文書上では省略されて、1つの半角スペースとして扱われてしまいます。このような事態を回避するには、文字参照を用います。

記号文字実体数値文字補足
   (改行禁止)半角スペース

table要素を利用した際に要素中に半角スペースを記述しても枠線がなくなってしまう問題も、同じような原理で発生します。(ただしあれの場合は全部省略されてしまっていますが)

CSSを使う

CSSとは何か

CSS(Cascading Style Sheets、カスケーディングスタイルシート)とは、ウェブページのスタイルを指定するための言語です。CSSは、一般的にHTMLやXHTMLと組み合わせて利用されます。

CSSはHTMLとはどう異なるのでしょうか?
本講習会で、私は「font要素など、文書を直接装飾する要素は原則非推奨」と言いましたが、それはHTMLが本来ならば「文書構造」を示すための言語だからです。たとえば、ここは見出し、ここは本文、ここはフッター、といった感じです。
対して、CSSは「装飾」をするための言語です。ですから、CSSでは文字に色を付けたりサイズを指定することはできても、ここが見出しだとか宣言することはできません。

HTMLの仕様では HTMLから見栄えに関する指定を分離することが望ましいとされています。HTMLでは文書構造のみを定義して、スタイルについてはCSSで指定することが推奨されています。

※ちなみに、厳密に言うとCSS≠スタイルシートなのですが、本講習会では特段区別しません。

CSSを使う

CSSのメリット

などなど、メリットばかりです。

現在主流のCSSのバージョンは2.1で、2012年現在シェアで多数を占めるブラウザはCSSに(実用上支障のないレベルで)対応しています。従って、2.1を利用する上では互換性を気にする必要はほとんどありません
ただし、最新技術であるCSS3.0はブラウザによって実装状況が全く異なるので利用には細心の注意が必要。

本講習会では、このCSS2.1を中心に学習します。

CSSを使う

CSSの利用方法

CSSを利用するには装飾を汎用属性であるstyle属性を使用して局所的に適用する方法と、文書全体に適用する方法があります。後者はstyle要素を使用して文書ごとにCSSを適用する方法とlink要素で外部ファイルを読み込む方法とに細分化されます。

style要素や外部ファイルを読み込んだりする場合でも、多くの場合id属性やclass属性という汎用属性を利用する必要があります。

汎用属性について

一旦CSSから離れて……、HTMLに定義されている要素にはほとんどの要素で共通して使用できる属性があります。このような属性は汎用属性と呼ばれます。主な属性は以下の通りです。 上の3つはCSSに深く関係するので、この後詳しく説明します。下2つは一応入れたけど……、使わんかな。

style要素に直接CSSを適用する際に使用。
class要素にクラス名を付ける際に使用。同名のclassは同じソース中に何個あってもおk。
id要素に固有の名前(識別子)を付ける際に使用。同名のidは同じソース中に複数あってはいけません。
title要素に補足情報を付ける。後述。
lang要素内容の言語を指定する。属性値は日本語ならばja、英語ならばen、など。例えば、日本語サイト中の一部で英語を使う際に英文を括っている要素の属性にlang="en"といった感じで指定するのが正しい使い方らしいが、実際はお約束中のhtml要素の属性で言語を指定する際にしか使われていない。
dir要素内容の表示方向を指定する。英語や日本語など、左から右へ表示したい場合はdir="ltr"を、アラビア語など、右から左へ表示したい場合はdir="rtl"を指定するらしいが、使ったことがない。

汎用属性について

title属性とは

title属性(文書にタイトルを付けるtitle要素と混同しないこと!)とは、要素に補足情報を付けるのに用います。試せば分かるのですが、title属性を指定すると(一般的なブラウザでは)マウスカーソルを(何もクリックせずに)上に合わせるとにツールチップでその属性値を表示します。この補足情報、ネットサーフィンしてれば分かるのですが適切な使い方をされていれば地味に(閲覧者にとって)便利だったりします。

次のスライドの例ではimg要素とa要素にtitle属性を指定しています。img要素にはもちろんalt属性も指定しましょう。IEの場合、title属性を指定しなくてもalt属性の属性値がツールチップで表示されますが、多くのブラウザでは表示されないので注意すること。

汎用属性について

title属性とは

ニートの画像
ハローワークへ

※href="#"というのは上のようなサンプルなどで空の属性値を指定したい時に用いられる表現です。普通使うことはないと思うので、特に気に留めないこと。

CSSを使う

CSSの利用方法

HTML講習会の初回でもやりましたが、下のソースを何も考えずに打って下さい。

CSSを使う

CSSの利用方法

赤いh1見出し

ソースを見れば分かりますが、例ではhead要素の最後にstyle要素を追加し、その間で何やら怪しい構文を書いています。
そしてbody要素内ではh1要素でフツーに見出しを書いていますが、それがなぜか赤色になっています。

実は、このstyle要素内の怪しい構文がCSS本体であり、この例ではbody要素内のすべてのh1要素が赤色で表示されるように宣言しています。

CSSを使う

なぜコメントアウトされているの?

このCSSの文法は……、の前に、前々回の内容を覚えている方は恐らくある重大な疑問を持つだろうと思います。実はこのCSSの構文、なぜか<!--と-->でコメントアウトされているのです。

CSSや、この後学習するかもしれないJavaScriptをstyle要素やscript要素(JavaScriptで使う要素)は、非対応ブラウザのことを考慮して慣習上コメントアウトします
コメントアウトしなくても何ら問題なく利用はできるのですが、もしCSSに対応していないブラウザでサイトを見た時に、そのブラウザはstyle要素を解釈できないのでstyle要素の内容をCSSと解釈せず文章としてそのままブラウザ上に表示してしまう可能性があるからです。
まあ、実際問題そんなブラウザほとんどないでしょうから無視しても大丈夫っちゃあ大丈夫なんですが……ウェブサイト制作者の間ではもはや慣習化している決まりなので、本講習会でもそれに従います。

CSSを使う

なぜコメントアウトされているの?

h1 { color: #ff0000; }

赤いh1見出し

↑コメントアウトせずに、CSS非対応ブラウザで見た場合の表示のイメージ。

CSSを使う

なぜコメントアウトされているの?

ちなみに、JavaScriptの場合は以下のような感じでコメントアウトします。CSSとはコメントアウトの仕方が若干違いますね。

CSSの基礎構文

CSSの基礎構文

ではでは、早速CSSの構文の説明に入ります。CSSの構文を説明する際に、一々HTMLソースを全部書いていたのでは大変なので、例ではコメントアウトされているCSSの構文本体と、body要素の本文のみ例に示します。
では、先ほどの例を見てみましょう。

CSSの基礎構文

CSSの基礎構文

CSSでは以下のように、

と記述します。

セレクタとは、CSSを適用する対象のことです。例ではh1、すなわちHTML文書のすべてのh1要素を指定しています。

プロパティとは、適用するスタイルのことです。少し分かりにくいですが、プロパティで色とか、大きさとか、位置とか、セレクタで指定した要素のどんな部分を設定するのか決めます。例では色を設定しようとしています。

値ではプロパティで設定した部分の、具体的な値を設定しています。HTMLで喩えると属性値と同じですね。例では#ff0000、すなわち赤を指定しています。

値の最後に、半角セミコロン(;)を記述するのを絶対に忘れないで下さい。
これは、プロパティと値の設定の終了を表す大切な記号です。

CSSの基礎構文

複数のセレクタを指定する

このように、複数のセレクタを書くことによって様々な要素に様々なスタイルを指定できます。

CSSの基礎構文

複数のスタイルを指定する

一つのセレクタに対して指定できるのは、一つのスタイルだけではありません。

例では、文字色に加え、文字サイズも指定しました。
このように、

CSSでは複数のスタイルを指定できます。

CSSの基礎構文

コメントを書く

CSSでは、コメントを書くことが出来ます。しかしながら、HTMLとはコメントの書き方が全く異なります

CSSの基礎構文

書き方のルール

HTMLと同じですが、CSSでは見やすいように改行を入れたり、半角スペースやタブでインデントすることができます
ただしこれもHTMLと同じですが、下のようにセレクタやプロパティ、値の途中で改行してはいけません。

本講習会では、コーディング規約で定めたようにセレクタの後に半角スペースを開けて開き括弧を記述し、プロパティのインデントはせず、プロパティの後にすぐコロンを置き、半角スペースで開けて値を記述します。要は、例の通り書けばおkです。

CSSの基礎構文

書き方のルール

HTMLでは大文字小文字を区別しませんでしたが、CSSでもそれは同じです。しかしながら、XHTML内でCSSを記述した場合は大文字小文字が記述されるそうです。将来的なXHTMLへの移行に備え、CSSは半角小文字で記述しましょう。

CSSの基礎構文

色を指定する

これ以上gdgd基礎構文について解説するのも退屈なので、ここからはとりあえず基本的なプロパティについて解説しながらCSSの基礎について説明していこうと思います。例では、2つのプロパティを扱いました。

colorテキストの色を指定する。指定方法についてはHTMLと同じようにカラーコードを用いる方法、色名を用いる方法がある。
(実はCSSには他にも4種類ほど色の指定方法があるのですが、色々習っても混乱するので後で教えます。)
font-sizeテキストの大きさを指定する。指定方法にはHTMLで習ったpx(ピクセル)、パーセンテージの他、確か12種類ほど指定方法があった気がしますが、後でやります。
なお、HTMLと異なり必ず単位をつけること。あと、px以外の指定方法では小数も扱えます。pxで小数が使えない理由は皆さん分かりますよね

CSSの基礎構文

背景色を指定する

font-sizeの答えは、「pxはモニタのドットを表しているので、中途半端な小数を指定しても意味が無い(ドットは半分とかに割れない)から」です。

どんどん基本的なプロパティをやっていきましょう。
あ、HTMLの時も言いましたが、今やってるプロパティは基本的なものばかりなので覚えておいて欲しいんですが、ぶっちゃけ難しいプロパティ(というかCSSはそういうのばかりです……。)はその度にググればおkです。覚える必要はありません。

CSSの基礎構文

背景色を指定する

黒背景に文字色白の段落

background-color背景色を指定する。ページ全体の背景色ではなく、指定した要素の箇所のみの背景色なので注意すること。

CSSの基礎構文

背景色を指定する

他のプロパティでも言えることですが、このbackground-colorは例のようなブロックレベル要素でもインライン要素でも使えます。
先週ちょこっと扱った、汎用的なインライン要素であるspan要素でも試しに使ってみますか。
(あとで分かりますが、実は下のspan要素の使い方ってあんまし良い使い方ではないです。普通はclass属性やid属性を併用して使います。まあまだ初めだしねえ。)

灼眼のシャナは糞アニメです。

CSSの基礎構文

背景色を指定する

ここでクイズです。では、「ページ全体の背景色を黒にし、ページ内のすべての文字色を白にする」にはどうすればいいでしょうか?
今まで習った知恵と知識をフル稼働すれば分かります。ヒントとして、body要素内の本文を弄る必要は一切ないです。

CSSの基礎構文

背景色を指定する

「body要素の本文を弄る必要は一切ない」と釘を差したので、まさか下のようなソースを書いた人はいないと思います。

CSSの基礎構文

背景色を指定する

あんまり焦らしてもアレなので答えを言いますが、

こうです。

知らねーよとか言われそうですが、本文の内容は全てbody要素の入れ子になっているので、そのbody要素に直接色を指定してやればいいわけです。

ちなみに、セレクタでbodyではなくhtmlを指定しても(html要素はbody要素を入れ子にしているので)同じような表示になりますが、この場合bodyを指定するのが一般的です。

復習

親要素と子要素

次スライドでCSSのある重要な概念について扱いますが、その前に親要素と子要素について復習、というかちゃんと用語として取り扱っていなかったので説明します。

HTMLは要素の中に要素があって、またその中に要素があるというような階層構造(またはツリー型構造)になっています。

上の例では、u要素をi要素に対する親要素と言い、i要素をu要素に対する子要素と言います。簡単ですね。

CSSの基礎構文

継承とは何か

前々のスライドでさらっと「本文の内容は全てbody要素の入れ子になっている」とか「html要素はbody要素を入れ子にしている」とか言いましたが、神経質な人はたぶん重大な疑問を持ったことだろうと思います。

実は、CSSでは「親要素で指定したプロパティの値は、子要素に原則引き継がれる」という特徴があります。これは、HTMLで要素を入れ子にした時、外側の入れ子の要素が内側に引き継がれることと同じです。

このことを、CSSでは「継承」(inherit)と呼び、CSSのことを考える上で非常に重要な概念となっています。

↑第2回で出した文字装飾の例。
u要素(下線)の入れ子になっているi要素(斜体)の内容「英雄」は、下線かつ斜体になるんでしたね。

CSSの基礎構文

継承とは何か

Fate/stay nightはゴミアニメ

↑親要素pで指定した背景色は子要素spanに引き継がれる。しかし文字色はspanで指定し直してるので#ff0000になる。

CSSの基礎構文

継承とは何か

んで、「原則引き継がれる」というのが厄介で、何がなんでも引き継がれる訳ではないんです。

後でやりますが、ボーダー、マージン、パッディングという枠に関連したプロパティや、背景画像などは、inheritという値を指定しない限り、親要素の値は継承されません。まあ、これはそれ習うときに詳しく扱います。

CSSの基礎構文

idセレクタとclassセレクタ

継承の話はこれで終わりにして、さて、これでCSSの書き方の基礎の2,3割くらい(こんだけ重要な話をやりまくってもまだ2,3割です……。これに加え、CSSでは膨大な数のプロパティとその値を扱います。。これが、HTMLよりCSSの難易度が高いとか言われる所以ですね。)は終わったのですが、今習った知識だけだと、サイトを作る上である重大な欠陥を抱えてたまま作ることになってしまいます。

例えば、h1要素による見出しを複数使い、それぞれの見出しを赤、青、……と色分けしたい時、どうすればいいでしょうか。下のような感じです。

とある魔術の禁書目録

↑h1見出しその1

偽物語

↑h1見出しその2

CSSの基礎構文

classセレクタ

さあ、ここで汎用属性でサラッと触れたclassセレクタの出番です。まず、何も考えず下のソースを打ってみてください。

CSSの基礎構文

classセレクタ

どうでしょうか?見出しが色分けされたでしょうか?

勘の良い人ならもう察しは付いていると思いますが、CSSでクラス名付きのセレクタを定義し(要は名前を付け)、HTMLのclass属性でそれぞれの要素から同じクラス名のセレクタの宣言を呼び出して(要は名前を付けたセレクタを読み込んで)います

CSSの基礎構文

名前の付け方

クラス名はCSSで定義したクラスとHTMLのclass属性で呼び出しているクラス名が一致していればなんでも構いません。(※ただし少しルールがあります)例では見出しなのでheadline1とかheadline2としましたが、別にazusaとかkagaminとか付けても何も誤りではないです。
ただし、慣習上その要素や意味にちなんだクラス名を付けるのが好ましいとされています。

※使用できる文字は大小アルファベットと数字 [A-Za-z0-9] 、およびハイフン(-)とアンダースコア(_)に限る。また、先頭は数字やハイフンではならない。(厳密に言うと先頭の数字がダメなのはidセレクタだけなのですが、ややこしいので一括禁止します。)

コーディング規約で定めましたが、本講習会ではクラス名やこの後やるidセレクタは全て小文字を用い、記号は用いないことにします。

CSSの基礎構文

名前の付け方

以下は補足なので読み飛ばしてもらって構いませんが、プロのウェブ制作者はラクダ記法と呼ばれる記法を使うことが多いようです。
ラクダ記法とは、id="mainMenu"とか、id="mainContents"とか、単語間の区切りに大文字を用いる記法です。
C言語などのプログラミングの識別子の命名規則なんかには他にid="main_menu"とかid="main_contents"のようなアンダースコア記法という単語間の区切りに「_」を用いる記法もありますが、HTMLにおいてはInternet ExplorerのVersion 4以前やNetscape 4.x系でidやclassにアンダースコアが入っていると正常に表示されないバグがあった影響で、現在でもこの記法を嫌うウェブ制作者が多いようです。

ちなみに、これからデザインをやっていく中でidやclassをたくさん使わないといけないのですが、その命名なんかで迷ったときは↓のサイトを参考にするといいと思います。
http://dreamweaver.cc/blog/archives/post_98.html

CSSの基礎構文

idセレクタ

次はidセレクタです。ぶっちゃけ、実用レベルで使うにはidもclassも何も変わりませんし、実際多くの初心者は特に違いを意識せずに使用しています。(しかも多くの場合何の支障も出ません……。)

ヽ| l l│<ハーイ、これだけです。.(ドット)が#(ハッシュマーク)に変わり、h1要素の属性がclassからidに変わっただけです。
これで、表示は全く同じようになる筈です。

CSSの基礎構文

idセレクタとclassセレクタ

んじゃあidとclassはどう違うんですか?って話ですが、簡単に纏めると、idはHTMLソース中で一度だけ使え、classは何度でも使えるです。

idは一意に特定できる箇所を示すのに使われ、classは任意の箇所に何度でも使えます。

CSSの基礎構文

idセレクタとclassセレクタ

先ほどの例で同じ色の見出しを何度も使おうとする場合、idを使うのは不適切です。

idはその名前一つでhtmlの任意の一箇所を指定できなければダメです。
これでは、headline1を指定しようとした時3つも出てきて困りますね。
何度も使う場合、classを使った以下が正解になります。

CSSの基礎構文

idセレクタとclassセレクタ

じゃあidって逆にどんな時に使うの?ですが、一般的な使い方としては、例えばウェブサイトのメニュー(ソフトフォーラムのトップページでいうと一番上のメニュー)なんかを使う時同じメニューがページ内に何箇所もあるわけがないのでid="menu"なんて感じでメニューの領域を定めて、デザインを決めてやります。

疑問符だらけかもしれませんが、もっと分かりやすく説明しようと思って全力でググっても分かりやすい説明がなかったので分からなかった人はyahoo知恵袋とかで質問して下さい><(責任転嫁)
まあ、正直な話使い分け方がよく分からなかったらclassだけ使ってれば問題ないです。(ただしHTMLを正しく理解している人には笑われるかも……)

あ、ちなみにこのidとclass、何もCSSだけで使うわけじゃないです。ページ内リンクとかformとか、あとはJavaScriptなどのスクリプト言語で多用されます。