2006年06月21日

スタイルシートのデメリット

スタイルシートのデメリットについて

1:少々知識を要する
2:ブラウザの違いによる表示の違い

簡単にはこのぐらいです。

スタイルシートの知識については、私が思うにそれほど難しい事では無い感じがします。
指定方法の基本と属性(プロパティ)等はいろいろな方が解説しておられるので、コピペすれば解決できます。
要は【難しい】【ややこしい】とされるのは、スタイルシートで段組をする時についてだと感じます。
その点、ブログは予め段組されているので事始めにはもってこいです。

当ブログのカスタマイズでは上記の段組もして行こうと考えてます。


ブラウザの違いによる表示の違いはちょっと厄介です。
もともとCSSはW3Cが推奨する基準なのですが、一時期【Internetexplorer】【ネットスケープ】などのシェア争いのため、各々が独自のプログラムを持った事に始まるのですが・・・
最新のブラウザは概ねCSSに準じてはいますが、それでも100%対応はしていません。

また、同じ【Internetexplorer】でも最新の【Internetexplorer】とちょっと前の【Internetexplorer version5及び5.5】では明らかに表示が違います。

対応策は当ブログ内で説明します。

スタイルシートのメリット

スタイルシートのメリットについて

1:デザインの変更・編集が簡単
2:HTMLの重さ軽減→読み込みが早い
3:HTMLの文書構造を保ちながらの自由なレイアウトが可能
4:アクセシビリティ面で有利

簡単に言うと以上のような感じです。

スタイルシートを利用するとHTMLの文章の構造とレイアウトやデザインの構造を分離することが出来ます。
例えば、100ページもあるホームページを運営していて、ある時「デザインを変えたい・ページをリニューアルしたい」と思いました。
100ページ分すべて変更したいのですが、1ページ1ページ変更するのは大変な時間と労力が必要です。
しかしながら、スタイルシートを利用していればスタイスシート1枚(ひとつのファイル)を変更するだけで、100ページ分すべて変更が可能です。

HTML文章からレイアウトやデザインの構造を切り離す事により、HTMLファイルの容量が軽くなり、アクセスがあった際の情報のダウンロード時間が短縮されます。
検索エンジンで目的のサイトを見つけても表示されるのに時間がかかれば次のサイトに変えますよね。

HTMLの文書構造を保ちながらの自由なレイアウトが可能とは、簡単に説明すると、検索エンジンのロボットはHTML文章を上から順に読み込みます(すべてを均等に読み込む訳ではありません)。
HTML構造の決まり事として、ブラウザ上で左側に配置した情報は、HTML内では常にHTML文章の上の階層に記述されます。(2カラムレイアウトの場合、コンテンツにしろ、メニューにしろ左側に設定した方がHTML構造では上階層に記述されます)
よって検索エンジン対策を考えるなら、キーワードなどが多く含まれるコンテンツ部分を左にレイアウトした方が有利なのです。
テーブルレイアウトの場合は【右サイドバー】しか使えない・・・と言う事です。
スタイルシートレイアウトでは後に説明しますが、【float】と言う属性を使って左右どちらでも配置する事が可能です。

アクセシビリティについては後で詳しく説明します。

スタイルシートとは

スタイルシートとは、
HTMLで記述されたページの見栄えに関する制御・・・簡単にいうとWebページのデザインとレイアウトを定義したもの・・・です。

一般的にスタイルシートとは CSS(Cascading Style Sheets=カスケーディング・スタイルシート)の事をいいます。

○スタイルシートの指定方法

【 セレクタ { 属性 : ; } 】←これが基本です。

因みに、見出しタグ<h1>を【赤字】に指定するには(ブログの場合、大抵がタイトルに指定してあります。)・・・

【 h1 { color : red ; } 】となります。


CSSの定義方法は3つありますので紹介しておきます。

1:インライン
インラインスタイルとはHTML内のタグに直接指定する方法です。
上記の例がそうです。

2:内部CSS
内部スタイルシートとは、HTMLの〜内にスタイルシートを記述する方法です。
インラインスタイルが個別に指定するのに対し内部CSSは1ページ全体の同一タグについて指定する事が出来ます。

3:外部CSS
外部スタイルシートとは、HTMLファイルとは別のファイル(拡張子は【.css】)にスタイルシートを記述してリンクさせる方法です。

ブログは3番のタイプで、HTMLとスタイルシートを分離してリンクさせてます。つまり、レイアウト等はスタイルシートを変更すればページや記事に全て適用される・・・と言う事です。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。