インターネット論/インターネット・リテラシー 第20回[2001/11/22]
 

スタイルシート入門



課題製作について           期限は12月20日(木)す。


スタイルシートとは

スタイルシートはスタイルの定義をいくつか組み合わせて、文字の大きさや色などを自由に設定する機能で、 カスケーディングスタイルシート(CSS)と呼ばれるものを学びます。
この機能も新しい機能なのでNetscape Composerでは扱えません。

   スタイルシートを使ったページのサンプル1

は一例ですが、見出し部分の背景だけに背景色が付いていますね。
(スタイルシートを使わない通常のページではページ全体に背景色が着いてここには設定できなかった)
 

スタイルシートの作り方

  1. まず、スタイルを記述するファイルを秀丸エディタで  ?????.css   と言う名でwwwフォルダに作っておきます。

  2. ( サンプル1に対応する例は  xstyle.css    というファイル名で作られていて内容は
       
      H1{
          color: white;
          background: pink;
      }
    のようになっています。)
     
  3. Composerで作りたいページを編集するとき、「編集」ツールバーで「 <HTML>ソース」を選び、

  4. <TITLE>       </TITLE>
    がある行の次に
    <LINK REL=STYLESHEET TYPE="text/css" HREF=" ?????.css">
    の行を追加して、いったん保存する。
  5. Composerで「ファイルの際読み込み」が出て「このページは他のプログラムによって変更されています。変更を反映するために読み込み直しますか?」と聞 かれるので「はい(Y)」を押す。
  6. これでスタイルシートが有効になるので、以降Composerで編集作業を続ける。

  7. (この例ではComposerで「見出し1 」で書いた部分が変わります。)
  8. Composer上ではスタイルシートの効果が確認できない場合があるので、必ずNavigatorで確認する。

スタイルの定義

スタイルの定義ファイル?????.css で記述されるスタイルの基本形は
 
     
    セレクタ {
                   プロパティ1: 値;
                   プロパティ2: 値;
    }

「スタイルシート」のHTML文法の詳細については
インターネット上で、
Yahoo! - Computers and Internet:Information and Documentation:Data Formats:HTML:Cascading Style Sheets

にスタイルシートを解説したページ集があるので参考にしてください。



今後課題制作を進めながらも、実習時間にはHTMLの補足など新しいことも勉強していきます。実習時間に欠席しないようにしてください。 出席日数も成績に関係します


題製作」とは別に授業の「 実習課題」も合わせて後期は評価します。



課題のページに進む