Css
- 1. 1
Copyright (c) 株式会社HEART QUAKE All rights reserved .
CSS
CSSは、ウェブサイトのスタイル（デザイン）を定義している
技術の１つです。
CSSを⽤用いることでウェブサイトの⾒見見栄え・スタイルを効率率率的に
作成することが出来ます。
- 2. 2
Copyright (c) 株式会社HEART QUAKE All rights reserved .
CSSとは
l CSS
- ウェブページのスタイル(≒デザイン)を定義する⾔言語。
- Cascading Style Sheetsの略略
ü Cascadingは「階段状の滝のような」「連鎖的に伝わ
る」の意味
- HTMLがウェブページ内の各要素の意味や情報構造を定義
するのに対して、CSSではそれらをどのように装飾するか
を定義します
HTML CSS スタイルを別に定義
- 3. 3
Copyright (c) 株式会社HEART QUAKE All rights reserved .
CSSの書き⽅方 (1/2)
l CSSの基本書式
- CSSでスタイルを指定するには、
どの部分に対して ･･･ セレクタ
どのスタイルを ･･･ プロパティ
どのように ･･･ 値
適⽤用するかを指定します。
- 右下の例例では、
ü pタグ(パラグラフの略略) が セレクタ
ü color , font-size が プロパティ
ü blue , 30px(ピクセル) が値 p {
color: blue;
font-size: 30px;
}
- 4. 4
Copyright (c) 株式会社HEART QUAKE All rights reserved .
CSSの書き⽅方 (2/2)
l CSSの基本書式
- CSSの記述⽅方法は2パターンあります。
ü 主流流はパターン2です。
- パターン1 : HTMLヘッダ中で直接指定を⾏行行う⽅方法。
head
style type=text/css
p {
color: red;
}
/style
/head
- パターン2 : CSSファイルを別途作成し、HTMLヘッダ内
で読み込ませる⽅方法。
head
link rel=stylesheet href=style.css
/head
- 5. 5
Copyright (c) 株式会社HEART QUAKE All rights reserved .
CSS実践(1/2)
l やってみよう！
- pタグのスタイルが適⽤用されるのがわかります。
html
head
meta charset=”utf-8”
titleウェブページのタイトル/title
style type=”text/css”
p {
color: blue;
font-size: 30px;
}
/style
/head
body
pウェブページの見出し/p
ウェブページを作成しました！
/body
/html
ブラウザで表⽰示
- 6. 6
Copyright (c) 株式会社HEART QUAKE All rights reserved .
CSS実践(2/2)
l 外部のCSSファイルを指定してみよう！
- スタイルだけを記述したファイルを作成しよう
html
head
meta charset=”utf-8”
titleウェブページのタイトル/title
link rel=”stylesheet” href=”style.css”
/head
body
pウェブページの見出し/p
ウェブページを作成しました！
/body
/html
p {
color: blue;
font-size: 30px;
}
このhtmlファイルと
同じフォルダにある
style.cssを適⽤用するよ
これだけ書いたファイルを
sytle.cssとして
htmlファイルと同じフォルダに
名前をつけて保存！
- 7. 7
h2 class=”blue_text” id=”blue_title”見出しだよ/h2
p class=”blue_text”段落だよ/p
Copyright (c) 株式会社HEART QUAKE All rights reserved .
セレクタの指定(1/2)
l CSSの基本書式 (3)
- セレクタとしてよく使うid と classの使い⽅方について理理
解しておきましょう。
- class セレクタは「.」をつけます
- id セレクタには「#」をつけます
- pやh2などの要素セレクタには
何もつけません
.blue_text {
color: blue;
}
#blue_title{
font-size: 30px;
}
- 8. 8
Copyright (c) 株式会社HEART QUAKE All rights reserved .
セレクタの指定(2/2)
l id と class について
- idはページ内にひとつしか存在しない要素に指定します
ü 1つのページ内に同じidを持つ要素が無い
ü ⼈人間で⾔言うと、⼤大学⽣生の学籍番号や、会社員の社員番
号のようなもので同じidを持つ⼈人はいない。
- classはページ内に複数存在する要素に指定します
ü ひとつの要素に複数のクラスを指定することも
できます。
ü ⼈人間で⾔言うと、チームのようなものでそのチーム全体
のスタイルを定義します。
h2 class=”blue_text” id=”blue_title”見出しだよ/h2
p class=”blue_text”段落だよ/p
