CSS001

Cascading Style Sheet  

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

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

  1. 外部ファイルとして***.cssを作成して、htmlファイルのヘッダー内で読み込む。(通常の方法)

    <head> ・・・・・

    どんなときもwifi

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

    </head>

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

CSS記述の仕方

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

記述例

h1 {
  color: red;
}

  1. セレクタ h1
  2. プロパティ color
  3. 値 red

 

セレクタ

  1. HTML要素のセレクタ
  2. ID要素のセレクタ
         
    #main { font-size: 36px; }

  3. Class要素のセレクタ

    .largefont { font-size:12px; }

  4. 複数要素のセレクタ(カンマで区切って列挙)
    #main, .test { border: 1px solod #CCC }
  5. * 全要素

       * { border : 0; }

テキストスタイル

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

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

背景スタイル

  1. background-color:red;
  2. background-image:url(‘bgimage.ping’)
  3. backgroung-repeat: no-repeat;
  4. background-position:top right;
  5. 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つ 上 右左 下
4つ 上 右 下 左 (時計回りと覚える)

要素の回り込み 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; }

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

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

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