沢田愛 課題提出トップ < practice0919/ StyleSeets StartingText
スタイルシートを使用することのメリットは、HTMLでは不可能な多くの表現が可能になること、外部CSSファイルをHTML文書に読む込むという方法をとることによってHTMLファイルの容量が軽くなること、また、一つのCSSファイルで複数のHTMLのスタイルを制御することができるので、CSSファイルを修正するだけで、複数のHTMLページのスタイルを変更でき、更新作業が楽に行えるということなどがあげられます。
しかし、古いブラウザでは、CSSに対応していないものも存在するので、正しく表示できない場合が出てきてしまいます。 ブラウザの対応状況はHTML&CSS&_Javascript辞典で確認してみてください。
CSSに対応していないレガシーブラウザーでも、正しいHTMLとCSSを用いた記述をしていれば、最低限の文書構造は成立しているので閲覧には支障を来さないとも言える。つまりCSSレイアウトでもHTMLの基本が最重要であることに変わりはなく、SEO対策を考えれば尚更なのです。
!NOTICE:今回は(1)に特化しています。
例:フォントタグの指定キックオフ感覚でフォントタグから移行するような形でスタイルシートの手打ちをしてみる。フォントタグの概念と同様だが、それぞれの要素や値を繋ぐ文字などが違う。メリットはほとんどのタグの属性として「style」が適用できる。
<style>(タグの属性として)、<span>(インライン/前後に改行が入らない)、を従来のテーブルレイアウトから使ってみることにします。
↓ソースにするとこうなります。
例:<font size="4pt" color="red">フォントタグの指定</font><br>
!NOTICE1:CSSは要素と値を「:」コロン「;」セミコロンで繋げていきます。
!NOTICE2:「セレクタ、プロパティ(要素)、ヴァリュー(値)」構成順は通常のタグ属性の記述と同じです。
本日使用している主なスタイル属性 | |
---|---|
文字要素設定用スタイル | ブロック要素設定用スタイル |
font-size(フォントサイズ) color(テキストカラー) line-height(ライン高) font-style(フォントスタイル) |
width(幅) height(高さ) margin(マージン) padding(余白) border(境界線) |
POINT1:テーブル(ボックス)、左から、マージン、ボーダー、パディング、順で覚える。 |
↓このページで使用しているページプロパティ
!NOTICE:これらの記述法は次回以降の実技で予定しています。
沢田愛 課題提出トップ < practice0919/ StyleSeets StartingText