外部スタイルシートを作成する方法

CSSサイトワイドの使用

ウェブサイトはスタイルと構造の組み合わせであり、今日のウェブでは、サイトのこれらの2つの側面をお互いに分けておくことがベストプラクティスです。

HTMLは、常にサイトにその構造を提供するものでした。 初期のウェブサイトでは、HTMLにもスタイル情報が含まれていました。 タグのような要素はHTMLコード全体に散らばり、ルックアンドフィール情報と構造情報が追加されました。 Web標準の動きにより、この習慣を変更し、代わりにすべてのスタイル情報をCSSまたはカスケードスタイルシートにプッシュするよう促しました。 これをさらに進めて、現在の推奨事項は、あなたのウェブサイトのスタイルのニーズに「外部スタイルシート」として知られているものを使用することです。

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

カスケーディングスタイルシートに関する最良の事柄の1つは、それらを使用してサイト全体の一貫性を維持できることです。 これを行う最も簡単な方法は、 外部スタイルシートをリンクまたはインポートすることです。 サイトのすべてのページに同じ外部スタイルシートを使用すると、すべてのページが同じスタイルになることができます。 将来の変更を簡単にすることもできます。 すべてのページが同じ外部スタイルシートを使用するため、そのシートを変更するとすべてのサイトページに影響します。 これは、すべてのページを個別に変更する必要があるよりはるかに優れています!

外部スタイルシートの利点

  • 一度に複数のドキュメントのルックアンドフィールを制御できます。
    • これは、人のチームと協力してWebサイトを作成する場合に特に便利です。 多くのスタイルルールは覚えがたく、印刷されたスタイルガイドがあるかもしれませんが、サンプルテキストが12ポイントのArialフォントか14ポイントの宅配便で書かれているかどうかを判断するために効率的で退屈です。 すべてを1か所に収めることで、その場所が変更される場所でもあるため、メンテナンスを非常に簡単にすることができます。
  • 多くの異なるHTML要素で使用できるスタイルのクラスを作成できます。
    • 特定のフォントスタイルを使用してページ上のさまざまな要素に重点を置くことが多い場合は、スタイルシートで設定したクラス属性を使用して、その外観ごとに特定のスタイルを定義するのではなく、強調する。
  • より効率的にスタイルを簡単にグループ化できます。
    • CSSで使用できるすべてのグループ化方法は、外部スタイルシートで使用できます。これにより、ページの柔軟性と柔軟性が向上します。

外部スタイルシートの短所

  • 外部スタイルシートを使用するとダウンロード時間が長くなります(特に、ファイルサイズが非常に大きい場合)。 CSSファイルは読み込まなければならない別個の文書であるため、そのダウンロードを実行するためのパフォーマンスに影響します。
  • 外部スタイルシートは、ページが削除されたときに削除されないため、スタイルが使用されなくなったときを伝えることが難しいため、非常に迅速に大きくなります。 CSSファイルの適切な管理は、特に複数の人が同じファイルを操作している場合には重要です。
  • 単一ページのWebサイトしか持っていない場合は、CSS用の外部ファイルを用意する必要はありません。 1つのページ・サイトしかない場合、外部CSSの多くの利点が失われます。

外部スタイルシートを作成する方法

外部スタイルシートは、ドキュメントレベルのスタイルシートと同様の構文で作成されます。 ただし、インクルードする必要があるのは、セレクタと宣言だけです。 ドキュメントレベルのスタイルシートと同様に、ルールの構文は次のとおりです。

セレクタ{プロパティ:値;}

拡張子.cssのテキストファイルにこれらのルールを保存します。 これは必須ではありませんが、入るのはいい習慣ですので、ディレクトリリスト内のスタイルシートをすぐに認識することができます。

スタイルシート文書を作成したら、それをWebページにリンクする必要があります 。 これは2つの方法で行うことができます。

  1. リンクする
    1. スタイルシートをリンクするには、HTMLタグを使用します。 これには、 reltypehrefという属性があります。 rel属性はあなたがリンクしているもの(この場合はスタイルシート)を示し、タイプはブラウザのMIMEタイプを定義し、hrefは.cssファイルへのパスです。
  2. インポート
    1. ドキュメントレベルのスタイルシート内でインポートされたスタイルシートを使用すると、外部のスタイルシートの属性をドキュメント固有のものを失わずにインポートできます。 リンクされたスタイルシートを呼び出すのと同様の方法で呼び出します。文書レベルのスタイル宣言内で呼び出される必要があります。 Webサイトを維持するために必要な数の外部スタイルシートをインポートすることができます。

Jennifer Kryninのオリジナル記事。 ジェレミージラール編集:8/8/17