第3回東放学園2012後期 cssの基礎

前回の復習

Friday, October 12, 12

代表曲ページをつくるトップページと代表曲ページをリンクさせる


CSSの書き方(入門編)カスケーディングスタイルシート（CSS)


CSSとはCascading Style Sheetsの略

Webページのスタイルをつくるための言語例：h1 { font-size: 15px }

HTMLは文書に意味を、CSSは文書にデザインを


例えば


CSSの使用例例えば以下のようなHTMLページを

ZOOROPPA

ZOOROPPA とは□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

動物

・ライオン・ぞう

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

Welcome to ZOOROPPA

ZOOROPPA

ライオンの習性

ライオン

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

・トップ・ぞう

ZOOROPPA

ぞうの習性

ぞう

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

・トップ・ライオン

index.html lion.html elephant.html


CSSの使用例赤に変更する

ZOOROPPA

ZOOROPPA とは□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

動物


□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

Welcome to ZOOROPPA

ZOOROPPA


ライオン

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


ZOOROPPA

ぞうの習性

ぞう

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□



style.cssh1 { color:#ff0000;}

h1タグの部分が赤になったh1 {

color:#ff0000;}


CSSの使用例背景色も変えられる

背景の色が変わった

h1タグの部分が赤になったh1 {

color:#ff0000;}

ZOOROPPA

ZOOROPPA とは□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

動物


□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

Welcome to ZOOROPPA

ZOOROPPA


ライオン

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


ZOOROPPA

ぞうの習性

ぞう

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□



style.cssh1 { color:#ff0000;}body { background:#9999ff;}


CSSの書き方実際にやってみて覚えましょう


準備


CSSを作成し保存する新規にファイルを作成し、style.cssという名前でhtmlと同じフォルダに保存する

style.css htmlが入っているフォルダ


タグごとに文字色を変更する


まずはh1タグの文字色を変更する


CSSの基本的な書き方このように記述します

「h1は文字色を赤にしなさい」という意味です。

h1 {! color :#ff0000;}


各部位の名称この名称は覚えましょう！

CSSルールセットh1 {! color :#ff0000;}

セレクタプロパティ値

中括弧で囲むプロパティと値の間にはコロンを、行の最後にはセミコロンを入れる

セミコロンコロン

HTMLのどの部分に適用するか決める

どのような属性を変更するか決める

具体的な設定を決める


HTMLとCSSをリンクさせる


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ファイル名


他のタグの文字色を変更してみましょう


背景を変更する


背景を変更するbackground(背景)設定のいろいろ

背景色を変更するbackground: #9999ff;

背景画像を変更するbackground: #9999ff url(“back.jpg”)リピート方法を変更するbackground: #9999ff url(“back.jpg”) repeat-x;位置を変更するbackground: #9999ff url(“back.jpg”) repeat-x top center;


他のページにも反映させる


他のHTMLにもリンクを記述する各HTMLにリンクを記述することでCSSが反映される　 <head>

<link ref=”stylesheet” href=”style.css”>! </head>

style.cssb.html c.html


プロパティ


プロパティの種類今日覚えるプロパティ

font-sizefont-weightbackgroundcolorbordermarginpadding


プロパティの種類font-size（文字の大きさ）

文字の大きさの指定、ピクセルで指定や％でも指定できるfont-size: 12pxfont-size: 90%

font-weight (文字の太さ)ノーマルとボールドを覚えておけば大丈夫font-weight: normalfont-weight: bold


プロパティの種類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


プロパティの種類border(枠線)

文字やページの背景の色を変えたり、画像を挿入できるbackground: #9999ff;background: #9999ff url(“back.jpg”)background: #9999ff url(“back.jpg”) repeat-x;background: #9999ff url(“back.jpg”) repeat-x top center;


Documents

第3回東放学園2012後期 cssの基礎