戻る

今回の授業は、スタイルシート(CSS)の使い方を解説します。
そして来週と再来週の時間を使ってCSSの練習課題に取り組みます。

教科書を持っている場合は、第３章「スタイルシートを活用しよう」P.47 をあわせて参照してください。
わかりやすくまとめてあると思うので、復習用などに役立ててください。

CSSは Cascading Style Sheets の略で、「スタイルシート」あるいは単に「スタイル」とも呼ばれます。

CSSはウェブページの見栄えを設定するための言語です。現在、多くのサイトで使用されています。最近はCSSを使ってページの見た目を整えるのがもはや必須テクニックと言っても良いでしょう。

通常のHTMLでは表現が難しい、様々なデザインをCSSで実現できます。

ウェブページが画面に表示される際の 色・サイズ・レイアウトといった表示の詳細だけでなく、プリンタなどで印刷される際のレイアウト、音声で読み上げられる際の再生情報など、さまざまな設定を行うために使われています。

HTMLにも見栄えを設定する項目があります。例えば<font>やbackground属性など、数多くの設定が存在します。また、表<table>でページをレイアウトすれば、HTMLだけで文章の並べ方（レイアウト）を設定することもできます。

しかしウェブページの見栄えをHTMLで設定するのは、HTML本来の目的と異なる使い方です。HTMLは本来、情報構造を定義するためのしくみとして開発されました。しかし見栄え重視のために、表をレイアウト枠として使ったり、見た目に関するさまざまな設定が文章中に混じると、情報構造は乱れます。人やコンピュータにとって分析しづらい文書構造になってしまえば、検索などが働きにくくなったり、内容の修正が難しくなったりして、せっかくの文献を有意義に活用しづらい状態になります。

そこで、HTMLでは文書構造のみを定義し、ページの見栄え（デザイン）についてはHTMLと別に管理することが推奨されるようになりました。この見栄えの設定に用いられるのがCSSなのです。

そして見栄えに関する設定をHTMLと分離したことで、HTMLの表現能力を大きく超える、より自由なデザインができるようにもなりました。

CSSには以下のようなメリットがあります。

1. より多彩な表現ができます
   HTMLにはないさまざまなデザインをCSSで実現できます。
   たとえば半透明、影、3D変形、アニメーションなども行えます。
2. 文書構造を保ったままページの見栄えを設定できます
   HTMLで見栄えを設定しようとして、文章の内容や意味にそぐわないHTMLを使用すると、文章構造が難解になります。そこでCSSを使うと文章構造(HTML)への影響を最小限にしながらページの見栄えを設定できます。ページの構造と見栄えを分離することで、HTMLの記述をスッキリさせられるのです。
3. 作業しやすくなります
   例えばHTML文章中の見出し(<h1>)の色やサイズを変えようとすると、<h1>タグが使われているすべての箇所を修正する必要があります。 CSSを使うと、このような見栄えの設定を一括管理できます。
   また複数ページ間で同じデザインを共有できるので、サイト全体のデザイン変更などが容易になりデザインの大規模な編集が楽になります。
4. SEO効果やアクセシビリティ向上に繋がります
   見栄えに関する記述をCSSにまとめ、HTMLから排除することで、Google等の検索エンジンにとって解釈しやすいページとなり、ページの分析処理なども軽量化されます。これによって閲覧者がサイト検索を適切に行えるようなSEO効果が期待できます。

まとめると、HTMLは文章構造を担当し、CSSはデザインを担当する、というふうに役割分担させれば、編集や処理がしやすくなるということです。

それでは、実際にCSSを書くための準備をしましょう。

教科書を持っている場合は、第３章２「スタイルシートの基礎」P.49 をあわせて参照してください。

CSSを試すためのサンプルファイルを用意しました。こちらをダウンロードし、CSSを試してみましょう。

サンプルファイルセット css_sample.zip

ZIP圧縮ファイルになっており、以下のようなファイルが格納されています。

中身を取り出して、index.html と mystyle.css をそれぞれテキストエディタで開いて使用してください。

HTMLを書くファイルは拡張子が.htmlで、CSSを書くファイルは拡張子が.cssです。それぞれが別のファイルになっているのが特徴です。 HTMLファイルとCSSファイルはセットになっていて、CSSファイルに設定を書き込むと、HTMLの見た目が変化するようになっています。

テキストエディタで両方のファイルを開いたら、この後の項目で説明する例を参考に、自由に編集して実験してみましょう。内容が壊れても構いません。（どうしようもなくなったら、またZIP圧縮ファイルから初期状態のものを取り出しましょう）

CSSの具体的な書き方を解説します。

基本的な書き方は、以下のような構造です。サンプルにある mystyle.css を参考に実際の様子を確かめてみましょう。

セレクタ { プロパティ: 値; }

「プロパティ」の後はコロン「:」を書き、「値」の後はセミコロン「;」を書きます。似ているので間違えないよう注意しましょう。

そして、もし必要なら上のようなセットを必要ぶんだけ繰り返し書きます。 プロパティ:値;の部分も必要な数だけ増やせます。

セレクタ { プロパティ:値; }
セレクタ { プロパティ:値; プロパティ:値; プロパティ:値; }
セレクタ { プロパティ:値; プロパティ:値; }
   :           :

具体例を示しましょう。まずはとてもシンプルな設定を紹介します。

h1 { color:red; }

上の設定を実際に試してみましょう。CSSを書き込む場所はCSSファイルです。付属のサンプルファイルの場合は「mystyle.css」をテキストエディタで開き、下のように書き足して、保存（セーブ）しましょう。

mystyle.css

@charset "UTF-8";
/* CSS スタイルシート */
body {
  background-color: #FFFFFF;  /* サンプルファイルには、*/
  color: #000000;             /* 最初からこんな風に書かれているので…… */
}
 
h1 { color:red; }             /* ← ここに書き足します。 */

１行目の@charset "UTF-8";は文字化けを防ぐためのおまじないです。
body { ～ }の部分が１つ目の設定で、書き足した h1 { ～ }の部分が２つ目の設定というイメージです。

/* ～ */ のような部分は「コメント」と言って、CSS的には無視されます。要するに、説明書きです。分かりやすいようにいろいろ書いてありますが、無視してＯＫです。

CSSを編集・セーブした後に付属の「index.html」をブラウザで開くと、CSSの効果が現れているはずです。（書き換えた場合はブラウザの画面をリロードして再読み込みしましょう）見出しの文字が赤くなっていたら成功です。CSSを書き換えたことで、文字の色が赤くなったというわけです。

上の設定の場合、h1 { color:red; }と書きましたが、h1が「セレクタ」、colorが「プロパティ」、redが「値」に相当します。それぞれ以下のような意味があります。

• セレクタ(selector) h1
  どの部分にデザインを適用するか、対象を指定するものです。基本はHTMLタグ名を書きます（他にもいくつか書き方があります。後で説明します）。
  
  上の例では h1 と書かれていますが、これは<h1>タグが対象であることを意味します。ページの中で<h1>が使われていた場合、全ての<h1>～</h1>範囲が影響を受けます。
  例えば、<h2>～</h2>の範囲に影響を及ぼしたいのなら、代わりに h2 と書きます。
  
  このようにセレクタを変えて、どの部分をデザインするかを決めるのです。

• プロパティ(property) color
  どんなデザインを設定するか指定するものです。プロパティの後ろにはコロン「:」を付けてください。
  
  プロパティには沢山の種類があり、文字の色、背景色の色、周囲の枠線の設定、縦横サイズの設定、周囲の余白設定などなど……さまざまな効果を設定できます。
  
  上の例では文字色を設定するためのcolorプロパティを使用しています。colorと書けば、「文字の色を変更しなさい」という意味になります。
  例えばbackground-colorというプロパティを使えば、「背景色を変更しなさい」という意味になります。
  
  このようにプロパティで、どんなデザインを設定するかを決めるのです。

• 値 red
  具体的な設定値です。値の後ろにはセミコロン「;」を付けてください。
  
  この例では文字色を指定するcolorプロパティに、値redを指定しています。文字色colorを赤redにするという、この「赤red」の部分が「値」というわけです。

なお、プロパティ:値; のセットは、全体を中括弧「{ ～ }」で囲んでください。²⁾

これらを「セレクタ { プロパティ:値; }」のように組み合わせます。「h1 { color:red; }」は、「<h1>要素に対して、文字色colorを、赤くredせよ」という意味になります。 その結果、サンプルファイルの「index.html」では、<h1>～</h1>の見出し文字がすべて赤色になっているというわけです。

CSSはこのようにして、HTMLの特定の部分をデザインできるのです。

一つのセレクタに対して複数のスタイル設定を行いたい場合は、中括弧の中にプロパティ:値;のセットを複数書けます。セミコロン「;」が区切りになるので、書き忘れないようにしてください。

<h2>これは文字の色と背景色を変えた例です。</h2>

h2 { color:yellow;  background-color:yellowgreen;  }

これは文字の色と背景色を変えた例です。

この例では<h2>の範囲に対して、文字色colorを黄色yellow、さらに背景色background-colorを黄緑yellowgreenに設定しています。

CSSを見ると、h2 { ～ }という構造の{ ～ }の中に、color:yellow;という設定と、background-color:yellowgreen;という設定が２つ入っている形です。

このようにプロパティ:値; のセットを複数書くと、複数の設定が重複して適用されていきます。

高度なデザインを行う場合は、このプロパティ:値;をたくさん書くことになります。{ ～ }の中身がどんどん長くなっていくことでしょう。

上記のように セレクタ { プロパティ:値; プロパティ:値; ～ } が１つの設定のカタマリとなります。

さらに別のセレクタに対して設定を追加したい場合は、{ ～ }範囲の外に、新たなセレクタ { プロパティ:値;～ }を追加しましょう。

原則{ ～ }が二重になることはない³⁾ので、セレクタ { セレクタ { ～ } } のようにならないよう、注意しましょう。

セレクタ { ～ } セレクタ { ～ } セレクタ { ～ }…のように続く構造が正しいです。

セレクタ { プロパティ:値; }
セレクタ { プロパティ:値; プロパティ:値; プロパティ:値; }
セレクタ { プロパティ:値; プロパティ:値; }

/* と */で囲んだ範囲は「コメント」という扱いになり、CSSでは無効とみなされます。メモをコメントとして書き込んだり、一時的に無効にしたいCSSをコメントにしてしまうと便利です。

なお /* /* */ */ のように二重の入れ子構造になると正しく認識されなくなるので注意してください。

/* 段落の文字色を青くし、行の高さを1.5倍にする */
p { color:blue; line-height:1.5; }

上の例では、<p>の範囲に対して文字の色colorを青blueにし、行の高さline-heightを1.5倍にする設定ですが、/* ～ */ の部分は無視して処理されるのでCSSとしての効果はありません。

上のようにコメントで人間にとって分かりやすい文章を書いておくと、あとで設定を確認する時に良いでしょう。

CSSでは、セレクタ・プロパティ・値のそれぞれの間に「半角スペース」「改行」「タブ」を自由に入れられます。

table {
   color: red;
   background-color: green;
}

table{color:red;background-color:green;}

上の例は改行やスペースが異なりますが、どちらも全く同じ動作になります。

途中に改行を挟んでも、挟まなくても問題ありませんし、単語と単語の間や、{ }の前後にスペースを入れても入れなくても問題ありません。ただしbackground-colorやgreenなど単語の途中部分では改行やスペースで切らないようにしましょう。

それ以外の部分では、スペースや改行で自由に調整できるので、見やすくなるよう自由にアレンジしてください。CSSは設定が長くなりすぎたら、適度に改行などすると良いでしょう。

p { color:blue; line-height:1.5; }
/* ↑ こちらは正しく動作します */

p {　color:blue;　line-height:1.5; }
/* ↑ こちらは正しく動作しません
　　全角スペースが混じっています */

CSSでは、同じ効果を持つ設定を複数回書くと、原則、後に書いた設定が有効になり、設定の上書きが起こります。（「後」とは下の行という意味です）

<h1>これはh1見出しです</h1>

h1 { color:red; background-color:skyblue; }
h1 { color:blue; }

これはh1見出しです

上の例の場合、CSSは２行書いてありますが、どちらも<h1>の範囲に対する設定です。

• 前者は文字の色colorを赤色redにし、さらに背景色background-colorを水色skyblueに設定しています。
  こういう色合いです。
• そして後者は文字の色colorを青色blueに設定しています。
  こういう色合いです。

つまり、同じ<h1>に対して、colorの設定が重複しているわけです。

この場合、文字の色colorは後から書いた設定で上書きされるため、後者の青色blueが採用されます。一方、背景色background-colorの設定は重複していないので、水色skyblueのままです。

このように設定が上書きされ、このような色合いになるわけです。

例えば上記のようにCSSの中で設定が重複しているとき、前者のcolor:red;部分を書き換えても、最終的な結果は変化しないので注意してください（どんな色に設定しても、あとから上書きされるからです）。

逆にこの仕様を利用して、すでに設定されているデザインを部分的に修正したい場合に、後の方に修正したいCSSを追加で書き込んで意図的に設定の上書きを狙う、という方法もあります。

すでに設定されている部分は書き換えないので、元のCSS設定が壊れるリスクが減り、いざとなれば追加した部分を消して元の設定に戻せる、というメリットもあります。

以上がCSSの基本的な書き方です。

他にはプロパティや値の設定の仕方がたくさんあるのですが、それらはおいおい紹介していきましょう。

それでは、作ったCSSをあなたのページで使えるようにするための方法を解説します。

今まであなたが作ってきた普通のHTMLページを、新たにCSSに対応させるには、準備が必要となります。

もちろん上でダウンロードしたサンプルファイルの場合は、先生がすでに準備しておいたので最初からCSSが使えますが、もしあなたが作った普通のHTMLファイルでもCSSが使いたくなった場合は、以下のような準備を行ってCSSを使えるようにする必要があるでしょう。

教科書を持っている場合は、第３章４「HTMLへの組み込み方」P.55 も合わせて参照してください。

CSSをHTMLに適用するには、大きく分けて3つの方法があります。

1. 外部CSSファイルを読み込む ( <link>タグ ) おすすめ！
2. ファイルごとに設定する ( <style>タグ )
3. 局所的に設定する ( style属性 )

下で順に解説します。

別途CSSを記入したファイルを用意して、HTMLファイルに読み込ませる方法です。そのためにはHTML文章の<head>～</head>の範囲内に、以下のように<link>（リンク）タグを記述し、読み込ませたいCSSファイル名を指定します。

上でダウンロードしたサンプルファイルも、この方法を使用しています。最も基本的な方法です。

<html>
<head>
<!-- ↓↓ここでCSSファイルを読み込んでいます↓↓ -->
<link rel="stylesheet" href="xxx.css" >
</head>
<body>
<h1>第一章 はじめに</h1>
<p>・・・省略・・・</p>
</body>
</html>

h1 { color: red; }  /* h1見出しの文字色を赤にする */

上の例では、<head>～</head>範囲内に書かれている<link rel="stylesheet" href="xxx.css" >という記述によってxxx.cssが読み込まれます。

ちなみに rel は「relation」の略です。

relation リレーション【rɪléɪʃən】 関係、関連、間柄 など

そしてCSSファイル側に書かれた設定によって、HTMLファイル内の全ての<h1>見出しの文字色colorが赤色redになるという、おなじみの設定が実行されます。

• もちろん xxx.css の部分は、実在するCSSファイルに合わせて適切な名前に置き換えてください。
• CSSファイル名を間違えたり、ファイルの保存場所を間違えたりすると読み込めません。注意してください。

修正作業のしやすさなどを考慮すると、この方法でCSSを読み込むのがおすすめです。

またもう一枚、新しいHTMLページを作った場合も、同様に<head>～</head>範囲内に<link rel="stylesheet" href="xxx.css" >と書き込めば、まったく同じCSS設定を別のページにも適用できるので、複数のページを同じデザインに統一できるというメリットがあります。いちいちページごとに細かい設定をしなくても良いので楽だというわけです。

たくさんページがあるサイトの場合、CSSを一つにまとめておけば、全てのページのデザインを一箇所で管理できるでしょう。

もしHTMLだけでデザインしようとすると、デザインを修正する際に全てのページを修正しないといけないので、とても大変です。ですがCSSを一つにまとめておけば、デザインを修正する際にCSSファイルを１箇所書き換えるだけで、そのCSSを使っている全てのページのデザインが修正されるので、とても効率的です！😁

HTMLの<head>～</head>の範囲内に<style>～</style>（スタイル要素）を追加してCSSを設定する方法です。

ex01.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- ↓↓ここからCSS設定↓↓ -->
  <style>
    h1 { color: red; }
  </style>
  <!-- ↑↑ここまでCSS設定↑↑ -->
</head>
 
<body>
 
<h1>第二章 CSSとは</h1>
<p>・・・省略・・・</p>
 
<h1>第三章 CSSの書き方</h1>
<p>・・・省略・・・</p>
 
</body>
</html>

上の例では、<head>～</head>の範囲内に<style>～</style>が追加されており、CSS設定が書き込まれていることが分かります。

CSSを別のファイルに書かず、HTMLファイルの中に直接書き込んでいるのが特徴です。

そしてその効果により、このページ内の全ての <h1>見出しの文字色colorが赤色redになります。

CSS設定は書き込んだHTMLファイル内だけで有効になります（要するに、このページ限りの設定なのです）。

この方法は別のCSSファイルを必要としません。わざわざ別途CSSファイルを用意するほどではない、ちょっとしたテストなどに使えます。

最後に紹介するのは、HTMLタグにそのつどstyle="～"（スタイル属性）を追加してCSSを記述する方法です。style属性を追加したタグの範囲だけにCSS設定が有効です。

<p style="color:red; line-height:1.5;" >CSSのメリットとは</p>

上の例では、指定の<p>～</p>範囲内のみ、文字色が赤、行間が1.5倍の高さになります。

好きなタグにstyle="～"を追加し、「～」の部分にプロパティ:値;のセットをいくつでも書き込めます。対象タグを指定するためのセレクタは、不要なので書きません。設定はstyle="～"を追加したタグ範囲のみで有効で、その場限りです。

この方法は、必要になったらそのつどスタイルを設定できて便利ですが、HTML記述が複雑になるので、あまりおすすめはしません。効率良く見栄えを管理するには、上で解説したように外部CSSファイルを読み込むのが推奨です⁴⁾。

以上、あなたのHTMLにCSSを組み込む３つの方法でした。

セレクタ { プロパティ: 値; }

セレクタはデザインを適用する対象を示すものでした。 基本は h1 のようにHTMLのタグの名前を書きます。すると、HTML内の <h1>～</h1> の範囲にデザインが設定されるという仕様でした。

しかし、実はセレクタの書き方は、他にもいくつかのパターンがあります。特別なセレクタを駆使することで、HTMLのさまざまな部分にデザインを適用できるようになります。どの部分にCSS設定を行うか、いろいろと調整できるというわけです。

代表的なセレクタとしては、以下のような種類があります。

特に「クラスセレクタ」は使用頻度も高く、重要ですので、下で詳しく説明していきます。

従来のセレクタ「要素型セレクタ」は、HTMLのタグをh1のように指定してデザインするものでした。

ですがクラスセレクタは違います。

.hogehoge {color:blue;}   /* コレがクラスセレクタの書き方だッ */

従来の要素型セレクタの問題として、ページ内に存在する全ての指定要素がCSSの影響を受けます。例えばh1を指定すると、ページ内の全ての<h1>要素が影響を受けてしまいます。しかし全てではなく、特定の要素だけにデザインを変更したいこともあるでしょう。

そのような時に便利なのが「クラスセレクタ」です。クラスセレクタを使えば、特定の「クラス名」が付けられた要素に対してだけCSSを適用できるようになるのです。

クラスセレクタの効果を発揮させるには、あらかじめHTMLタグにclass="～"のように「クラス属性」を追加して、好きなクラス名を決めておきます。例えば以下のように設定します。

<h1 class="hogehoge">見出し</h1>
<h1>見出し</h1>
<h1>見出し</h1>

これは1つめの<h1>タグにだけclass="hogehoge"を追加して「hogehoge」というクラスを設定した例です。「hogehoge」がクラス名にあたります。hogehogeというヘンテコな名前は、今てきとうに決めました！😆 クラス名は半角英数字で自由なものを決められますので、ページ内で重複しないように好きに決めてください。

• style="xxx"（スタイル属性）と書き方が似ていますが、間違えないでください。class（クラス）です。

一方CSS側では、クラス名の先頭に ドット「.」を付けたものをセレクタとします。たとえば「hogehoge」クラスのCSS設定は、次のように書きます。

.hogehoge { color:red; background-color:orange; }

小さいですが、hogehogeの先頭に付いているドット「.」を見落とさないでください。

これでclass="hogehoge"を追加した要素のみ、CSS設定の影響を受けるようになります。つまり <h1 class="hogehoge">～</h1>と書かれた要素のみ、デザインが設定されます。

見出し
見出し
見出し

クラスを付けた一番目の見出しだけ、デザインが変更されている様子が分かります。

通常の方法でh1タグに対してデザインすると、すべてのh1見出しのデザインが変更されますが、クラスを付けておけば、対象クラスをもつ要素だけデザインを変えられるのです。

また、複雑ないくつもの設定を１つのクラスにまとめておけば、クラス名を書くだけで一括で呼び出せるメリットもあります。

なお異なるHTMLタグに対しても、同じクラスを指定すれば、同じデザインになります。

つまり、どんなHTMLタグでもclass="hogehoge"を追記すれば、同じスタイル設定が適用されるというわけです。

どんな要素でもデザインできるし、それらを統一したデザインで揃えられます。

例えば<h1 class="hogehoge">といっしょに<p class="hogehoge">のように<p>に対してもhogehogeクラスを使うように指定すれば、<p>も<h1>も同じデザインになるというわけです。

たとえば下の設定の場合、HTMLを見ると、<h2>と<p>のうち、２箇所にclass="info"が設定されています。この class="info" が設定された要素だけ、CSSの影響を受けます。

ex02.html

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="ex02.css">
</head>
<body>
<h2 class="info">第三章 CSSのメリット</h2>
<p class="info">CSSとHTMLでページをデザイン</p>
<p>HTML5では文章の構造と見栄えを分離することが推奨されている。</p>
</body>
</html>

ex02.css

.info { color:blue; }

CSSを見ると、クラス「info」を指定し、文字色colorが青blueになる設定を行っています。

つまり、HTMLでclass="info"が付いている要素は、文字色colorが青blueになるのです。

第三章 CSSのメリット
CSSとHTMLでページをデザイン
HTML5では文章の構造と見栄えを分離することが推奨されている。

クラスが設定されている２箇所の<h2>と<p>の範囲だけ、文字色が変化している様子が分かります。

このように、class属性を付けた要素だけ、特別にデザインするのが「クラスセレクタ」というわけです。

また、一度クラスとしてCSS設定を登録してしまえば、そのデザインをさまざまな要素に対して使い回しできるのです。

複数のセレクタをカンマ「,」で区切って並べると、まとめて同じCSS設定を適用することができます。

h1, h2, h3 { color:blue; }

上の例では<h1>と<h2>と<h3>に対してまとめて同じ設定を行えます。

複数の要素に同じ設定を適用したい時、何度も設定を書かなくてすむので便利です。

このようにセレクタを使って、さまざまな範囲にCSSを適用しましょう。

なおセレクタには他にもいくつか種類があります。ここで全ては紹介しきれませんが、気になった方は「CSS セレクタ 種類」でウェブ検索するなどして調べてみましょう。

次は、CSSを設定する範囲を操作する話です。

CSSは、何らかの要素で囲われている範囲を目標にスタイル設定を行えます。つまりCSSでデザインするためにはその部分が<???>～</???>のように、何らかのタグで囲われている必要があるのです。

しかし、もともとHTMLタグが書かれていない場所にスタイル設定をしたい場合もあるでしょう。でもCSSは何らかのタグで囲われていないと設定できない仕様……これは困りました。😥

このような場合のために、HTMLには <div>と<span>という２種類のタグが用意されています。

これらのタグも、どの部分にCSS設定を行うか指定するのに役立ちます。

<div>タグは、それ自身には見た目の効果がありませんが、<div>～</div>で囲まれた四角形の範囲に対してCSSを適用させられます。 <div>範囲の上下には自動的に改行が入り、見えない箱のようなものができあがります。
<div>タグは単体では効果が無いので、必ずクラスclass="xxx"や、style属性style="xxx"と併用して使用します。

この文章はサンプル文章です。
<div style="border:dashed 2px red;" >注意書き<br>これは重要な文章です。</div>
この文章はサンプル文章です。

この文章はサンプル文章です。
注意書き
これは重要な文章です。
この文章はサンプル文章です。

上の例では、<div>にstyle属性を追加して、直接CSS設定を書き込んでいます（もちろん <div class="classname">のようにクラスを使った設定もできます）。

ここでの設定内容は、要素の周囲に罫線を引くものです。罫線borderの種類を、点線（dashed）、太さ2ピクセル（2px）、赤色（red）に設定しています。つまり、<div>の周囲に太さ2ピクセルの赤い点線を引く設定です。

点線が四角形に引かれていることから分かるように、四角い箱状の範囲を持つタグのことをブロック要素と言います。

なお 見出し(h1～h6)、段落(p)、リスト(ul,ol) などもブロック要素扱いなので、<div>と同じような結果になります。

またブロック要素は、widthプロパティやheightプロパティで箱の大きさを変えられるのがポイントです。例えば下の例では、箱のサイズが幅400ピクセル、高さ100ピクセルになるように、width:400px; height:100px;の設定を追加しています。

この文章はサンプル文章です。
<div style="border:dashed 2px red; width:400px; height:100px;" >注意書き<br>これは重要な文章です。</div>
この文章はサンプル文章です。

この文章はサンプル文章です。
注意書き
これは重要な文章です。
この文章はサンプル文章です。

箱のサイズが指定通りに変わって、やや縦に長くなった四角形が描かれていることが分かると思います。

このように<div>は、大きさを自由に調整できる箱（ボックス）のような扱いができるのが特徴です。

<div>の用途は多彩で、テキストボックスのような使い方をしたり、色を塗って強調したり、ボタンのようなものを表現したり、記事をレイアウトするための枠組みにしたり、さまざまに使えます。

<span>タグも<div>同様に、それ自身には見た目の効果はありませんが、<span>～</span>で囲まれた範囲に対してCSSを適用させられます。<div>と異なるのは、CSSの効果範囲が１文字単位となる点です。

<p>この文章はサンプル文章です。
<span style="border:dashed 2px red;">注意書き これは重要な文章です。少し長い文章を書くことでdivタグとの違いが分かるかと思いますので、ここではあえて長めの文章を入力しています。</span>
この文章はサンプル文章です。</p>

この文章はサンプル文章です。注意書き これは重要な文章です。少し長い文章を書くことでdivタグとの違いが分かるかと思いますので、ここではあえて長めの文章を入力しています。この文章はサンプル文章です。

上の例では、<span>タグにstyle属性を追加し、先の<div>の例で設定したのと同様の罫線を周囲に引いています。

しかし<div>の場合と異なり、<span>範囲の前後には改行が入りません。箱状にもなりません。マウスをドラッグして文字を範囲選択したときのように、１文字単位で選択される様子が分かります。

たとえばこんなふうに蛍光マーカーでなぞったような演出も<span>ならできます。

このような範囲を持つタグのことをインライン要素⁵⁾と言います。

太字<b>、リンク<a>などもインライン要素扱いなので、<span>と同じような結果になります。

ただしインライン要素は、ブロック要素と異なり、widthプロパティやheightプロパティで大きさを変えられません。設定しても無視されます。

このように、<div>タグや<span>タグを追加すれば、もともとHTMLタグが書かれていない範囲にもCSS効果を適用できるのです。

ざっくり言うと、<div>タグや<span>は、CSSを設定する範囲を定めるためだけのものだと考えると良いでしょう。

違う点は、<div>は「四角い箱状の範囲」になる「ブロック要素」であり、<span>は「文字列を選択したのとよく似た範囲」になる「インライン要素」であるという点です。

プロパティにはたくさんの種類があります。上の例ではcolorやbackground-colorプロパティなどが例として登場しています。

教科書を持っている場合は、第３章５「見栄えを変更してみよう」P.57 以降を参照してください。代表的なプロパティの使い方が紹介されています。また、巻末にはプロパティの一覧がありますので参考にしてください。

他にもたくさんあります！

もし教科書を持っていない場合は、インターネット上の解説サイトなども参考にしてください。たとえばHTMLクイックリファレンスのようなサイトがあります。

その他「CSS おしゃれ デザイン」のようなキーワードでインターネット検索をすると、各種サイトでCSSを使ったさまざまなデザイン例が紹介されていますので、面白そうなデザインを取り入れてみると良いでしょう。

とにかくたくさんあるプロパティを一気に紹介するのは大変なので、この授業では必要に応じて、そのつど紹介していくことにします。

• CSS（スタイルシート）は、ホームページのデザインをするための書き方です。
• HTMLより高度なデザインができます。
• HTMLと分けて書くので、デザインの編集作業がしやすいです。

セレクタ { プロパティ: 値; }
セレクタ { プロパティ: 値; プロパティ: 値; ...  }

セレクタで、デザインを変更するタグを指定します。

くわしくはCSSの書き方参照

1. <head>～</head>の範囲内に <link rel="stylesheet" href="xxx.css"> のように記述して、xxx.css ファイルを読み込ませる。
2. HTMLファイル内に <style>～～</style> 要素を作って、その中にCSSを直接書き込む。
3. HTMLタグに <p style="～～">…</p>のように style 属性を追加して、その中に プロパティ:値; を直接書き込む。

くわしくはHTMLへの組み込み方参照

クラスを設定した箇所にだけ、デザインを適用できます。

HTML

<p class="mydesign">なんとかかんとか</p>

何らかのHTMLタグに class 属性を追加して、好きなクラス名を決めます。

CSS

.mydesign { color:red; }

CSS側では、セレクタを「先頭にドット『.』を付けたクラス名」にして、各種設定を行います。

くわしくはクラスセレクタ参照

• デザインを適用する範囲を好きに決められます。
• <div>や<span>単体では、見た目の効果はありません。
• クラスセレクタと併用すると、柔軟にデザインを設定できます。
• <div>を使えば、箱状のオブジェクト（ボックス）を作れます。
• <span>を使えば、１文字単位の範囲設定ができます。

<div class="mydesign">DIVで作ったボックス</div>
 
SPANは<span class="nantoka">インライン要素</span>です。<br>
このように文章中の一部をデザインできます。

くわしくは好きな範囲をデザインする参照

CSSでは書き間違いなどで誤った記述をすると、その部分は単に無視され、効果を発揮しません。 しかし画面にはエラーメッセージなどは表示されないので、誤りに気づきにくいです……。 困ったものです。😂

設定を行ったのに効果がない場合は、CSSの書き間違いの可能性があります。もし間違いの箇所がよくわからない場合は、とりあえず「color:red;」のような単純な設定に置き換えてみて、このように文字の色が赤色になるか確認して原因箇所を探すと良いでしょう。

文字が赤色にならないなら、「color:red;」より上の行に何か問題があると分かります。CSSもHTMLと同じように１行目から順番に下に向かって処理されるからです。そして、なにか問題が起こると無視されたり、それ以降が動作しなくなったりするわけです。
こうやって、問題の範囲をあるていど絞り込めれば、修正箇所を見つけやすいでしょう。

その他、/*～*/で囲ってコメント化すれば、その範囲のCSS設定は無効になるので、怪しい箇所をコメント化し、残りの部分が正常に動作するか確認しながら問題の箇所を探す、という方法があります。

思い切って怪しい箇所を一旦切り取って（Ctrl+X）動作確認するという方法もあります。

一気に作って動作確認すると、どこが悪いのかよく分からなくなるので、こまめに動作確認して、効果があるか無いか確かめならが作業をすすめるのもおすすめです。

上記を踏まえて、以前作成した自己紹介ページを、CSSに対応したものに置き換えてmoodleに提出してください。

学習支援システム moodle
https://cclms.kyoto-su.ac.jp/

以前作った自己紹介ページは、以下のようなものでした。

CSSに対応させる具体的な手順は、以下を参考にしてください。

自己紹介を書いたHTMLファイルを見つけます。ここではjikosyokai.htmlとします。

まずはjikosyokai.htmlに、CSSを読み込ませるための設定を追加しましょう。
ページ先頭近くにある<head>～</head>の範囲内に、以下のように<link>の記述を追加し、外部CSSファイルを読み込めるようにしましょう。（詳しくはHTMLへの組み込み方の項目を参照してください）

jikosyokai.html

<head>
・・・省略（なんか色々書いてあるはず）・・・
<link rel="stylesheet" href="mystyle.css">
</head>

上の例ではmystyle.cssを読み込む設定になっています。CSSファイルの名前は別のものに書き換えても構いません。

これであなたのHTMLファイルは、CSS対応になりました。かんたんですね！

<link>の行を書き足したら、CSSファイルをHTMLファイルと同じ場所に配置してください。

なお上の例通りにmystyle.cssを使うことにするなら、今回のサンプルファイルにmystyle.cssがちょうどありますので、jikosyokai.htmlと同じ場所にmystyle.cssをコピー・貼り付けして使いまわすと良いでしょう。その場合は、いろいろ試したmystyle.cssの中身は一度消去して白紙の状態に戻し、課題のために新しく設定をやり直すと良いでしょう。

HTMLでは、ページの背景色や文字の色は<body>で設定しているはずです。これをCSSで置き換えます。

HTMLの冒頭部分にある<body>の設定を探しましょう。おそらく以下のように設定されているかと思います（具体的な色などは、あなたの好みに合わせて別なものに置き換えてもらってＯＫです）。

jikosyokai.html

<body bgcolor="wheat" text="brown">

HTMLではbgcolor属性が背景色で、text属性が文字の色を表すということでした。これをCSSに置き換えます。

HTML（jikosyokai.html）側ではbgcolor属性とtext属性を消去し、CSS（mystyle.css）側に設定を追加します。

jikosyokai.html

<body bgcolor="wheat" text="brown">
↓↓↓ 修正 ↓↓↓
<body>

HTMLではbgcolorやtextの設定をバッサリ削ります。単に <body> と書かれている状態にします。

mystyle.css

body { background-color: wheat; color: brown; }

CSSではbackground-colorで背景色を、colorで文字色を設定できます。

これはサンプル文章です。
CSSのbackground-color設定とcolor設定によって、このようにページの背景色と文字色が変更される様子が分かります。

これでCSSを使ってページの背景色や文字色を設定できます。

HTML側にあった色の設定がCSSに整理されて、シンプルになった様子が分かると思います。

HTMLとCSSファイルをどちらも上書き保存し、ブラウザ画面をリロードした時に、ページの色や文字色が正しく設定されていればＯＫです。動作確認する場合は、このように保存とリロードを忘れないようにしてください。（通常はブラウザ画面でキーボードの「F5」キーを押すとリロードしてページの再読み込みができます）

以降、同様に設定をCSSに置き換えていきましょう。

<h1>や<h2>といった見出しのデザインを変更している場合は、以下を参考にCSSに置き換えると良いでしょう。

jikosyokai.html

<h1><font color="purple"><b>自己紹介</b></font></h1>
↓↓↓ 修正 ↓↓↓
<h1>自己紹介</h1>

HTML側に<font>や<b>のようなタグがある場合は、バッサリ削ります。
見出しであることには違いないので、<h1>などは削らないでくださいね！

mystyle.css

h1 { color:purple; font-weight:bold; }

先のbodyについての設定body { ～ }の次の行あたりに、上のように書き足しましょう。CSSの設定は単に列挙していけば良いです。

HTMLの<font color="">による文字色設定は、CSSのcolorに、HTMLの<b>による太字設定は、CSSのfont-weight:bold;設定にそれぞれ置き換えられます。

例によって色は好みのものに変えてもらってＯＫです。

自己紹介

これでCSSを使って見出し部分のデザインができました。

もし、特定の文字だけデザインを変えるなどしている場合は、<span>とクラスを使ってCSSに置き換えると良いでしょう。

jikosyokai.html

はじめまして、<font color="green"><b>山田太郎</b></font>です。
                   ↓↓↓ 修正 ↓↓↓
はじめまして、<span class="caution">山田太郎</span>です。

HTMLの<font>や<b>などの設定をまとめて<span>に置き換えます。設定しやすいようにクラス名を付けています。ここではcautionというクラス名にしてみました。（もちろんクラス名は別のものに置き換えても構いません）

mystyle.css

.caution { color:green; font-weight:bold; }

はじめまして、山田太郎です。

上の例はCSSの書き方を表しています。先ほどの「caution」という名前のクラスに対するCSS設定を行っています。

もし同じデザインをいろいろな箇所で使いたい場合は、HTML内に<span class="caution">～</span>で囲まれた場所をつくればＯＫです。

また、HTMLには無かった効果として、CSSでbackground-color:yellow;のようにbackground-color属性を追加すれば、文字の背景色も設定できるので、例えばマーカーでなぞったような効果も得られます。

mystyle.css

.caution { color:green; font-weight:bold; background-color:yellow; }

はじめまして、山田太郎です。

上の例では、CSSにbackground-color:yellow;を追加することで、背景色を黄色にしています。（お分かりかと思いますが色などの細かい設定は好みで変えてＯＫです）

このようにして文章中の一部範囲でデザインを変えることもできます。

第６回の、表（table）についての講義では、ページ全体を中央寄せにレイアウトするために、表を使う方法を紹介しました。

自己紹介ページでも下のように、<body>～</body>の内側に<table><tr><td>～</td></tr></table>のような構造が作られているはずです。（下の図では<body>の直下にある２行と、</body>の直前にある２行分の設定が該当します）

jikosyokai.html

・・省略・・
<body>
<!-- ↓↓↓↓本文を囲う表↓↓↓↓ -->
<table border="1" cellpadding="4" cellspacing="0" bgcolor="white" width="800" align="center">
<tr><td>
 
 
   ここにページ全体のコンテンツが書かれています。とっても長いはずです。
 
 
</td></tr>
</table>
<!-- ↑↑↑↑本文を囲う表↑↑↑↑ -->
</body>
・・省略・・

この表を使った構造 <table><tr><td>～</td></tr></table> をCSSに置き換えてみましょう。以下のようになります。

jikosyokai.html

・・省略・・
<body>
<!-- ↓↓↓↓本文を囲う表↓↓↓↓ -->
<div class="layout">
 
 
   ここにページ全体のコンテンツが書かれています。とっても長いはずです。
 
 
</div>
<!-- ↑↑↑↑本文を囲う表↑↑↑↑ -->
</body>
・・省略・・

HTMLでは<table ～ ><tr><td>と</td></tr></table>を、それぞれ<div>と</div>に置き換えます。そして設定しやすいようにクラス名を付けます。ここではlayoutというクラス名にしています。

mystyle.css

.layout { border: solid 1px gray;
          padding: 4px;
          background-color:white;
          width:800px;
          margin:0 auto; }

CSSでは、layoutクラスに対して上記のような設定を行います。それぞれの設定項目には、以下のような意味があります。

1. border: solid 1px gray;
   HTMLのborder="1"に該当する設定です。周囲に罫線を引いています。ここでは罫線の種類を実線（solid）・太さ1ピクセル（1px）・色はグレー（gray）としています。
   このように border プロパティは、「罫線の種類」「太さ」「色」といった値を複数設定できるプロパティです。
   もし周囲に罫線が要らないなら、この設定は不要です。
2. padding: 4px;
   HTMLの cellpadding="4"に該当する設定です。セル内に余白を４ピクセル設けています。
   表の境界から文字までの距離に相当します。適度な距離を設けたほうが文字が読みやすいでしょう。
3. background-color:white;
   HTMLの bgcolor="white"に該当する設定です。背景色を白色にしています。もちろん好みの色を塗ってＯＫ。
4. width:800px;
   HTMLのwidth="800"に該当する設定です。<div>の横幅を800ピクセルにしています。
5. margin:0 auto;
   HTMLのalign="center"に該当する設定です。ここでは中央寄せにするための特別な書き方をしています⁶⁾。
   とりあえず、widthを設定した上で、上のようにmarginを設定すると、中央揃えができると覚えておくと良いでしょう。

これでページ全体を囲う表をCSSで表現できました。

このようにして、必要に応じてHTMLの設定をCSSに置き換えていきましょう。デザインに関する設定をCSSに分担させれば、HTMLがシンプルになっていく様子がわかると思います。

上記のような改造を行った自己紹介ページ jikosyokai.html を、画像やCSSなど関連ファイルをすべて含めてZIP圧縮し、moodleに提出してください。細部のデザインは独自にアレンジしてもらってＯＫです。

学習支援システム moodle
https://cclms.kyoto-su.ac.jp/

以上で今回は終了です。おつかれさまでした。

とはいえ、今日の基本的な話を見ただけでは、CSSがどう使えるのか今ひとつ分からなかったかもしれません……。サンプルのデザインもいまいちイケてない感じかもしれません😅。そこで、次回からはより具体的なCSSの使い方について演習をしていきたいと思いますので、よろしくおねがいします。

戻る