ASICS FAMILY CLUB  アシックスファミリークラブ

チケットぴあ
ポコ・ア・ポコ パソコン教室は・・・ホームページを作ろう
ホームページを作るにはCSSを勉強しなければいけない。
解りやすく、CSSの具体例で説明します。

CSSとは?


CSSの世界
1.	基本的定義:「セレクタ」「属性」「値」を組み合わせて定義していく
(ア) セレクタ{属性:値}
 @ 例   h1{background-color:#0000ff;}
   入力の過程で、改行、半角スペース、タブはブラウザで解釈される際に無視
   されます。
   ただし、セレクタ名、属性名、値の途中で、改行、半角スペース、タブを入
   れてはいけません。
(イ) 複数の属性をまとめて定義する方法
 @ セレクタ{属性1:値1;属性2:値2}
   例 div	{
        background-color:#0000ff;
        color:#696969
        }
 A セレクタのグループ化
   セレクタ1,セレクタ2{属性:値}
   例 h1,h2 {
        color:#0000ff;
         }
 B 子孫セレクタ
   セレクタ,セレクタ{属性:値}
   要素名をスペースで区切って複数並べると、ある特定の要素の子孫にあたる要
   素にスタイルを適用することができる。
   例えば、<a>の要素に含まれる<img>の枠線を赤色にする場合、
   例 a img{
         border-color:red
        }
 C 子供セレクタ
   セレクタ>セレクタ{属性:値}
   選択対象の要素がある別の要素の子供であるとき。
   例えば、<body>要素の直接の子供である<p>要素だけ行間を1.8倍にする時、
   例 body > p {
           line-height:1.8cm
           }
 D コメントの書き方
    /* コメントになる部分 */
   例 h1{
      color:#0000ff/* 文字色を青にする */
      }
(ウ) セレクタの種類
 @ 基本セレクタ
   <h1>〜</h1>や<p>〜</p>などに設定する。
   例 div {background-color : #ADFF2F}
 A IDセレクタ:ID属性を設定した要素に対してスタイルシートを設定します。
   HTML中で利用できるのは一回のみ。
   #ID名{属性:値}
   基本セレクタ名#ID名{属性:値}
   例 #footer {
          font-color:#dcdcdc
          }
 
 B CLASSセレクタ: CLASS属性を設定した要素に対してスタイルシートを設定します。
   CSSのセレクタのの先頭に「.」を付けて定義します。
   .CLASS名{属性:値}
   基本セレクタ名.CLASS名{属性:値}
   例 .honbun {
           font-color:#dcdcdc
            }
    <body>
      <div class=”honbun”>
       このホームページは・・・・
      </ div>
 C 擬似クラス:文章中の性質とは関係ない性質に対して設定するクラス。
   擬似クラスは「:」にあらかじめ決められた予約語を組み合わせて定義します。
   主に<a>(アンカー)要素の色を変化させるために利用される。



iriver eストア(E300)

Copyright 20010 - 2020 ポコ・ア・ポコ株式会社