スタイルシート(CSS)

スタイルシート
スタイルシートの利用方法
リンク要素を用いたスタイルシートの利用
セレクタ
プロパティ
使用例
演習問題

スタイルシート

スタイルシート(CSS: Cascading Style Sheets)に Webページの見栄えを記述することで，文章と分離する

Webページのレーアウトデザインなど，見栄えを定義する部分を文章と切り離すことで，より複雑な（高度な）Webページの作成を効率良くすすめることができる．

[例]

html

   <!DOCTYPE html>
   <html lang="ja">
   <head>
     <meta charset="Shift_JIS">

     <title>私のホームページ</title>
   </head>

   <body>
     <h1>初めてのHTML</h1>
     
     <div>
      学籍番号:  9918999<br>
      氏名:   ○○ ○○<br>
     </div>

     <p>
       初めて作成した
       私のホームページ
     </p>
   </body>
   </html>

ブラウザでの表示

スタイルシート

上の例では


    <style type="text/css">
      div{ font-size: 24pt; color: red;}
    </style>

がスタイルシート(CSS)である．ここでは， div要素で設定するブロック内での文字を大きさ（サイズ）24ポイントの赤色と指定している．

この例の div の部分を「セレクタ」と呼ぶ
font-sizeやcolorの部分を「プロパティ（属性）」と呼ぶ
「font-size: 24pt」で文字サイズを24ポイントに設定している
「color: red」で文字の色を赤に設定している


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

開き中括弧から閉じ中括弧までの間に「プロパティ（属性）」とその「値」を記述する
セレクタで指定した要素のプロパティ（属性）を指定した値に設定することを意味する

body要素

上の例でのbody要素中のdiv要素


      <div>
        学籍番号:  9918999<br>
        氏名:   ○○ ○○
      </div>

に対してスタイルシートでの設定


     div { font-size: 24pt; color: red;}

が適用されブラウザ上での表示に反映されている．

スタイルシートの利用方法

htmlファイルの中に書き込む
この場合はスタイルタグ(<style>〜</style>)を使用し，開始タグと終了タグの間に埋め込む．

body要素内の各種タグの中に要素名とともに書き込む
[例]


     <h2 style="font-size: 24pt; color: red;">スタイルシートの利用方法</h2>

CSSファイルを用意し，リンクによりWebページに読み込む
CSSを独立してファイルを作成し，複数のWebページで同一のCSSファイルを読み込むことで，各Webのデザインを統一することができる．

リンク要素を用いたスタイルシートの利用

[図] htmlファイルからのCSSファイルの利用

htmlファイル内に link 要素を用いてcssファイルを指定する．


    <link rel="stylesheet" type="text/css" href="cssファイル名">

CSSファイル内での記述

      @charset "Shift_JIS";             このCSSファイルの文字コード
      h1 { color: red; }                h1要素のcolor属性値を赤色に
      p  { background-color: yellow; }  p要素の背景色属性値を黄色に

セレクタ


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

プロパティ


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

演習問題

第１週目で作成したWebページ mypae.html を次のように書き換えて，スタイルシートを使ってみる．

mypage.html

   <!DOCTYPE html>
   <html lang="ja">
   <head>
     <meta charset="Shift_JIS">
     <link rel="stylesheet" type="text/css" href="mystylesheet.css">
     <title>私のホームページ</title>
   </head>

   <body>
     <h1>初めてのHTML</h1>
     
     <div>
      学籍番号:  9918999<br>
      氏名:   ○○ ○○<br>
     </div>

     <p>
       初めて作成した
       <span>私の</span>ホームページ
     </p>
   </body>
   </html>

mystylesheet.css

   @charset "Shift_JIS";
   body {
       backgound-color: #ccffff;
   }
   h1 {
       color: blue;
   }
   div {
       background-color: yellow;
       width: 400px;
   }
   p {
       font-size: 24pt;
       color: red;
       width: 400px;
   }
   span {
       font-size: large;
       color: purple;
   }

mypage.htmlをブラウザで表示し，作成したスタイルシートに従ったデザインに変更されていることを確認する．