コンピュータ基礎演習３

コンピュータ基礎演習４

リンク

第４回　スタイルシートその１[テキストの装飾]（5月7日）

課題：スタイルシート(CSS)でテキストの装飾を行う

マークアップ済みのHTMLファイルにCSSファイルをリンクする

CSSでテキストの装飾を行う

授業前の準備

  • 教材のダウンロード：web_03.zip
  • ダウンロードしたフォルダの名前を変更する
    • 例：web_03_10810000
  • 必要に応じてデータは各自でUSBメモリなどにコピーする

サイト設定

  • Dreamweaverを起動し、「サイト」メニューから「新規サイト...」を選択する
  • サイト名とローカルルートフォルダを設定する
  • 退室時はサイト設定を削除してからDreamweaverを終了する

スタイルシートとは

  • HTMLは本来、構造を記述するためのものであり、デザイン的要素を含めるべきではない
  • HTMLからデザイン要素を分離させるために開発されたものがスタイルシート（CSS）
  • CSSを活用することで、より細かなデザイン設定が可能
  • デザイン要素が分離されることでメンテナンスが容易
  • CSSも基本は手打ちだがDreamweaverではCSSスタイルパネルを使うことで簡単に設定可能

新規スタイルシートファイルの作成

  • CSSはHTMLファイル内に記述することも可能だが構造とデザインの分離の観点からも別ファイルに記述するのが基本
  • 「ファイル」メニューから「新規...」を選択する
  • 新規ファイルパネルで「空白ページ＞CSS」を選択して「作成」をクリックする
  • 作成したファイルをサイトルートに保存する（ファイル名と拡張子（*.css）に注意）
  • CSSスタイルパネルでHTMLファイルにCSSファイルを添付（リンク）させる
  • ひとつのHTMLファイルに複数のスタイルシートファイルをリンクさせることも可能

セレクタ

  • CSSは「セレクタ」「属性（プロパティ）」「値」の３つの要素で構成される
    例： 
    h1 {font-size: 36px;}
    h1がセレクタ、font-sizeが属性、36pxが値
  • セレクタはCSSを適用させる箇所を指定する要素
  • セレクタには大きく分けて３つの種類がある
    • タグ：タグ名を直接指定することでタグの見栄えを設定できる
      　　　例：body, h1, p
    • ＩＤ：主にブロック要素の見栄えの設定に使われる
      　　　名前の先頭に#が付く
      　　　１ファイル内に１度のみ使用可能
      　　　例：#header, #footer
    • クラス：主に部分的な見栄えの設定に使われる
      　　　名前の先頭に.（ドット）が付く
      　　　１ファイルに何度でも使用可能
      　　　例：.itemname, .redtext

ブラウザでの確認

  • CSSで設定した見栄えは必ずブラウザで確認する
  • Dreamweaverではファイルメニュー＞ブラウザでプレビューを選択またはF12キーオを押す
  • ブラウザによって見栄えが異なる場合があることを認識しておく

評価ポイント

  • スタイルシートファイルが正しく設定できているか？（20点）
  • スタイルシートファイル内にCSSが記述できているか？（20点）
  • セレクタの使い分けが正しくできているか？（20点）
  • クラスが適切に設定されているか？（20点）
  • 効果的なCSSの設定ができているか？（20点）

HTMLファイルおよびCSSファイルの2ファイルを提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の月曜日の午後９時まで