サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> ユーザビリティ >> スタイルシートについて

スタイルシートについて



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

カスケーディング・スタイル・シート(CSS)は、ウェブページのレイアウトを専門的に行う言語です。タグでのレイアウトデザインでは、ブラウザによって変わってしまう場合がありますので、HTMLから分離した形で外見を記述します。

1つのスタイルシートは、サイトの全てのページに適用することができます。
また、複数のスタイルシートファイルを用意することで、サイト内のデザインをコンテンツによって使い分けることが可能です。

スタイルシートのメリットはサイト全体に統一感を出せることにあります。
一般の書籍のレイアウトに統一感があるように、ウェブにも同じ背景やフォントを使用したりと統一感を出すことも重要です。全てのページに同じスタイルシートを用いることで、サイト全体が1つのブランドとしての協調性を持つことができるのです。


スタイルシートの実装

スタイルシート実装するには主に2つの方法があります。
  1. 埋め込み型スタイルシート:style属性を用いてタグに実装する
  2. リンク型スタイルシート:別ファイルにスタイルシートを記述し、そのスタイルを使うウェブページのヘッダーからリンクで読み込む
リンク型スタイルシートを用いると、外部スタイルシートファイルを更新するだけでサイト全体の見せ方を簡単に変更できるためメンテナンスが楽になるというメリットがあります。

また、スタイルシートファイルは最初にダウンロードするだけでよいので、そのスタイルを適用したページは、埋め込み型スタイルシートを利用したページよりもダウンロードが速くなります。

スタイルが多くのページに共通するものであればサイト全体のスタイルシートとして追加するべきですが、たった1ページでしか使わないスタイルは埋め込み型にした方がよいでしょう。

そうすると、ページ共通のスタイルにリンクしたままで、そのページの埋め込み型スタイルシートが追加されます。これは、修正されたページにも、共通のスタイルシートに対する変更が反映されるという利点があります。


スタイルシートが機能するかを確認する

スタイルシートをユーザーのブラウザが未対応だったとしても、ページが見苦しく表示されることは避けなければなりません。
例えば、同じ文字列を少しずらして表示して影効果を持たせるようなスタイルは、スタイルシートが機能しないページでは訳がわからなくなります。

スタイルシートを使用するときは、必ずスタイルシートを使用しない時のページを確認し、見づらくないかをチェックしましょう。

スタイルシートについてはこちらで詳しく解説してあります


 
 

Webの開設と運営法に戻る Next:プリントの必要性




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, Accessibility, Usability. All rights reserved. - Home