webfeelfree

CSSの書き方の基本~適用方法~

  • CSS

img_2014091701
CSSとは、カスケーディングスタイルシート(Cascading Style Sheets)の略。

今回は、CSS自体をどこに書いていけばいいのか?設定すればいいのか?、スタンダードなものから、最新?のモノまで、その適用方法を紹介します。

XHTMLやHTML4.01には宣言が必要

<head>
 ...
 <meta http-equiv="Content-Style-Type" content="text/css" />
 ...
</head>

<head>内に宣言を記述します。

この記述は、「HTMLタグの中に書く」では、必須です。
それ以外の記述方法には、特に必要ないのですが、テンプレート・決まり文句だと思って書くことをオススメします。

この宣言を書かなくてもブラウザが、うまく処理してくれます。
ですが、エラーを避けるため忘れずに記述しましょう。

HTML5では、この記述が逆に構文エラーとなってしまうので、書かないよう注意が必要です。

この宣言をザックリ説明しますと・・・スタイルシートにも色々あるようで、そのうちの「CSS」というスタイルシートを使いますよ~という宣言になります。

HTMLファイルに直接コーディングする

ここから実際に、CSSを適用させるための説明になります。
まずは、HTMLファイルに、CSSを直接、記述していくタイプです。

HTMLタグの中に書く

CSSのプロパティや値をHTMLタグの中に、記述して適用させる方法です。
あまり使わない方法ですが、外部CSSや<head>内の記述を禁止しているブログやWebサービスには、この書き方で対応します。

<body>
 <p style="font-size: 20px; color: red;">~</p>
</body>

開始タグの中に属性として「style="プロパティ:値;"」と指定します。
要素名と「style="プロパティ:値;"」の間には、半角スペースを入れます。

CSSを複数指定する場合には「;(セミコロン)」で区切ります。

<p style="font-size: 20px; color: #red">~</p>

また、一番最後の「;」だけ、省略することができます。
省略して紹介しているサイトもあるので、混乱を避けるために補足という感じで書いておきます。

この方法は、HTMLタグに、1つ1つ細かく書き込むので、HTMLが冗長化してしまい、
・ファイルが大きくなる
・変更など、管理が大変になり、メンテナンス性が低下してしまう
という点で、現在では、あまり使われていません。

最悪、ワンポイントで使う感じの適用方法かと。

<head>内に<style>で指定する

<head>内にCSSを書き込んでスタイルや装飾を指定する方法です。
ページ単位にCSSを設定していく記述方法です。

<head>
 ...
 <style type="text/css"><!--
  p {font-size: 16px; color: red;}
  h2 {font-size: 20px; color: blue;}
  .demo01 {width: 450px;}
 --></style>
</head>

<head>内に<style type="text/css">を記述して、その中にCSSを書き込んでいきます。
</head>の直前に書くのが一般的でしょうか。

HTML5では、「type="text/css"」を省略することができます。

<style>内側の<!-- -->の囲みは、CSSに対応していない古いブラウザに対応するための記述です。
最近のブラウザでは、ほとんど対応しているので、<!-- -->を省略しても問題ないと思います。

<body>内に<style>で指定する

今度は、<body>内に<style>を使って、CSSを指定する方法になります。
この方法は、今のところ、オマケという感じの記述方法です。

<body>
 ...
 <p>文字は赤くならない</p>
 <section>
  <style scoped>
  p {color: red;}
  </style>
  <p>文字が赤くなる</p>
 </section>
 ...
</body>

<style scoped>で指定することにより、そのボックス(親要素)の中だけ指定したCSSが適用されます。
この場合、<section>の中だけCSSが適用されるということになります。

ここで、なぜ、オマケなのか?
2点ほど、補足ってみようと思います。

1点目は、「<body>内に<style>は、構文エラーとなる」です。

HTML4.01やXHTMLなどでは、CSSは適用されるようですが、構文エラーとなってしまいます。
もちろん、<style scoped>も対応していません。

また、HTML5でも、<style>の指定のみだと、構文エラーになります。
HTML5として、正しく使うには<style scoped>と記述します。

次に、「ほとんどのブラウザが、<style scoped>の対応が進んでいない」ということです。

執筆現在は、Firefoxの最新版は、正しく表示されるようです。
また、他のブラウザでは、記述したCSSが、ページ全体に適用されてしまいます。
なので、各ブラウザで、表示が違う場合があるので注意が必要です。

上記の理由により、現段階では使う場面が非常に限定されます。
使うこともできますが、各ブラウザで不具合が出る可能性があるので、注意しましょう。

外部のCSSファイルを使う

今度は、外部CSSを使う方法です。
HTMLファイルと区別して、別ファイルでCSSを準備して、読み込む方法になります。

まずは、今回のディレクトリ構造のイメージです。

ディレクトリ構造イメージ

たいだい標準的な構造だと思います。
ここでは、CSSフォルダを用意して、CSSファイルを一括するディレクトリ構造で説明を進めます。

外部CSSファイルを読み込む

一番スタンダードな記述方法です。

HTML

<head>
 ...
 <link rel="stylesheet" href="css/style.css" type="text/css" />
 ...
</head>

HTML側には、外部から読み込むCSSファイルのパスを記述します。
<head>内に<link>を使ってパスとファイル名を指定します。

複数のCSSファイルを読み込む場合、

<link rel="stylesheet" href="css/ファイル名.css" type="text/css" />

を、読み込みたいCSSファイルの数だけ、書き足していきます。

HTML5の場合「type="text/css" /」の部分を省略することができます。

CSS

p {font-size: 16px; color: red;}
h2 {font-size: 20px; color: blue;}
.demo01 {width: 450px;}

CSSファイルに関しては、この場合、準備した「style.css」にCSSを記述していきます。
今回は、適用方法に特化した内容なので、記述の内容は割愛します。

外部CSSファイルから、別の外部CSSファイルを読み込む

この方法も結構、見かける適用方法です。
必要に応じて「外部CSSファイルを読み込む」と使い分けましょう。

HTML

<head>
 ...
 <link rel="stylesheet" href="css/style.css" type="text/css" />
 ...
</head>

HTMLの記述は「外部CSSファイルを読み込む」と同じです。

CSS

@import url("css/reset.css");
p {font-size: 16px; color: red;}
h2 {font-size: 20px; color: blue;}
.demo01 {width: 450px;}

「style.css」から@importを使って「reset.css」ファイルを読み込んでいます。

この場合、「reset.css」が先に読み込まれてから、そのあとに記述したCSSが適用されます。

もちろん、複数のCSSファイルを複数呼び出すこともできます。
その場合、こちらも・・・

@import url("css/ファイル名.css");

を、書き足していきます。

<head>内で@importを使って外部CSSファイルを読み込む

私は、あまり見かけたことのない方法です。
変化球的な感じだと思います。

HTML

<head>
 ...
 <style type="text/css"><!--
  @import url("css/reset.css");
  @import url("css/style.css");
 --></style>
</head>

<head>内に、<style>を記述して、@importを使い、外部CSSファイルを読み込む方法です。

<style>を使った記述に関しては、「<head>内に<style>で指定する」も参考にしてみてください。

CSS

p {font-size: 16px; color: red;}
h2 {font-size: 20px; color: blue;}
.demo01 {width: 450px;}

CSSファイルは、普通に記述します。

あとがき

HTMLファイルに直接書く方法3種類、外部CSSファイルを読み込む方法3種類、を紹介しました。
直接書く方法は、中盤の1つを、外部CSSファイルの方法は、序盤の2つを押さえておきたいところです。

サイトのデザインをカスタマイズするとき、あのデザインを参考にしたい!
なんて時にも、CSSがどこに書かれているのか?とコーディング場所がサクッと探せるような手助けになればいいなぁ~と思います。

ぜひ、CSSの楽しい扉が開かれますように♪

参考
[CSS]CSSの適用方法 | コリス
HTML文書へのスタイルシート適用 – CSS2リファレンス
hamashun.me : HTML5のstyle要素が持つscoped属性について

最新記事

読まれている記事

カテゴリー