ホーム＞コース別ガイド一覧＞CSSをHTMLに適応させる三つの方法

CSSをHTMLに適応させる三つの方法

どんな方法があるの？

一つ目は style 属性を使う方法（指定した要素にのみ適応される）、二つ目は style 要素を使う方法（1つのWebページのみにデザインが適応される）、三つ目は link 要素を使う方法（Webサイト全体のデザインを統一できる）があります。

1. style 属性を使う場合、HTMLファイルの特定の要素にstyle属性を指定するため、その指定した要素にしか適応されません。
2. style 要素を使う場合、head 要素内にstyle要素を記述し、内容にCSSを記述します。この場合、1つのWebページのみにデザインが適応されます。
3. link要素を使う場合、HTMLファイルとは別にCSSファイルを作りWebサイト全体のデザインを簡単に統一できます。link 要素は head 要素内に記述し link 要素の href 属性でCSSファイルを指定するだけです。

優先順位があります！

上記の三つの方法には適応される優先順位があります。一番優先されるのが style 属性を使う方法で、二番目に優先されるのが style 要素を使う方法、優先順位が一番低いのは link 要素を使う方法です。

CSSの利用方法その１〜style属性を使う！〜

style 属性を利用し、タグに直接入力して指定した属性のみにデザインを指定する方法です。HTMLタグの style 属性を利用するため、前に説明した「CSSの基本的な書式」とは異なり、HTMLのタグによる書式になります。では、右図をご覧ください。
このようにデザインを指定するHTML要素に style 属性を記述し、始めと終わりの「"（ダブルクォテーション）」の間の属性値にCSSの書式で言うプロパティと値を記述します。

CSSの利用方法その２〜style要素を使う！〜

HTMLファイルの中にCSS文書を埋め込み、そのページのみのデザインに適応させるには、 head 要素の中に style 要素を記述して内容にCSSを記述します。では、実際にどのように記述するのでしょうか？右の記述例を見てください。
赤い文字のタグは style 要素です。「<style type="text/css">」と「</style>」の間にCSS文書（青い文字）を記述します。

CSSの利用方法その３〜link要素を使う！〜

この方法では、HTMLファイルとは別にCSSファイルを作り、そのCSSファイルをHTMLファイルに読み込ませてデザインを適応させます。複数のページに同じCSSファイルを適応できるので、この方法でデザインを指定するとページごとにCSSを記述する手間がはぶけ、手軽にサイト全体Webページのデザインに統一感を持たせることができます。Webページが多くなった場合のデザイン管理に大変有効です。
HTMLファイルと、別に作成したCSSファイルを結び付けるには link 要素を使います。link 要素はHTML文書内の head 要素の中に記述し、href 属性でCSSファイルのURL（URLについては「WWWサーバーとは？URLをちゃんと理解していますか？」で説明しています）を指定します。記述は右図を参考にしてください。<link rel="stylesheet" type="text/css" href="mystyle.css" >の「mystyle.css」はファイル名で拡張子はCSSファイルなので「css」となります。「rel="stylesheet" type="text/css"」の部分は簡単に言うとCSSタイプのスタイルシートという意味です。
※Webサイトのページ数をどの程度にするか決まってない方はこちらの方法でデザインすれば損はないと思います。

外部CSSファイルの作り方