- StyleSeets StartingText -

沢田愛 課題提出トップ < practice0919/ StyleSeets StartingText

■ What'sCSS？

・HTMLとは文書の論理構造の記述
・CSSはレイアウト、デザイン構造の記述

スタイルシートを使用することのメリットは、HTMLでは不可能な多くの表現が可能になること、外部CSSファイルをHTML文書に読む込むという方法をとることによってHTMLファイルの容量が軽くなること、また、一つのCSSファイルで複数のHTMLのスタイルを制御することができるので、CSSファイルを修正するだけで、複数のHTMLページのスタイルを変更でき、更新作業が楽に行えるということなどがあげられます。

しかし、古いブラウザでは、CSSに対応していないものも存在するので、正しく表示できない場合が出てきてしまいます。
ブラウザの対応状況はHTML＆CSS＆_Javascript辞典で確認してみてください。

CSSに対応していないレガシーブラウザーでも、正しいHTMLとCSSを用いた記述をしていれば、最低限の文書構造は成立しているので閲覧には支障を来さないとも言える。つまりCSSレイアウトでもHTMLの基本が最重要であることに変わりはなく、SEO対策を考えれば尚更なのです。

■ 実技内容

・CSSの記述方法について

  1. タグの要素にstyle属性の値として組み込む
  2. 内部ソースにStyle要素の内容として組み込む
  3. CSSの書かれたファイルを外部から読み込む

!NOTICE：今回は（１）に特化しています。

・CSSを使ってみよう！

キックオフ感覚でフォントタグから移行するような形でスタイルシートの手打ちをしてみる。フォントタグの概念と同様だが、それぞれの要素や値を繋ぐ文字などが違う。メリットはほとんどのタグの属性として「style」が適用できる。

＜style＞（タグの属性として）、＜span＞（インライン/前後に改行が入らない）、を従来のテーブルレイアウトから使ってみることにします。

例：フォントタグの指定
例：スタイル属性で指定

↓ソースにするとこうなります。

例：<font size="4pt" color="red">フォントタグの指定</font><br>
例：<span style="font-size:14px;color:red;">スタイル属性で指定</span>

!NOTICE1：CSSは要素と値を「:」コロン「;」セミコロンで繋げていきます。
!NOTICE2：「セレクタ、プロパティ(要素)、ヴァリュー(値)」構成順は通常のタグ属性の記述と同じです。

・テーブルレイアウトをスタイルシートで装飾してみよう！

本日使用している主なスタイル属性
文字要素設定用スタイル ブロック要素設定用スタイル
font-size（フォントサイズ）
color（テキストカラー）
line-height（ライン高）
font-style（フォントスタイル） 		width（幅）
height（高さ）
margin（マージン）
padding（余白）
border（境界線）
POINT1：テーブル（ボックス）、左から、マージン、ボーダー、パディング、順で覚える。

・ページ内にスタイル要素を組み込みタグに反映させる。

↓このページで使用しているページプロパティ

/*スタイルの定義*/ <style type="text/css"> /*ボディ設定*/ body {font-size:12px;line-height:16px;margin:25px 75px 0px 75px;background-color:#eeeefe;} /*リンク設定*/ a:link {color:#0033FF;text-decoration: none;} a:visited {color:#0033FF;text-decoration: none;} a:hover {background-color:#B3E0FF;} a:active {color:#0033FF; text-decoration: none;} </style>

!NOTICE：これらの記述法は次回以降の実技で予定しています。

■その他 TIPS

・DreamWeaverには「リファレンス」という機能があります。
任意のタグを選択して右クリックするとリファレンスが表示されるので、辞典としても使える。
難しく説明しているのでオススメの機能ではないが、知っていれば役に立つ日が必ず来る！？

沢田愛 課題提出トップ < practice0919/ StyleSeets StartingText

Copyright© 2008 Ai Sawada