Upload
touhou
View
223
Download
4
Embed Size (px)
Citation preview
前回の復習
Friday, October 12, 12
代表曲ページをつくるトップページと代表曲ページをリンクさせる
Friday, October 12, 12
CSSの書き方(入門編)カスケーディングスタイルシート(CSS)
Friday, October 12, 12
CSSとはCascading Style Sheetsの略
Webページのスタイルをつくるための言語例:h1 { font-size: 15px }
HTMLは文書に意味を、CSSは文書にデザインを
Friday, October 12, 12
例えば
Friday, October 12, 12
CSSの使用例例えば以下のようなHTMLページを
ZOOROPPA
ZOOROPPA とは□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
動物
・ライオン・ぞう
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
Welcome to ZOOROPPA
ZOOROPPA
ライオンの習性
ライオン
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
・トップ・ぞう
ZOOROPPA
ぞうの習性
ぞう
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
・トップ・ライオン
index.html lion.html elephant.html
Friday, October 12, 12
CSSの使用例赤に変更する
ZOOROPPA
ZOOROPPA とは□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
動物
・ライオン・ぞう
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
Welcome to ZOOROPPA
ZOOROPPA
ライオンの習性
ライオン
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
・トップ・ぞう
ZOOROPPA
ぞうの習性
ぞう
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
・トップ・ライオン
index.html lion.html elephant.html
style.cssh1 { color:#ff0000;}
h1タグの部分が赤になったh1 {
color:#ff0000;}
Friday, October 12, 12
CSSの使用例背景色も変えられる
背景の色が変わった
h1タグの部分が赤になったh1 {
color:#ff0000;}
ZOOROPPA
ZOOROPPA とは□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
動物
・ライオン・ぞう
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
Welcome to ZOOROPPA
ZOOROPPA
ライオンの習性
ライオン
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
・トップ・ぞう
ZOOROPPA
ぞうの習性
ぞう
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
・トップ・ライオン
index.html lion.html elephant.html
style.cssh1 { color:#ff0000;}body { background:#9999ff;}
Friday, October 12, 12
CSSの書き方実際にやってみて覚えましょう
Friday, October 12, 12
準備
Friday, October 12, 12
CSSを作成し保存する新規にファイルを作成し、style.cssという名前でhtmlと同じフォルダに保存する
style.css htmlが入っているフォルダ
Friday, October 12, 12
タグごとに文字色を変更する
Friday, October 12, 12
まずはh1タグの文字色を変更する
Friday, October 12, 12
CSSの基本的な書き方このように記述します
「h1は文字色を赤にしなさい」という意味です。
h1 {! color :#ff0000;}
Friday, October 12, 12
各部位の名称この名称は覚えましょう!
CSSルールセットh1 {! color :#ff0000;}
セレクタ プロパティ 値
中括弧で囲むプロパティと値の間にはコロンを、行の最後にはセミコロンを入れる
セミコロンコロン
HTMLのどの部分に適用するか決める
どのような属性を変更するか決める
具体的な設定を決める
Friday, October 12, 12
HTMLとCSSをリンクさせる
Friday, October 12, 12
HTMLとCSSをリンクさせるHTMLを保存しブラウザで確認しましょう。
<html>! <head>! ! <title></title> <meta name=”description” content=”ページの概要”>
<link rel="stylesheet" type="text/css" href="style.css">! </head>! <body>! ! ページ内容! </body></html>
ヘッダの中にこのタグを入れると指定したCSSファイルとリンクする
CSSファイル名
Friday, October 12, 12
他のタグの文字色を変更してみましょう
Friday, October 12, 12
背景を変更する
Friday, October 12, 12
背景を変更する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
他のページにも反映させる
Friday, October 12, 12
他のHTMLにもリンクを記述する各HTMLにリンクを記述することでCSSが反映される <head>
<link ref=”stylesheet” href=”style.css”>! </head>
style.cssb.html c.html
Friday, October 12, 12
プロパティ
Friday, October 12, 12
プロパティの種類今日覚えるプロパティ
font-sizefont-weightbackgroundcolorbordermarginpadding
Friday, October 12, 12
プロパティの種類font-size(文字の大きさ)
文字の大きさの指定、ピクセルで指定や%でも指定できるfont-size: 12pxfont-size: 90%
font-weight (文字の太さ)ノーマルとボールドを覚えておけば大丈夫font-weight: normalfont-weight: bold
Friday, October 12, 12
プロパティの種類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: #ff0000color: red
Friday, October 12, 12
プロパティの種類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