01 CSSとは

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）

HTML文書の見た目の設定

書式

セレクタ{プロパティ名:値;}

02 はじめてのCSS

どこに書くか

  1. headタグの中のstyleタグの中に記述
  2. style属性として直接記述
  3. 外部ファイルとして作成しリンクさせる
  <html>
    <head>
    </head>
    <body>
      <p>初めてのCSS</p>      
    </body>
  </html>
        
  1.headタグの中のstyleタグの中に記述
    <head>
    <style>
      p{color:green;}
    </style>
    </head>
    
  2.style属性として直接記述
    <p style="color:green;">初めてのCSS</p>
   
  3.外部ファイルとして作成しリンクさせる
    style.cssファイルを作成し
    p{color:green;}
    と記述
    HTMLのheadタグ内に
      <link rel="stylesheet" href="style.css"> 
    と記述

ソースファイルはここからダウンロード

03 セレクタとプロパティを理解する

  1. HTML要素
  2. ID
  3. クラス
  4. 全称セレクタ
  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>セレクタとプロパティ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>初めてのCSS</h1>
      <p id="main">1行目</p>
      <p class="spec">2行目</p>
      <p class="spec">3行目</p>
  </body>
  </html>
        
  *{ color:gray;}
  
  h1{ color:maroon;}
  
  p{color:green;}
  
  #main{ color:orange;}
  
  .spec{ color:skyblue;}

04 セレクタの書き方いろいろ

  1. a,b
  2. a b
  3. a > b
  4. a + b
  5. ab
  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>セレクタの書き方いろいろ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <h1>セレクタの書き方いろいろ</h1>
  <div>
    <p>pのみ</p>
    <p class="attention">クラス付きp</p>
    <p><span class="attention">pの中のクラス付きspan</span></p>
    <span>spanのみ</span>
  </div> 
  </body>
  </html>
        
  h1,p{ color:navy;}
  /* 同じスタイルを適用 */
  
  div span{ color:orange;}
  /* divの下（内側）の階層にあるspan */
  
  div > span{ color:violet;}
  /* divの直下にあるspan */
  
  p + p{ color:skyblue;}
  /* pの次にあるp */
  
  p.attention{ color:red;}
    /* attentionクラスの付いているp */

05 属性セレクタ

属性の有無や特定の値を持つ属性でスタイルを適用

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>属性セレクタ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>
    <a href="http://google.com">google</a>
    </p>
    <p>
    <a href="http://yahoo.co.jp" title="yahoo" 
    class="link search">Yahoo</a>
    </p>
  </body>
  </html>
     
  a[title]{ color:lime;}
      /* title属性を持つa */
       
  a[href="http://google.com"]{ color: orange;}
  /* href属性が"http://google.com"であるa */

  a[class~="search"]{ color:skyblue;}
       /* class属性にsearchが含まれているa */

06 擬似クラス

要素が特定の状態にある場合

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>擬似クラス</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <ul>
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ul>
    <p><a href="http://www.msn.com">MSN</a></p>
    <p><a href="http://www.disney.co.jp/">Disney</a></p>
  </body>
  </html>

     
  ul li:first-child{ color:violet;}  
      /* 最初のul要素にだけ適用 */
       
  a:link{ color:lime;}
  /* 未訪問のリンク */

  a:visited{ color:lightgray;}
  /* 訪問済みのリンク */
  
  a:hover{ color:red;}/* マウスが乗ったとき */
  
  a:active{ color:yellow;}
       /* リンクをクリックしたとき */

07 擬似要素

ある要素の一部を指定するとき

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>擬似要素</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>親譲りの無鉄砲で小供の時から損ばかりしている。
  小学校に居る時分学校の二階から飛び降りて一週間ほど
  腰を抜かした事がある。なぜそんな無闇をしたと聞く人が
  あるかも知れぬ。別段深い理由でもない。新築の二階から
  首を出していたら、同級生の一人が冗談に、いくら威張っ
  ても、そこから飛び降りる事は出来まい。弱虫やーい。と
  囃したからである。小使に負ぶさって帰って来た時、おや
  じが大きな眼をして二階ぐらいから飛び降りて腰を抜かす
  奴があるかと云ったから、この次は抜かさずに飛んで見せ
  ますと答えた。（青空文庫より）</p>
</body>
</html>

     
  p:first-line{ color:green;}
      /* 最初の1行にだけ適用 */
       
  p:first-letter{font-size:2em;}
      /* 最初の1文字にだけ適用 */
       
  p:before{
    content:">>>";
    }
    
  p:after{
    content:"";
    }

08 セレクタの詳細度

セレクタの優先度を表す

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>セレクタの詳細度</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <a href="http://www.google.com" id="site" 
    class="link search">Google</a>
  </body>
  </html>

     
  要素のみ 0, 0, 0, 1
  a{color: navy;}
  
  属性を持った方が優先 0, 0, 1. 0 
  a.link{color:red;}
  
  同じ詳細度なら後で書いた方が優先
  a.search{ ccolor:}
  
  id持つ方が優先 0, 1, 0, 0
  a#site{ color:pink;}
  
  直接style属性を持つ物が最優先 1, 0, 0, 0
  style="green"

09 プロパティの値（単位）

大きさの指定

色の指定

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>プロパティの値（単位）</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Title</h1>
    <h2>Sub Title</h2>
  </body>
  </html>
     
  body{ font-size:16px;}
  
  h1{ font-size:2em;}
  
  h2{ font-size:150%;}
 
/* 下記いずれも同じ結果となる */
  h1{ color:blue;}
  h1{ color:#00f;}
  h1{ color:#0000ff;}
  h1{ color:rgb(0, 0, 255);}
  h1{ color:rgb(0%, 0%, 100%);}

10 ボックスモデルを理解する

ある要素がブラウザで表示された時に こういった領域ができる
ボックスモデル概念図

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ボックスモデル</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div>Elemen1</div>  
  </body>
  </html>
     
        div{
          background: lightgrey;
          width:100px;
          height:100px;
        }
        /* %で指定すると */
        div{
           width:50%;
           heighit:50%;
           }
        /* しかしこのままでは思った通りに動かない
            heightに関しては親要素の高さを明示的に示す必要  
         */
        html, body{
          height: 100%;
          }

11 borderで境界線のスタイルを設定する

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>境界線</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div>Elemen1</div>  
  </body>
  </html>
     
    div{
       background: lightgrey;
       border-color:red;
       border-width:3px;
       border-style:dotted;
       }

    /* あるいはボーダーに関するプロパティをまとめて設定も可 */
    div{
       border: 3px dotted red;
       }

    /* 部分的な設定 */
    div{
       border-bottom: 3px dotted red;
       }

12 paddingで余白を調整

パディングの設定にはいくつかの方法がある

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>padding</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>親譲りの無鉄砲で小供の時から損ばかりしている。
  小学校に居る時分学校の二階から飛び降りて一週間ほど
  腰を抜かした事がある。なぜそんな無闇をしたと聞く人が
  あるかも知れぬ。別段深い理由でもない。新築の二階から
  首を出していたら、同級生の一人が冗談に、いくら威張っ
  ても、そこから飛び降りる事は出来まい。弱虫やーい。と
  囃したからである。小使に負ぶさって帰って来た時、おや
  じが大きな眼をして二階ぐらいから飛び降りて腰を抜かす
  奴があるかと云ったから、この次は抜かさずに飛んで見せ
  ますと答えた。（青空文庫より）</div>
</body>
</html>
     
  /* それぞれに設定する場合 */
  div{ padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  }
  
/*値が1つの場合上下左右同じ値になる*/
padding:10px;}

/* 値が2つの場合 上下 / 左右の指定となる */  
  div{ padding:10px 30px;}

/* 値が3つの場合 上 / 左右/ 下の指定となる */    
  div{ padding:10px 20px 30px;}

/* 値が4つの場合上から時計回りの指定になる
  上　/　右　/　下　/　左*/  
  div{ padding:10px 20px 30px 40px;}

13 marginとmarginの相殺

marginの指定方法はpaddingと同じ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>margin</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box1">
  親譲りの無鉄砲で小供の時から損ばかりしている。
  小学校に居る時分  学校の二階から飛び降りて
  一週間ほど腰を抜かした事がある。なぜそんな
  無闇をしたと聞く人があるかも知れぬ。別段深い
  理由でもない。新築の二階から首を出していたら、
  同級生の一人が冗談に、いくら威張っても、そこ
  から飛び降りる事は出来まい。弱虫やーい。と囃した
  からである。小使に負ぶさって帰って来た時、
  おやじが大きな眼をて二階ぐらいから飛び降りて
  腰を抜かす奴があるかと云ったから、この次は抜
  かさずに飛んで見せますと答えた。（青空文庫より）
</div>
<div id="box2">
  親譲りの無鉄砲で小供の時から損ばかりしている。
  小学校に居る時分  学校の二階から飛び降りて
  一週間ほど腰を抜かした事がある。なぜそんな
  無闇をしたと聞く人があるかも知れぬ。別段深い
  理由でもない。新築の二階から首を出していたら、
  同級生の一人が冗談に、いくら威張っても、そこ
  から飛び降りる事は出来まい。弱虫やーい。と囃した
  からである。小使に負ぶさって帰って来た時、
  おやじが大きな眼をて二階ぐらいから飛び降りて
  腰を抜かす奴があるかと云ったから、この次は抜
  かさずに飛んで見せますと答えた。（青空文庫より）
</div>  
</body>
</html>

     
  /* それぞれに設定する場合 */
  div{ margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  }
  
/*値が1つの場合上下左右同じ値になる*/
margin:10px;}
/* 値が2つの場合 上下 / 左右の指定となる */  
  div{ margin:10px 30px;}
/* 値が3つの場合 上 / 左右/ 下の指定となる */    
  div{ margin:10px 20px 30px;}
/* 値が4つの場合上から時計回りの指定になる
  上　/　右　/　下　/　左*/  
  div{ margin:10px 20px 30px 40px;}

      div#box1{
     background: beige;
     margin: 10px 20px 30px;
     }

  div#box2{
     background: lavender ;
     }

/* マージンの相殺とは */
/* #box2にマージンを付けた場合3
    0+20=50pxになりそうだが… */
     div#box1{
     background: beige;
     margin: 10px 20px 30px;
     }

  div#box2{
     background: lavender ;
     margin: 20px;
     }
/* 上下にブロックボックスが並んだ場合、
       その間の margin は結合されて、
       大きな方の margin になる */

14 文字に関するプロパティ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字に関するプロパティ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <p>文字スタイル</p> 
</body>
</html>
     
/* 文字周りのプロパティ */
/*  colot: blue;
    font-size: 14px;
    font-family: Arial, Helvetica;
    font-weight: bold / normal
    font-style: italic;
    text-align: left / center / right;
    text-decoration:
           underline / line-through / none;    
           */
  p{
    color: orange;
    font-size: 24px;
    font-family: Roman;
    font-weight:bold;
    text-align: center;
    text-decoration line-through;
   }

15 list-styleでリストのスタイルを変更する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リストのスタイルを変更する</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>  
</body>
</html>

     
/* list-style-type: disc / circle 
   / square / decimal / lower-alpha;
    list-style-image: 
    list-style-position: inside / outside;
    list-style で一括設定が可能    
          */
  
ul{
     list-style: inside secimal;
   }

16 背景スタイルを変更する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>背景スタイル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<p>この文章はダミーです。文字の大きさ、
量、字間、行間等を確認するために入れています。</p>
<p>この文章はダミーです。文字の大きさ、
量、字間、行間等を確認するために入れています。</p>
<p>この文章はダミーです。文字の大きさ、
量、字間、行間等を確認するために入れています。</p>
<p>この文章はダミーです。文字の大きさ、
量、字間、行間等を確認するために入れています。</p>
<p>この文章はダミーです。文字の大きさ、
量、字間、行間等を確認するために入れています。</p>  
</body>
</html>

     
  body {
/*   background-color: silver;
  background-image: url('bg2.png');
  background-repeat: no-repeat;
  background-repeat: repeat-x;
  background-position: 10px 10px;
  background-position: top center;
  background-attachment: scroll;
  background-attachment: fixed; */
  background: url('bg2.png') no-repeat fixed;
}

17 displayで要素の配置方法を変える

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>display</title>
    <link rel="stylesheet" href="default.css">
  </head>
  <body>
    <h1>hello</h1>
    <p>world</p>

    <span>wow!</span>
    <a href="">link</a>
  </body>
</html>
     
/*
display:
- block
- inline
- list-item
- inline-block
- none
*/

h1, p, span, a {
  border: 1px solid #ddd;
}

h1, p {
  width: 120px;
  /*display: inline;*/
  display: inline-block;
}

span {
  display: none;
}

18 display:tableを使う

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>display:table</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- <div class="container">
      <div class="box gray">
        Hello Hello Hello Hello Hello Hello
      </div>
      <div class="box silver">
        Hello Hello Hello
      </div>
      <div class="box orange">
        Hello Hello Hello Hello Hello 
        Hello Hello Hello Hello Hello
      </div>
    </div> -->

    <div class="container">
      <div class="row">
        <div class="box gray">
          Hello Hello Hello Hello Hello Hello
        </div>
        <div class="box silver">
          Hello Hello Hello
        </div>
      </div>
      <div class="row">
        <div class="box orange">
          Hello Hello Hello Hello Hello Hello
        </div>
        <div class="box gray">
          Hello Hello Hello
        </div>
      </div>
    </div>

  </body>
</html>


     
/*
display: table
*/

.container {
  display: table;
  width: 300px;
}

.box {
  display: table-cell;
  width: 100px;
}

.row {
  display: table-row;
}

.gray { background: gray; }
.silver { background: silver; }
.orange { background: orange; }

19 line-height､vertical-alignを理解しよう

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>line-height､vertical-align</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>親譲りの無鉄砲で小供の時から損ばかりしている。
  小学校に居る時分  学校の二階から飛び降りて
  一週間ほど腰を抜かした事がある。なぜそんな
  無闇をしたと聞く人があるかも知れぬ。別段深い
  理由でもない。新築の二階から首を出していたら、
  同級生の一人が冗談に、いくら威張っても、そこ
  から飛び降りる事は出来まい。弱虫やーい。と囃した
  からである。小使に負ぶさって帰って来た時、
  おやじが大きな眼をて二階ぐらいから飛び降りて
  腰を抜かす奴があるかと云ったから、この次は抜
  かさずに飛んで見せますと答えた。（青空文庫より）
</p>
  </body>
</html>


     
/*
line-height
vertical-align
*/

p {
  border: 1px solid #ddd;
  font-size: 18px;
  /*line-height: 24px;*/
  line-height: 1.5;
}

20 float､clearで右寄せ・左寄せ 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>float､clearで右寄せ・左寄せ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>右寄せ・左寄せ</h1>
    <p><img src="food.jpg">文字を右あるいは
    左に寄せて、    写真の反対側に文字を流し込むには、
    CSSでimg要素にfloatプロパティを設定します。
    また、回り込みを解除するには次の要素にclearを
    設定します。</p>
    <h2>見出し2</h2>
    <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。
    ダミーテキスト。ダミーテキスト。</p>
  </body>
</html>


     
/*
float
clear
*/

h1, h2, p, img {
  border:1px solid #ddd;
}

img {
  float: right;
  width: 100px;
}

h2 {
  clear: right;
}