たまちゃんHTMLのおうち たまちゃんHTMLのおうち

CSSの基礎

ホーム> CSSの基礎

メニュー

CSSの基本を学びましょう。

基礎の基礎からCSSを学んでいきましょう。


■スタイルシート(CSS)

  

★スタイルシートとは

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。 ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる ユーザーエージェント(多くの場合ウェブブラウザ)、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる(カスケードする)ことができる しかし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。

引用:ウィキペディアの執筆者. “Cascading Style Sheets”. ウィキペディア日本語版. 2012-04-04.


このページのトップ

■3種類のスタイルシート

スタイルシートは3種類あります。
 ● 制作者スタイルシート
 ● ユーザースタイルシート
 ● デフォルトスタイルシート の3つです。

★3スタイルシートの優先順位

UA(User Agnet(ユーザーエージェント)・・・一般的にブラウザ)の環境設定でどのスタイルシートを適用するかの設定をしなければ、優先度はこのようになります。

たとえば、文字色に対して制作者スタイルシートでを指定、ユーザースタイルシートでは、 デフォルトスタイルシートではが設定されていたとします。
この場合、デフォルトスタイルシートのがユーザースタイルシートので上書きされ、さらに 制作者スタイルシートのが上書きされ、最終的に文字色にはが設定されます。
デフォルトスタイルシートは各UAが持っているもので、それぞれ内容が異なります。この差異が異なるブラウザにおける表示の違いの原因の一つです。
デフォルトスタイルシートを表にしてみました。

このページのトップ

■HTML文書にスタイルシートを適用する

★3つのスタイルシート適用方法

HTML文書にスタイルシートを適用する方法は3つあります。

 1.要素にstyle属性を追加する
 2.style要素で文書全体に適用する
 3.link要素で外部CSSファイルを呼び出す

★スタイルシート適用方法の優先順位

こちらも優先順序があります。

このHTML文書をスタイルシートを使って書き直してみましょう。

ソースコード

<p><font color= "red"> スタイルシートを使いましょう。</font></p>


表示

スタイルシートを使いましょう。

ちなみにfont要素は、HTML5で廃止される予定のようです。

★1.要素にstyle属性を追加する

ソースコード

<p style= "color: red"> スタイルシートを使いましょう。</p>


要素単位でのスタイルを設定する方法です。

★2.style要素で文書全体に適用する

ソースコード

<head>
  <style
type="text/css">
    p {color: red;}
  </style>
</head>

<p> スタイルシートを使いましょう。</p>

文書単位でスタイルを設定する方法です。
p {color: red;} の部分が、CSSの基本書式でそれぞれの名称は、 セレクタ {プロパティ名: 値;}です。

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

プロパティ名: ; の部分は複数の記述ができます。

ソースコード(CSSファイル)

p {
  color: red;
  font-weight: bold;
}


★3.link要素で外部CSSファイルを呼び出す

ソースコード(CSSファイル)

p {color: red;}


ソースコード(HTMLファイル)
  

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

<p> スタイルシートを使いましょう。</p>

こちらが、お勧めスタイルシートの適用方法です。 複数のHTMLファイルに同じスタイルを使用するときなど、管理面で非常に優位です。
このホームページでは、極力この方法で記述し説明もこれを基準とします。


このページのトップ

■クラス名を用いたスタイルの指定

クラス名を付けてスタイルを定義し、要素単位でこのクラスを指定することによりスタイルを適用します。

ソースコード(CSSファイル)

p.redstyle {
color: red; /* 文字色は赤 */
}


ソースコード(HTMLファイル)

ここはデフォルトの文字色です。<br>
<p class= "redstyle" >
  クラスを指定して文字の色を変えました。
</p>


表示
ここはデフォルトの文字色です。
  

クラスを指定して文字の色を変えました。   

p.redstyleは、p要素に対してのみredstyleクラスが適用可能となります。
*.redstyleとすれば、どの要素にも適用できます。*は省略でき .redstyleと記述できます。
また、クラスは複数のクラスを適用することもできます。クラス名の間に半角スペースを入れて記述します。

ソースコード(CSSファイル)

p.redstyle { color: red; } /* 文字色は赤 */
*.bold { font-weight: bold; } /* 太文字 */


ソースコード(HTMLファイル)

<p class= "redstyle bold" >
  2つのクラスを指定して文字の色と太さを変えました。
</p>


表示

2つのクラスを指定して文字の色と太さを変えました。


このページのトップ

■ID名を用いたスタイルの指定

ID名を付けてスタイルを定義し、要素単位でこのIDを指定することによりスタイルを適用します。
■クラス名を用いたスタイルの指定と使い方が同じですが、 同じページで一箇所しか使えないという違いがあります。

定義側(CSS) 使用側(HTML) 使用回数
クラス .(ピリオド)
(例)p.class_name
class=
(例)<p class="class_name">
何回でも
ID #(シャープ)
(例)p#id_name
id=
(例)<p id="id_name">
1ページに1回のみ

ソースコード(CSSファイル)

p#redstyle {
color: red; /* 文字色は赤 */
}


ソースコード(HTMLファイル)

ここはデフォルトの文字色です。<br>
<p id= "redstyle" >
  IDを指定して文字の色を変えました。
</p>


表示
ここはデフォルトの文字色です。
  

IDを指定して文字の色を変えました。   


参照させていただいたサイト様


このページのトップ