Cascading Style Sheet

CSSを記述できる場所は３種類ある。

文章と構造のHTMLとデザインのCSSは別なファイルに分けるのが現在は常識。

外部ファイルとして***.cssを作成して、htmlファイルのヘッダー内で読み込む。（通常の方法）
<head> ・・・・・

<link rel=”stylesheet” hredf=”style.css”>

</head>
styleタグを<head></head>内に記述する方法(非推奨)
<head>・・・・
<style>
h1 {color:red;}
</style>
</head>
HTML要素にCSSを記述する方法（非推奨）
<body>
<p style=”color:red”>赤い文字です</p>
</body>

CSS記述の仕方

コメントの書き方
CSSファイルとヘッダー内<style></style>は
/* ←ここから・・・・・・ここまでコメント→ */

記述例

h1 {
color: red;
}

セレクタ h1
プロパティ color
値 red

セレクタ

HTML要素のセレクタ
ID要素のセレクタ

#main { font-size: 36px; }
Class要素のセレクタ
.largefont { font-size:12px; }
複数要素のセレクタ(カンマで区切って列挙)
#main, .test { border: 1px solod #CCC }
＊　全要素

* { border : 0; }

テキストスタイル

color green, #RGB
font-size :10px, 120%
font-weight normal,bold
text-align left,center.right
line-hight: 30px, 150%, 1.5
text-decoration:underline,line-through
font-style:italic

text-decoration: underline line-through
スペースで区切ってプロパティの値を複数指定できる

背景スタイル

background-color:red;
background-image:url(‘bgimage.ping’)
backgroung-repeat: no-repeat;
background-position:top right;
background-atattiment: fixed;

スペース区切りで並べることも可能

background: url(’bgimage.ping’) no-repeat top right;

ブロック要素スタイル

#box1 {width:80%px; height:50px; background-color:red; }

This is box model

境界のスタイル border

#box1 {

border-color:green;
border-width:5px;
border-style:solod; }

スペース区切り列挙も可

#box1 { border:green 5px solid; }

余白のスタイル　padding, margine

#box1 {

padding:40px;
margin:40px;
}

値の指定個数と指定のされ方

1つ　上　下　左　右
2つ　上下　右左
3つ　上　右左　下
４つ　上　右　下　左　（時計回りと覚える）

要素の回り込み float,clear

#box1 { float:left; }

実践CSSレイアウト

最低要素で2カラムレイアウト

ヘッダー

メイン｜サイドバー

フッター

<body>
<header>h1タイトルと説明、背景画像</header>
<main>メインコンテンツエリア</main>
<sidebar>サイドバー</sidebar>
<footer>フッター</footer>
</body>

header { width:100%; background :url(’bgimage.ping’) no-repeat }
main { float:left; width:100%-150px }
sidebar { float:right; width:150px; }
footer { clear:right; }

ネガティブマージンを使ってリキッドレイアウト２カラム

こんなに簡単に右サイドバー固定幅＆その他ウィンドウサイズ可変幅のページが出来ます

ヘッダー
メインエリア｜右サイドバー
フッター