北海道工業大学電子計算機研究部ネットワークチーム　前期講座資料06

1. CSS 基礎Ⅰ

2.  スライド中のフォントについて
 CSS の目的
 CSS の利点
 CSS の書き方
 CSS のルール
 CSS の使い方
 class と id の違い
 class, id を使った指定
 CSS Selectors
 課題

3.  前回のアンケートで、「紛らわしいフォントは使わない
ほうが良いと思う」という意見を頂いた。
 これを踏まえ、今回からスライド中でサンプルコードを
記載する際のフォントは米 Adobe 社が公開している
Source Code Pro というフォントを採用する。
 間違いやすい文字をここに列挙する
 I … (アルファベット大文字のアイ)
 l … (アルファベット小文字のエル)
 1 … (数字の一)
 0 … (数字の零)
 o … (アルファベット小文字のオー)
 O … (アルファベット大文字のオー)

4.  HTML (文書構造) にスタイル (見栄え) を定義する
 似たようなスタイルを再利用する
 異なるスタイルは再定義 (上書き) する

5. 昔は HTML だけで見栄えも定義していた
HTML 文書の構造が煩雑になる
 CSS を使うと…
 HTML をシンプルに保てる
 HTML はそのままで、デザインだけを変更できる
 似たようなデザインを再利用できる
欠点

6.  head の中に style タグで書く
or
 head の中で link タグを使って読み込む
CSS の利点を活かすには、外部ファイルで定義して、
link タグで読み込む方が良い。
<link rel="stylesheet" href="style.css">

7. body {
background-color: #eeeeee;
}
h1 {
color: #ff0000;
font-size: 28px;
}
 まずは、 style タグを使って HTML 文書の中に書いてみる
 次に、外部ファイルに書いて link タグを使って読み込んでみる
 外部ファイルで書く際のファイルの拡張子は .css にする

8. @charset "utf-8";
body {
background-color: #eeeeee;
}
h1 {
color: #ff0000;
font-size: 28px;
}
文字コードの指定
カラーコード
px を用いたサイズの指定
h1 要素に対するスタイルの定義
セミコロンで閉じる
コロンで区切る

9. I. HTML で class または id を指定する (基本的に
class)
II. CSS で class と id 、要素の親子関係を使ってスタ
イルを適用する要素を指定する
III. スタイルを定義する

10.  id, class は HTML 要素に対して属性として指定する
ことが出来る
<h1 id="title" class="headline">
見出し
</h1>
 id は HTML 文書の中で同じ名前が一つだけしか存在
してはならない
 class は同じ名前が複数存在しても良い

11.  class
.headline {
font-size: 26px;
}
 id
#title {
text-decoration: underline;
}

12.  CSS で要素を選択する方法で、下記のようなものがある
 要素名: 指定した要素を選択する (要素型セレクタ)
 .class名: 指定した class を持つ要素を選択する (class セレクタ)
 #id名: 指定した id を持つ要素を選択する (id セレクタ)
 要素A 要素B: 要素 A の子孫要素になっている要素 B を選択す
る (子孫セレクタ)
 要素A > 要素B: 要素 A の子要素になっている要素 B を選択す
る (子セレクタ)
他にも様々なセレクタがある

13.  講座アンケート
 別途指定