第10回 CSSの利用

戻る

今回の授業は、スタイルシート(CSS)の使い方を解説します。
そして自己紹介ページをCSSに対応したものに作り変える課題に取り組んでもらいます。

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

CSSはウェブページの見栄えを設定するための言語です。普通のHTMLページに追加でCSSを使うと、ページの見た目を良くできます。

例えば下記のサンプルは、ＣＧ画像ではなく、CSSによって作り上げられたデザインです。
通常のHTMLでは表現が難しい様々なデザインを実現できる様子が分かります。

CSSは現在、多くのサイトで使用されており、現代のモダンなデザインのWebページを作る際にほぼ必須テクニックと言っても良いでしょう。

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

CSS、すごそうですね！😲

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

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

<table>
 ↓↓↓
<table border="1" bgcolor="yellowgreen" cellpadding="4" cellspacing="0" align="center" width="400" height="300">

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

要するに、デザインに関するごちゃごちゃした設定は、全部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を書くための準備をしましょう。

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

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

ダウンロードしたファイルはZIP圧縮されており、ZIPの中には以下のようなファイルが格納されています。

ZIPの中身は全て外に出してから使ってください。

ZIPの中から index.html と mystyle.css を取り出し、デスクトップなど適当な場所に配置しましょう。もし htdocs フォルダ内に配置する場合は、他のファイルと混ざらないように、新しいフォルダを作ってその中に入れたほうが良いかもしれません。

HTMLを書くファイルは拡張子が .html で、CSSを書くファイルは拡張子が .css です。それぞれが別のファイルになっているのが特徴です。

HTMLファイルとCSSファイルはセットになっていて、CSSファイルに設定を書き込むと、HTMLの見た目が変化するようになっています。

それぞれをテキストエディタで開いて編集しましょう。

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

複数のファイルをテキストエディタで開いている時は、どのファイルを編集するのかを画面上部で見分けて作業します。

上のような状態なら、index.html を編集中の状態です。
記入するファイルを間違えないようにしましょう。

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

CSSは基本 .css ファイルに書き込みます。

基本的な書き方は、以下のようなものです。
みなさんもサンプルにある mystyle.css をテキストエディタで開き、中身を見ながら実際の様子を確かめてみましょう。

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

最初に「セレクタ」と呼ばれるキーワードが付きます。

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

もし必要なら、上のようなセットを必要ぶんだけ繰り返し書きます。 プロパティ:値; の部分も必要な数だけ増やせます。そしてそれら プロパティ:値; 全体を中括弧²⁾ { ～ } で囲います。

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

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

h1 { color:red; }

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

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

１行目の @charset "UTF-8"; は文字化けを防ぐためのおまじないです。文字コードとして UTF-8 を使用するという意味ですが、良く分からない場合はそのままにしておいてください。

body { ～ } の部分が１つ目の設定です。例のように複数行にまたがる場合もあります。
そして書き足した h1 { ～ } の部分が２つ目の設定というイメージです。

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

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

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

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

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

  h1 { color:red; }
    ↓ 書き換えます
  h2 { color:red; }

  

  <h2> が使われている部分だけ赤くなります

  このようにセレクタを変えて、どの部分をデザインするかを決めるのです。

• プロパティ(property) color
  どんなデザインを設定するか指定するものです。プロパティの後ろにはコロン : を付けてください。
  
  上の例では文字色を設定するための color プロパティを使用しています。color と書けば、「文字の色を変更しなさい」という意味になります。
  

  /* 文字の色を設定します */
  color: 色;
   
  /* 例 */
  color: darkblue;
  color: brown;

  文字の色を変える color プロパティ

  color プロパティ - MDN
  
  例えば background-color というプロパティを使えば、「背景色を変更しなさい」という意味になります。

  /* 要素の背景に色を塗ります */
  background-color: 色;
   
  /* 例 */
  background-color: skyblue;
  background-color: yellow;

  背景色を変える background-color プロパティ

  background-color - MDN
  
  そのほかプロパティには沢山の種類があり、文字の色、背景色の色、周囲の枠線の設定、縦横サイズの設定、周囲の余白設定などなど……さまざまな効果を設定できます。
  
  このようにプロパティでは、どんなデザインを設定するかを決めるのです。

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

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

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

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

• セレクタ ＝ どの要素をデザインするか
• プロパティ ＝ どんなデザインをするか（文字の色・背景 etc）
• 値 ＝ 具体的な設定値

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

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

中括弧 { ～ } の範囲外に書いた設定は無効になるので注意してください。

複数の設定を行えばデザインの効果は互いに重なり合い、より複雑なデザインを実現できます。

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

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

h2セレクタ { colorプロパティ:yellow;値 background-colorプロパティ:yellowgreen;値 }

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

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

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

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

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

もちろん別の色を設定すれば、自由に色を変えられます。

h2 { color:red;  background-color:orange;  }

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

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

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

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

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

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

下の例は <h1> と <h2> に対するデザインを両方設定している例です。

h1 { color:white; background-color:blue;   }  /* h1 青い背景に白い文字 */
h2 { color:red;   background-color:orange; }  /* h2 オレンジの背景に赤い文字 */

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

/* と */ で囲んだ範囲は「コメント」という扱いになり、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; }
/* ↑ こちらは正しく動作しません
　　全角スペースが混じっています */

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

h1 { color:red; background-color:skyblue; }
h1 { color:blue; }  /* ← h1 に対する color の設定が重複しています */

これはh1見出しです

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

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

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

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

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

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を使っている全てのページのデザインが修正されるので、とても効率的です！😁

他にもCSSの組み込み方があるので、余裕がある方は次の項目も参考にしてください。

細けえこたぁイイ! という方は、次の セレクタの種類 へ進んでください。

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

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

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

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

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

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

しかし、この方法ではページ内に存在する全ての指定要素がCSSの影響を受けます。例えば h1 を指定すると、ページ内の全ての <h1> 要素が影響を受けてしまいます。

全てではなく、特定の要素だけにデザインを変更したいこともあるでしょう。なのに問答無用で全部の設定を変えられてしまうのは乱暴です。😥

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

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

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

これは1つめの <h1> タグにだけ class="hogehoge" を追加し hogehoge というクラスを設定した例です。

hogehoge がクラス名にあたります。hogehoge というヘンテコな名前は、今てきとうに決めました！😆

クラス名は半角英数字で自由なものを決められます。

そしてCSSではこのように書きます。

/* クラスセレクタの書き方 */
.hogehoge { color:red; background-color:orange; }

CSSでは、クラス名の先頭に ドット . を付けたものをセレクタとします。

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

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

見出し
見出し
見出し

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

通常の方法で h1 { ～ } のように設定すると、すべての h1 見出しのデザインが変更されますが、このように特定の要素だけをデザインしたい時に、クラスセレクタを使うと便利です。

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- CSSを読み込む -->
<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 にする。 */
.info { color:blue; }

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

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

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

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

このように様々なタグにクラスを付けて、同じデザインを使い回しできるのがクラスセレクタの良いところです。

クラス名を半角スペースで区切ることで、１つのタグに対して複数のクラスを付けられます。

<p class="small red hint">あれやら これやら なんやら かんやら</p>

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

h1, h2, h3 { color:blue; }

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

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

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

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

しかし、もともとHTMLタグが書かれていない場所にスタイルを設定したいこともあるでしょう。
でもタグで囲われていないとセレクタでどこを設定すべきか指定できません。
クラスを付けたくても、やはり何かのHTMLタグの後ろにクラスを書く必要があるので、やっぱり指定できません。
とにかく何かHTMLタグが使われていないとデザインさせてもらえない……。これは困った！ 😥

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

<div>や<span>自体には特別な効果はありません。しかし彼らはまさにCSSでデザインする範囲を決めるために生まれてきたようなタグなのです。

これらを使えば、タグで囲われていなかった範囲にもデザインできてしまいます。

たとえば下の「山田太郎」の部分だけにCSSで設定をしたい！ と思っても、できません。
タグで囲われていないからです。

こんにちは山田太郎です。<br>

ならばタグ<span>～</span>で囲ってしまえばよいのです。

こんにちは<span>山田太郎</span>です。<br>

さらに上で説明したクラス class 属性も追加すれば、CSSを設定できますね！

こんにちは<span class="hogehoge">山田太郎</span>です。<br>

このように、CSSを設定する範囲を決めるために使う「見えないタグ」これが <div> や <span> タグなのです。

<div> や <span> について、以下の項でさらに詳しく解説します。

<div>（ディブ）タグは、それ自身には見た目の効果がありませんが、<div>～</div> で囲まれた四角形の範囲に対してCSSを適用させられます。 <div> 範囲の上下には自動的に改行が入り、見えない箱のようなものができあがります。

<div> タグ自体は目に見えないので、ほとんどの場合はクラス class="xxx" と併用して使用することになるでしょう。

なお div の由来は、境界や仕切りを意味する「division（ディビジョン）」から来ていると言われています。

division 【発音】divíʒən 【名】 (分割する)仕切り、境界、(分割された)区画、部分 など

この文章はサンプル文章です。
<div class="dot">注意書き<br>これは重要な文章です。</div>
この文章はサンプル文章です。

.dot { border:dashed 2px red; }

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

上の例では、<div> に dot という名前のクラスを追加し、CSSで設定を行っています。

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

例えば border:solid 1px blue; なら <div> の周囲に太さ1ピクセル（1px）の青い（blue）実線（solid）を引けます。このように border は要素の周囲にさまざまな線を引くプロパティです。

/* 要素の周囲に罫線を引きます。 */
border: 線の種類　太さ　色;
 
/* 例 */
border: solid 1px gray;
border: dashed 2px pink;

border - MDN

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

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

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

この文章はサンプル文章です。
<div class="dot">注意書き<br>これは重要な文章です。</div>
この文章はサンプル文章です。

.dot {
 border:dashed 2px red;
 width:400px;      /* 幅 400ピクセル */
 height:100px;     /* 高さ 100ピクセル */
}

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

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

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

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

下は実際に <div> とCSSを使ってデザインをしてみた例です。

border:solid 1px green;   /* 緑の罫線を引く */
background-color:#ccff99; /* 背景色を決める */
max-width:400px;          /* 最大横幅を400ピクセルに限定 */
padding:1em;              /* ボックス内余白１文字分 */
margin-bottom:1em;        /* 下方向の余白１文字分 */

border:solid 1px orange;   /* 緑の罫線を引く */
background-color:#fc9;     /* 背景色を決める */
background:linear-gradient(to bottom, #fc9, #fa6); /* グラデーションを作る */
max-width:300px;     /* 最大横幅を300ピクセルに限定 */
padding:1em;         /* ボックス内余白１文字分 */
border-radius:10px;  /* 角を丸くする */
margin:0 auto;       /* ボックスを中央揃えにする */
box-shadow: 4px 4px 10px rgba(0,0,0,0.4); /* 影をつける */

<div>でいろいろなデザインができそうですね！😀

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

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

.dotbox { border:dashed 2px red; }

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

上の例では、<span>タグにdotboxという名前のクラスを設定し、先の<div>の例で設定したのと同様の罫線を周囲に引いています。

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

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

このように文字を選択したときのような範囲を持つタグのことをインライン要素⁷⁾と言います。

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

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

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

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

div

<div> を使うと、

これをブロック要素と呼びます。

span

<span> を使うと、このように一部の文字にデザインを行えます。これをインライン要素と呼びます。

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

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

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

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

<h1 class="cool">カッコイイ見出しのデザイン</h1>
<p>なんとか かんとか ああたら こうたら うんぬん かんぬん</p>

.cool {
  padding: 0.4em 0.5em;             /* 文字の周囲の余白を設定 */
  color: #494949;                   /* 文字の色は濃いグレー */
  background: #f4f4f4;              /* 背景色をグレーに */
  border-left: solid 5px #7db4e6;   /* 左に線を描く */
  border-bottom: solid 3px #d7d7d7; /* 下に線を描く */
}

カッコイイ見出しのデザイン
なんとか かんとか ああたら こうたら うんぬん かんぬん

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

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

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

• セレクタ ＝ どの要素をデザインするか
• プロパティ ＝ どんなデザインをするか（文字の色・背景 etc）
• 値 ＝ 具体的な設定値

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

HTMLの冒頭部分にある <head>～</head> の範囲内に <link rel="stylesheet" href="xxx.css"> という設定を追加してCSSに対応させましょう。 指定したファイル xxx.css に書かれている設定が読み込まれます。

<head>
　：
<link rel="stylesheet" href="xxx.css">
　：
</head>

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

クラスを使えば、指定のクラスをつけた要素だけに特別なデザインを適用できます。

HTML

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

何らかのHTMLタグに class 属性を追加すると、そこをデザインできます。クラスの名前は好きに決められます。

CSS

.mydesign { color:red; }

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

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

• デザインを適用する範囲を定めるためのタグが <div> や <span> です。
• <div> や <span> 単体では、特に効果はありません。
• クラスセレクタと併用すると、柔軟にデザインを設定できるでしょう。
• <div> を使えば、箱状の四角形「ボックス」を作ってデザインを適用できます。「ボックス要素」と呼びます。
• <span> を使えば、１文字単位でデザインを適用できます。「インライン要素」と呼びます。

<div class="mydesign">DIVで作るボックス要素</div>

SPANは<span class="nantoka">インライン要素</span>です。<br>
このように文章中の一部をデザインできます。

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

CSSを書き間違えた際のフォロー方法について紹介します。参考にしてください。

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
</head>

<body bgcolor="#def" text="#048">
<!-- 本文ここから -->

<table border="1" cellpadding="8" cellspacing="0" bgcolor="white" width="700" align="center">
<tr><td>

<table border="1" cellpadding="4" cellspacing="0" bgcolor="white">
<tr><td>コンピュータ基礎実習 上級</td><td>○曜○限</td></tr>
<tr><td>学生番号</td><td>１２３４５６</td></tr>
<tr><td>学部</td><td>外国語</td></tr>
<tr><td>学年</td><td>1</td></tr>
<tr><td>氏名</td><td>○○○○</td></tr>
</table>

<h1><font color="#08f">自己紹介</font></h1>

<img src="neko.jpg"><br>

<p>こんにちは、○○です。 コンピュータ基礎実習を受けることになりました！実家から片道30分かけて通っています。<br>
ウェブページは普段見るだけですが、この講義はページを作成する授業と聞いてどんなものか興味があります。</p>

<h2><font color="#08f">● 趣味または得意なこと ●</font></h2>

<p>友人と月に何度かカラオケに行きます。安い店を知っているので行く回数は多めです。気分転換にいいですね。
あと最近は<font color="red">AmazonのKindle</font>で電子書籍を読むのがマイブームです。読み終わった本がかさばらず、値段がちょっとだけ安い事が多いので助かります。
最近面白いと思った作品は「<font color="red">●●●●</font>」です。流行の作品なので読んでみましたが、意外と面白かったです。キャラクターの目的がはっきりしているのが良いと思いました。先生にもお勧めします、未読ならいかがですか？</p>

<h2><font color="#08f">● ウェブページ作成について ●</font></h2>

<p>インターネットは普段良く見ていますが、ページを作ったことはありません。今度サークルのページをつくろうかと思っています。トップページとリンク集と、簡単な掲示板があれば良いかなと思っています。どこまでできるかわかりませんががんばります。</p>

<h2><font color="#08f">● 先生に一言 ●</font></h2>

<p>がんばって受講しますのでお手柔らかにお願いします。</p>

<h2><font color="#08f">● リンク ●</font></h2>

<p><a href="diary.html">飼育日記</a></p>
<p><a href="link.html">リンク集</a></p>

<h2><font color="#08f">● 縮小画像 ●</font></h2>

<p><a href="kuma.png" target="_blank"><img src="kuma-s.png"></a></p>

</td></tr>
</table>

<!-- 本文ここまで -->
</body>
</html>

具体的な作業手順は、以下を参考にしてください。

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

まずは jikosyokai.html に、CSSを読み込ませるための設定を追加しましょう。
ページ先頭近くにある <head>～</head> の範囲内に、以下のように <link> の記述を追加し、外部CSSファイルを読み込めるようにしましょう。（詳しくは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> の設定を探しましょう。おそらく以下のように設定されているかと思います（具体的な色などは、あなたの好みに合わせて別なものに置き換えてもらってＯＫです）。

<!-- まだ編集していない状態  -->
<body bgcolor="wheat" text="brown">

<body> タグに追加された bgcolor 属性が背景色で、text 属性が文字の色を表すということでした。これをCSSに置き換えます。

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

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

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

mystyle.css

/* 新規で body の設定を追加 */
body { background-color: wheat; color: brown; }

CSSではbackground-colorで背景色を、colorで文字色を設定できます。
上の例なら、背景色は wheat（小麦色）、文字の色は brown（焦げ茶色）です。

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

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

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

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

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

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

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

HTML側に <font> や <b> のような装飾系のタグでデザインを行っている場合は、バッサリ削ります。
見出しであることには違いないので、<h1> タグは残しておいてくださいね！

body { background-color: wheat; color: brown; }   /* ← さっきの設定 */
h1 { color:purple; font-weight:bold; }            /* ← ここを書き足す */

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

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

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

自己紹介

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

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

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

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

body { background-color: wheat; color: brown; }   /* ← このへんは        */
h1 { color:purple; font-weight:bold; }            /*    さっきまでの設定  */
.caution { color:yellowgreen; font-weight:bold; }       /* ← ここを書き足す */

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

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

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

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

/* ・・省略・・ */
/* .caution の設定に background-color:yellow; を追記します  */
.caution { color:yellowgreen; font-weight:bold; background-color:yellow; }

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

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

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

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

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

・・省略・・
<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に置き換えてみましょう。以下のようになります。

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

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

ずいぶんスッキリしましたね！

/* ・・省略・・  */
/* 一番下の行に追加します */
.layout { border: solid 1px gray;
          padding: 8px;
          background-color:white;
          width:800px;
          margin:20px auto;
          border-radius:10px;
          box-shadow: 10px 10px 10px #44444480; }

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

以上で修正完了です。

デザインが劇的に変化したわけではありませんが、最新技術を使ってHTMLをシンプルにできたのでヨシ！としましょう。

このようにして、必要に応じてHTMLの設定をCSSに置き換えていきましょう。
修正後のHTMLを眺めてみると、デザインに関する設定がほぼCSSに置き換わったことで、スッキリしたことを実感できるのではないでしょうか？

もし、この自己紹介ページと同じデザインのページをもう一枚作りたくなった場合も、複雑な設定は必要ありません。
新しいページでも、<head>～</head> の範囲内に <link rel="stylesheet" href="mystyle.css"> を追加すれば、mystyle.css が参照できるようになり、すぐに同じデザインにすることができます。これもCSSの便利なところでしょう。

上記のような改造を行った自己紹介ページ jikosyokai.html を、画像やCSSなど関連ファイルをすべて含めてZIP圧縮し、moodleに提出してください。

圧縮フォルダの名前は 学生番号 氏名 CSS.zip としてください。

細部のデザインは資料の例と多少違っていても構いません。独自にアレンジしてもらってＯＫです。

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

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

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

htdocs フォルダ直下の index.html もCSSに対応させてみましょう。

今回の課題と同様に mystyle.css を使う設定にすれば、jikosyokai.html と同じデザインを使い回せます。統一感のあるデザインを実現できますね！ もちろん好みで全く新しいCSSファイルを書き起こしてもＯＫです。

なおCSS側でデザインを行うので、いくつかの設定は不要になります。

• <body> で設定していた背景色などの設定は、CSSを使うので削除します。
• 本文全体を囲っていた <table> は <div> に置き換えます。

下で緑色に塗られている箇所は追加する部分、オレンジ色に塗られている箇所は、削除する部分を表しています。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>基礎実習の課題ページ</title>
<link rel="stylesheet" href="mystyle.css">
</head>
 
<body bgcolor="wheat" text="#444444">
<!-- 本文ここから -->

<table border="1" cellpadding="16" cellspacing="0" bgcolor="white" width="80%" align="center">
<tr><td>

<div class="layout">

<h1>コンピュータ基礎実習（上級）課題のページ</h1>

<p>ここにはコンピュータ基礎実習で作成した課題を掲載しておきます。</p>

<h2>課題</h2>

<p><a href="jikosyokai.html" target="_blank">自己紹介ページはこちら</a></p>
<p><a href="recipe.php" target="_blank">ゴブリン・シチューのレシピ</a></p>

<p><a href="gousei.pdn" target="_blank">合成写真</a><br>
<a href="button.pdn" target="_blank">ボタン画像</a></p>

<p><a href="trend/">私の○○サイト</a></p>

<p><a href="bbs/pppbbs.php" target="_blank">掲示板CGI</a><br>
<a href="calendar/" target="_blank">カレンダーCGI</a></p>

<p><a href="pukiwiki/" target="_blank">PukiWikiサイト</a></p>

<h2>リンク集</h2>

<p><a href="https://www.cc.kyoto-su.ac.jp/~shimizu/" target="_blank">基礎実習のページ</a> <a href="https://cclms.kyoto-su.ac.jp/" target="_blank">moodle</a></p>

<p><a href="https://www.kyoto-su.ac.jp/entrance/index-ksu.html" target="_blank">学内TOP</a></p>

</div>

</td></tr>
</table>

<!-- 本文ここまで -->
</body>
</html>

戻る