【CSS書き方講座】実はデザイン設定の方法には3種類の書き方があった

事前準備

作業をするフォルダを準備しましょう。

デスクトップ（フォルダ）
　→sample（フォルダ）
　　→html（フォルダ）
　　　→ここにHTMLファイルを保存
　　→CSS（フォルダ）
　　　→ここにCSSファイルを保存

デザイン設定の書き方の種類には3種類あります。

この3種類について紹介していきます。事前準備で作成したフォルダにこれから紹介するHTMLファイル／CSSファイルを保存して実行結果を確認してみましょう。

タグに直接記述する方法で<h1>のデザインを設定していきます。デザイン設定をする時は「style=””」のダブルコーテーションの中にコードを記述します。タグ内に記述方法は下記の通りです。「TeraPad」を新規で立ち上げ、htmlファイルにコードをコピーし、ブラウザに表示してみましょう。

<html>
  <head>
  </head>
  <body>
    <h1 style="color: #F00;background: #FF0;">見出し</h1>
  </body>
</html>

メリット	1つのタグに対して設定を行えることが出来る
デメリット	1つのタグの記述が長くなり見にくくなる複数の<h1>タグに対して同じデザインを設定する際に、それぞれの<h1>タグに同じコードを記述しなければならない。管理が大変になる

<html>
　<head>
　</head>
　<style>
　　h1 {
　　　color: #F00;
　　　background: #FF0;
　　}
　</style>
　<body>
　　<h1>見出し</h1>
　</body>
</html>

メリット	<style>タグ内で設定した<h1>タグは「test_02.html」のファイル内にある全ての<h1>タグはすべて同じデザインになる。管理が簡単になる。
デメリット	「test_02.html」にある<h1>タグにしかデザインをで適用することしかできない。ほかのファイルを作成した時に同じコードをシート単位で記述しないといけなくなる。

<html>
 　<head>
　　 <link rel="stylesheet" href="../css/test_01.css">
 　</head>
 　<body>
 　　<h1>見出し</h1>
 　</body>
</html>

h1 {
　color: #F00;
　background: #FF0;
}

メリット	CSSファイルを複数のHTMLファイルにリンクすることで同じタグに対して同じデザインを設定することが出来る。デザインを統一することが出来る。
デメリット	リンクの仕方を間違えるとデザインが反映されない。

Webデザインで使われるのは「＜link＞タグを使用し、CSSファイルに記述する方法」です。この方法は複数のhtmlファイルに一つのCSSファイルを適用できます。そのため、Webサイトのデザインが統一され「見やすい」「きれい」なサイトを作ることが出来ます。