第3回東放学園2012後期 cssの基礎
- 2. 代表曲ページをつくる
トップページと代表曲ページをリンクさせる
Friday, October 12, 12
- 4. CSSとは
Cascading Style Sheetsの略
Webページのスタイルをつくるための言語
例：h1 { font-size: 15px }
HTMLは文書に意味を、CSSは文書にデザインを
Friday, October 12, 12
- 6. CSSの使用例
例えば以下のようなHTMLページを
index.html lion.html elephant.html
ZOOROPPA ZOOROPPA ZOOROPPA
ライオン ぞう
Welcome to ZOOROPPA
ZOOROPPA とは
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□
動物
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ
□□□□□□□□□□□□□□□□□□□□□
・ぞう ・ライオン
・ライオン
・ぞう
Friday, October 12, 12
- 7. CSSの使用例
赤に変更する
index.html lion.html elephant.html
ZOOROPPA ZOOROPPA ZOOROPPA
ライオン ぞう
Welcome to ZOOROPPA
ZOOROPPA とは
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□
動物
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ
□□□□□□□□□□□□□□□□□□□□□
・ぞう ・ライオン
・ライオン
・ぞう
h1タグの部分が赤に
style.css
なった
h1 { h1 {
color:#ff0000;
color:#ff0000; }
}
Friday, October 12, 12
- 8. 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, October 12, 12
- 9. CSSの書き方
実際にやってみて覚えましょう
Friday, October 12, 12
- 11. CSSを作成し保存する
新規にファイルを作成し、style.cssという名前
でhtmlと同じフォルダに保存する
style.css htmlが入っているフォルダ
Friday, October 12, 12
- 13. まずはh1タグの
文字色を変更する
Friday, October 12, 12
- 14. CSSの基本的な書き方
このように記述します
「h1は文字色を赤にしなさい」という意味です。
h1 {
! color :#ff0000;
}
Friday, October 12, 12
- 15. 各部位の名称
この名称は覚えましょう！
HTMLのどの部分に どのような属性を 具体的な設定を
適用するか決める 変更するか決める 決める
セレクタ プロパティ 値
h1 {
CSSルールセット ! color :#ff0000;
}
コロン セミコロン
中括弧で囲む
プロパティと値の間にはコロン
を、行の最後にはセミコロンを
入れる
Friday, October 12, 12
- 17. HTMLとCSSをリンクさせる
HTMLを保存しブラウザで確認しましょう。
<html>
! <head>
! ! <title></title>
<meta name=”description” content=”ページの概要”>
<link rel="stylesheet" type="text/css" href="style.css">
! </head>
CSSファイル名
! <body>
! ! ページ内容
! </body> ヘッダの中にこのタグを入れると
</html> 指定したCSSファイルとリンクする
Friday, October 12, 12
- 18. 他のタグの文字色を
変更してみましょう
Friday, October 12, 12
- 20. 背景を変更する
background(背景)設定のいろいろ
背景色を変更する
background: #9999ff;
背景画像を変更する
background: #9999ff url(“back.jpg”)
リピート方法を変更する
background: #9999ff url(“back.jpg”) repeat-x;
位置を変更する
background: #9999ff url(“back.jpg”) repeat-x top center;
Friday, October 12, 12
- 22. 他のHTMLにもリンクを記述する
各HTMLにリンクを記述することでCSSが反映される
<head>
<link ref=”stylesheet” href=”style.css”>
! </head>
b.html c.html
style.css
Friday, October 12, 12
- 24. プロパティの種類
今日覚えるプロパティ
font-size
font-weight
background
color
border
margin
padding
Friday, October 12, 12
- 25. プロパティの種類
font-size（文字の大きさ）
文字の大きさの指定、ピクセルで指定や％でも指定できる
font-size: 12px
font-size: 90%
font-weight (文字の太さ)
ノーマルとボールドを覚えておけば大丈夫
font-weight: normal
font-weight: bold
Friday, October 12, 12
- 26. プロパティの種類
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, October 12, 12
- 27. プロパティの種類
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, October 12, 12
