「CSS」は、正式には「Cascading Style Sheets（カスケーディング・スタイル・シート）」という。
昔、Webは「HTML」のみで、制作されていましたが、現在では、「HTML」「CSS」「Javascript」「PHP」など多様な言語を組み合わせて制作するようになりました。
その中で、「HTML」はWebの骨組みを担当し、「CSS」は、文字の装飾・配置、画像の位置調整など、Webのレイアウトデザインを担当しています。
Webを制作するのに、「CSS」は必要不可欠な存在です。

Back

「CSS」外部ファイルを用意する

最初に、
「CSS」ファイルを用意します。
リンクさせる「CSS」ファイルは、最初は何も記述しなくても大丈夫。

「CSS」ファイルの拡張子は、「ファイル名.css」と記述。

リンクさせた後に、確認するために、
わかりやすい「CSS」コードを入力しておくとわかりやすいです。

「CSS」ファイルの拡張子

CSSファイル名.css

簡単な「CSS」サンプルコード

body{
background-color:#000000;
}

Webページの背景を真っ黒にするサンプルコードです。
「CSS」外部ファイルをリンクさせて、Webページの背景が「黒」になっていれば、
リンク完了です。

Back

「CSS」外部ファイルとリンクさせる方法

「CSS」外部ファイルを「HTML」ファイルにリンクさせるには、
専用の「HTML」コードを「HTML」ファイルに記述することでリンクさせることができる。

外部CSSファイルへリンクさせる書式

「CSS」の外部ファイルは、「link」タグを使って、「HTML」ファイルとリンクさせる。
この時に必ず設定するのが、
「href」属性＝「CSS外部ファイルのURL」
「rel」属性＝「stylesheet」
「type」属性＝「text/css」
上記の属性への設定を忘れると「CSS」外部ファイルとリンクができないので注意。

「HTML」ファイルへ記述する場所

「CSS」外部ファイルをリンクさせる場合、
「HTML」ファイルの「head」タグ内に、
リンクコードを記述する。
他の場所にリンクコードを記述してもリンクされない。

Back

ファイルのURLを指定する方法

「HTML」と「CSS」でのWeb制作であれば、
「相対URL」の指定方法を使うことがほとんど。
「Javascript」「PHP」などを使う場合には、
「絶対URL」で指定することもありますが、
Web制作では、「相対URL」の指定がメインです。

同じディレクトリのファイルを指定する相対URL

./ファイル名.html

一つ下のディレクトリにあるファイルを指定する相対URL

./ディレクトリ名/ファイル名.html

2つ下のディレクトリにあるファイルを指定する相対URL

./ディレクトリ名/ディレクトリ名/ファイル名.html

一つ上のディレクトリにあるファイルを指定する相対URL

../ファイル名.html

一つ上の別のディレクトリにあるファイルを指定する相対URL

../ディレクトリ名/ファイル名.html

一つ上の別のディレクトリ内にあるディレクトリ内ファイルを指定する相対URL

../ディレクトリ名/ディレクトリ名/ファイル名.html

Web内のファイルを指定する絶対URL

http://ドメイン名.com/ファイル名.html
http://ドメイン名.com/ディレクトリ名/ファイル名.html
http://ドメイン名.com/ディレクトリ名/ディレクトリ名/ファイル名.html

「ファイルURL」の種類

「ファイルのURL」を指定する方法は、
最初は少し戸惑いますが、
ルールを覚えてしまえば、凄く簡単。

「ファイルのURL」を指定する方法は、
・絶対URL（絶対パス）
・相対URL（相対パス）
というような言い方をします。
2つの違いは、
・インターネット全体の住所を含めたURL
・Webサイト内部だけの住所のURL
という違いがあります。

「絶対URL（絶対パス）」は、インターネット全体の住所のうなURLなので、世界中から、「絶対URL（絶対パス）」でアクセスできます。

「相対URL（相対パス）」は、Web内の住所なので、
現在のファイルがある場所からのディレクトリやファイルを示すURLです。

絶対URL（絶対パス）

http://ドメイン名.com/ファイル名.html
http://ドメイン名.com/ディレクトリ名/ファイル名.html
http://ドメイン名.com/ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
https://ドメイン名.com/ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
http://www/ドメイン名.com/ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
https://www.ドメイン名.com/ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値

相対URL（相対パス）

./ファイル名.html
./ディレクトリ名/ファイル名.html
./ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
./ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
../ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値
../ディレクトリ名/ファイル名.html?クエリ名=値&クエリ名=値

Back