Cssの書き方入門編
- 2. CSSとは
CSSはページをデザインするために使う
例えば以下のようなHTMLページを
index.html lion.html elephant.html
ZOOROPPA ZOOROPPA ZOOROPPA
ライオン ぞう
Welcome to ZOOROPPA
ZOOROPPA とは
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□
動物
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ
□□□□□□□□□□□□□□□□□□□□□
・ぞう ・ライオン
・ライオン
・ぞう
Friday, May 25, 12
- 3. CSSとは
大見出し(H1)部分の文字色を赤にできる
文字の色を変える
index.html lion.html elephant.html
ZOOROPPA ZOOROPPA ZOOROPPA
ライオン ぞう
Welcome to ZOOROPPA
ZOOROPPA とは
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□
動物
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ
□□□□□□□□□□□□□□□□□□□□□
・ぞう ・ライオン
・ライオン
・ぞう
h1タグの部分が赤に
style.css
なった
h1 { h1 {
color:#ff0000;
color:#ff0000; }
}
Friday, May 25, 12
- 4. CSSとは
背景色も変えられる
背景の色が変わった
index.html lion.html elephant.html
ZOOROPPA ZOOROPPA ZOOROPPA
ライオン ぞう
Welcome to ZOOROPPA
ZOOROPPA とは
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□
動物
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ
□□□□□□□□□□□□□□□□□□□□□
・ぞう ・ライオン
・ライオン
・ぞう
h1タグの部分が赤に
style.css
なった
h1 { h1 {
color:#ff0000;
color:#ff0000; }
body {
} }
background:#9999ff;
Friday, May 25, 12
- 5. CSSの基本
CSSの基本的な書き方と名称
Friday, May 25, 12
- 6. CSSの基本的な書き方
例えば<h1></h1>に対するCSS
文字のサイズは14ピクセルにする
セレクタ プロパティ 値
コロン セミコロン
h1 {
CSSルールセット ! font-size:14px;
}
中括弧で囲む
プロパティと値の間にはコロン
を、行の最後にはセミコロンを
入れる
Friday, May 25, 12
- 7. CSSの基本的な書き方
例えば<h1></h1>に対するCSS
プロパティは複数指定可能
複数OK
h1 {
! font-size:14px;
CSSルールセット ! font-weight:normal;
! color:#ff0000;
}
Friday, May 25, 12
- 9. HTMLとCSSをリンクさせる
HTMLに以下を記述
<html>
! <head>
! ! <title></title>
<meta name=”description” content=”ページの概要”>
<link ref=”stylesheet” href=”style.css”>
! </head>
CSSファイル名
! <body>
! ! ページ内容
! </body> ヘッダの中にこのタグを入れると
</html> 指定したCSSファイルとリンクする
Friday, May 25, 12
- 11. プロパティの種類
今日覚えるプロパティ
font-size
font-weight
background
color
border
margin
padding
Friday, May 25, 12
- 12. プロパティの種類
font-size（文字の大きさ）
文字の大きさの指定、ピクセルで指定や％でも指定できる
font-size: 12px
font-size: 90%
font-weight (文字の太さ)
ノーマルとボールドを覚えておけば大丈夫
font-weight: normal
font-weight: bold
Friday, May 25, 12
- 13. プロパティの種類
background(背景)
文字やページの背景の色を変えたり、画像を挿入できる
background: #9999ff;
background: #9999ff url(“back.jpg”)
background: #9999ff url(“back.jpg”) repeat-x;
background: #9999ff url(“back.jpg”) repeat-x top center;
color (文字色)
色の指定ができる
color: #ff0000
color: red
Friday, May 25, 12
- 14. プロパティの種類
border(枠線)
文字やページの背景の色を変えたり、画像を挿入できる
background: #9999ff;
background: #9999ff url(“back.jpg”)
background: #9999ff url(“back.jpg”) repeat-x;
background: #9999ff url(“back.jpg”) repeat-x top center;
Friday, May 25, 12
