プロパティ値の継承について［CSS］

情報公開日: 2011年6月21日 編集者: adworks

継承されるプロパティとそうでないプロパティがあります。

継承されないプロパティは、値にinheritを指定して強制的に継承することもできます。

CSSでは、プロパティによっては、スタイルの値が子要素などの下の階層に継承されます。
たとえば、フォント関連のプロパティ、font-familyやfont-sizeなどは、親要素で指定されたスタイルは、その下層にあるすべての子要素に継承されていくので、ページ全体のフォントのスタイルを統一したい場合は、body要素にフォントのスタイルを指定するだけでよいこととなります。

それに対して、要素の幅や高さ、マージンなどのプロパティは継承されないので、特に指定がなければ、それぞれの要素ごとに決められた初期設定値が適用されます。初期設定では継承されない親要素のスタイルを、強制的に継承するには、継承したいプロパティの値にinheritを指定します。たとえば、paddingの値を親要素から継承したい場合には、
[css]padding: inherit;[/css]
と指定します。

Internet Explorer 5.5の場合の注意点

Internet Explorer 5.5では、テーブルの要素にfont-family以外のフォントの値が継承されないので、td要素やth要素にもフォントのスタイルを指定する必要があります。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート |

クラスとIDの違い

情報公開日: 2011年6月19日 編集者: adworks

ページ内で1つしかない要素を特定するのがID、いくつかの仲間が存在するのがクラスです。

divやspan、pなど、同一の(X)HTML内で繰り返し利用される要素は、区別が付きやすいように属性で分類したり、名前を付けたりします。要素を分類したり、名前を付けたりすることで、セレクタで特定することが容易となり、スタイルを指定しやすくなります。
このように、要素を分類する際に利用するのが、class属性です。class属性では、同じ値を複数の要素に指定できるので、値によって複数の要素をグループ化することができます。たとえば、ブログの記事のように、同じ階層構造を持つdiv要素がページ内に複数ある場合、これらに同じclass属性の値を指定すると、すべての記事に同じスタイルを適用することができます。
それに対して、1つの要素を特定するために利用するのが、id属性です。id属性では、1つのファイルに同じ値を1度しか利用できません。あるid属性の値を持つ要素は、1つの(X)HTMLファイルの中では1つしか存在しないというわけです。Webページのデザインの中で、特にこの要素にだけスタイルを指定したいという場合に、idのセレクタを利用するのがよいでしょう。

name属性を使うときの注意点

name属性を使うとき、リンクの要素は(X)HTMLでは使わない様にします。新しいHTMLの規格、HTML5では、a要素を個別に認識するための属性としてnameではなくてidを使用することを推奨しているからです。

HTML5では構造化用の要素が利用できる

新しいHTMLの規格であるHTML5では、HTMLを構造化して記述するために、section、header、nav、aside、footer、articleといった要素が追加されます。現在作成しているWebページではdiv要素のclass属性やid属性の値で構造化の用途を区別していますが、HTML5へ移行しやすいようにsection、headerといったHTML5の要素名に合わせたclass属性やid属性の値にしておくと、便利です。

カテゴリー: CSS, HTML5, HTMLの基礎知識, ナレッジノート, 属性 |

セレクタの優先順位

情報公開日: 2011年6月18日 編集者: adworks

要素名だけの指定よりも、classやidの値を指定したセレクタ、セレクタを組み合わせた複合セレクタなど、より限定された部分を指定するセレクタが優先されます。

スタイルの指定（CSS）

[css]
p {
color: gray;
}
.red {
color: red;
}
#blue {
color: blue;
}
#blue em {
color: green;
}
[/css]

ソースコード（HTML）

[html]
<p class="red" id="blue">会社名　<em>株式会社アドワークス</em></p>
[/html]

上記のような場合、p要素でグレーと指定してありますが、redというclass属性の値を持つp要素に限定されますので、文字色は赤となります。
さらに、id属性#blueという指定がありますので、id属性の値がblueという要素は1つだけですので、さらに限定され文字色は青となります。
また、株式会社アドワークスという箇所はid属性と組み合わせた複合セレクタが指定されていますので、emで指定された文字色は緑となります。

より限定された範囲への指定が最優先されるということですね。

相反するスタイルの優先順位

同じセレクタで相反するスタイルが指定されている場合は、後から読み込まれる方、つまり下の行で指定されたスタイルが自動的に適用されます。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート, 属性 |

特定の要素内の要素だけにスタイルを指定する方法

情報公開日: 2011年6月18日 編集者: adworks

基本的には要素名に続けて半角スペースを空けてから、中の要素名を指定します。

特定の要素の直下ににある要素や直後にある要素を指定する方法もあります。

CSSのセレクタは、複数のセレクタを組み合わせることができます。組み合わせによって、要素の親子関係や記述の順序から限定してスタイルを適用させることもできます。セレクタの組み合わせは、3つの基本パターンがあるので、覚えておきましょう。

1つ目が、基本となる、セレクタの間を半角スペースで空ける組み合わせです。
[css]
p a {
color:#000;
}
[/css]
セレクタの間を半角スペースで空けることで、特定のセレクタの中にあるものだけスタイルを変更しています。上記の場合は、p要素内のa要素（リンク）の文字色を指定しています。

2つ目が、セレクタの間を「>」で区切る組み合わせです。
[css]
.col > p {
color:#000;
}
[/css]
セレクタの間に「>」を記述すると、特定のセレクタの直下にあるものだけスタイルを変更できます。上記の場合は、クラス属性.colの要素直下のp要素の文字色を指定しています。

3つ目が、セレクタの間を「+」で区切る組み合わせです。
[css]
h2 + p {
color:#000
}
[/css]
セレクタの間に「+」を記述すると、特定のセレクタの直後にあるもだけスタイルを指定できます。上記の場合は、h2要素と同じ親要素の中にあるh2要素直後のp要素の文字色を指定しています。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート, 要素 |

セレクタって何？

情報公開日: 2011年6月17日 編集者: adworks

スタイルを適用する部分を特定するための記述です。

要素名のほかに、class属性の値やid属性の値、疑似クラス、疑似要素などが利用できます。
CSSの指定は、大きく3つの部分に分けられます。指定を適用する範囲、指定する内容、指定する値です。CSSのスタイルを適用する範囲のことを、セレクタと呼びます。それに対して、指定する内容をプロパティと呼びます。プロパティと値の間は「:」で区切られ、1組のプロパティと値は「;」で分けられます。セレクタによって適用されるプロパティと値は、{ }でまとめられます。

要素名（CSS）

[css]h2 {
h2要素に適用するスタイル
}
p {
p要素に適用するスタイル
}
[/css]

クラス（CSS）

[css].title {
class="title"の要素に適用するスタイル
}[/css]

ID（CSS）

[css]#header {
id="header"の要素に適用するスタイル
}
#main {
id="main"の要素に適用するスタイル
}[/css]

疑似クラス（CSS）

:link
a要素と組み合わせて、未表示のリンクに適用
:visited
a要素と組み合わせて、表示済みのリンクに適用
:hover
要素にマウスカーソルが重なったときに適用
:active
要素をクリックしたときに適用
:focus
フォームの部品などの要素が選択されたときに適用
:lang（言語コード）
要素が特定のコードのときに適用
:first-child
特定要素内の最初の子要素のときに適用

疑似要素（CSS）

:first-line
要素の1行目に適用
:first-letter
要素の1文字目に適用
:before
要素の前にcontentプロパティで内容を追加し、そのスタイルを指定
:after
要素の後にcontentプロパティで内容を追加し、そのスタイルを指定
カテゴリー: CSS, HTMLの基礎知識, ナレッジノート, 要素 |

CSSの使い分け その3

情報公開日: 2011年6月16日 編集者: adworks

お勧めのCSSハックのコードとそれによるブラウザの振り分け

[html]
<link herf="import.css" rel="stylesheet" type="text/css" media="screen,tv" />
<!–[if IE 5]>
<link herf="ie5.css" rel="stylesheet" type="text/css" />
<![endif]–>
[/html]

まずは、media属性の値に「screen」以外の値を指定することでNN4への適用を排除。

import.css内で
[css]@import "style.css"; [/css]

url()内ではなくて、@importに続けてすぐ読み込むCSSファイル名を記述することでIE4への適用を排除。
読み込むCSSのファイル名をシングルクォート「’」で囲むことでMac版IE5への適用を排除。

[html]
<!–[if IE 5]>
<link herf="ie5.css" rel="stylesheet" type="text/css" />
<![endif]–>
[/html]

条件分岐コメントにより、IE5.xのみに読み込ませるCSSファイルを指定。

以上がCSSハックのコードの使用例となります。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート |

CSSの使い分け その2

情報公開日: 2011年6月15日 編集者: adworks

ブラウザやそのバージョンごとにCSSを使い分ける方法は？

Javascriptを使う以外に、CSSの記述でも使い分けができます。

十分にCSSに対応していないブラウザには、あえてCSSを適用しないという選択肢もあります。

CSSは、Webページの外観を指定しますが、ブラウザの種類やバージョンによっては、規格通り表示されないことが多々あります。特にInternet Explorerのバージョン5以前の古いブラウザでは、CSSの一部しか対応していなかったり、対応していても規格通りの表示にはならない場合があります。

Javascriptを利用して、ブラウザの種類やバージョンごとに読み込ませるCSSファイルを変えることもできますが、CSSを利用して特定のブラウザやそのバージョンごとに特定の指定だけを読み込ませたり、逆に読み込ませないようにしたりできます。この、CSSを利用してブラウザごとに対応させることをCSSハックと言います。

CSSハックは、ブラウザの進化に合わせて様々なものが開発されてきました。便利なものではありますが、多用すると本来のデザインの指定がわかりづらくなってしまいますし、メンテナンスも大変です。

CSSハックは裏技？

CSSハックの多くは、ブラウザのCSSに対する不具合を逆利用しています。

たとえば、Internet Explorerの後方互換モードではwidthの内側にpaddingの値を指定してしまいます。
しかし、Internet Explorerは_widthとプロパティの前に_（アンダースコア）を付けてもプロパティとして解釈するので、他のブラウザと同じ幅で表示させるために、始めにwidthプロパティで正しい値を指定して、続けて_widthでInternet Explorerの後方互換モード用の値を指定するといったCSSハックもあります。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート |

用途ごとにCSSを使い分ける

情報公開日: 2011年6月15日 編集者: adworks

CSSファイルを読み込むときに、media属性で用途を指定できます。画面表示用、印刷用など、目的ごとにさまざまに使い分けられます。

Webページでは、画面で表示するだけでなく、印刷して資料として利用することもあります。Webページのデザインによっては、画面表示する場合と、印刷する場合でスタイルの指定をした方が良い場合も多々あります。

また、携帯端末用にスタイルを変えた方がよいこともあります。
たとえば、画面では暗い背景色に明るい文字で見やすい表示にしていても、Webページを印刷するときは、ブラウザの初期設定では背景が印刷されないため、紙面では見づらくなってしまいますよね。

そんな場合、用途ごとにCSSを使い分ける場合には、画面表示用、印刷用などと用途ごとに異なるCSSファイルを用意すれば解決できます。

link要素を使ってCSSを読み込むときは、media属性を利用します。たとえば、画面表示用のCSSの場合には次のように指定します。
印刷用のCSSを読み込むときは、別のlink要素で読み込みを指定して、media属性でprintを指定します。

[html]<link herf="display用.css" rel="stylesheet" type="text/css" media="screen" />[/html]

また、@importを利用してCSSファイルを読み込むときは、CSSファイル名に続けてメディアタイプを指定します。
たとえば、印刷用のCSSの場合には、次のように指定します。

[css]@import url("print用.css) print;[/css]

media属性の値に応じて、ブラウザはCSSファイルを適用します。
パソコンの画面表示用にはmedia=”screen”と指定されたCSSファイルを、media=”print”と指定されたCSSファイルは印刷プレビューまたは印刷時に適用されます。

カテゴリー: CSS, ナレッジノート, 属性 |

CSSが適用される優先順位は？

情報公開日: 2011年6月14日 編集者: adworks

タグのstyle属性→style要素→@importでの読み込み→link要素での読み込みの順に優先されます。

CSSファイルは、style要素内、タグのstyle属性の3箇所に定義できますが、定義した場所や読み込み方法によって、適用される優先順位が変わります。

CSSのC＝Cascadingには「連鎖的」「段階的」という意味があるので、その名の通り、段階的に優先順位が付いてスタイルが適用されます。

無料配布のCSSを利用する

CSSを利用してWebページを思いのままデザインするには、画面レイアウトのデザイン能力の他に、CSSを適切に使いこなす技術が必要です。CSSの使い方に不慣れなうちは、作成したいWebページのイメージと似ているページのCSSを参考にするのも一つの方法ですね

freecsstemplates.org

http://www.freecsstemplates.org/

カテゴリー: CSS, ナレッジノート |

CSSはどんな場所に定義できる？

情報公開日: 2011年6月9日 編集者: adworks

CSSファイル、head要素内のstyle要素、各タグのstyle属性の3箇所に定義できます。

定義する場所によって、メリット・デメリットがあります。

CSSは、（X）HTMLなどで記述したWebページの見た目を制御する指定です。（X）HTMLは文書の論理構造を指定し、CSSは文書の外観を指定する、ということで、（X）HTMLと切り分けてCSSファイルとして保存することも可能です。

ファイルに保存したCSSは、複数の（X）HTMLファイルから参照ができ、デザインが統一できる、一括して変更できるなどのメリットがあります。ただし、個別のページごとにデザインをアレンジしたい場合には、指定の方法に工夫が必要となります。ファイルに保存したCSSは、link要素または@importを利用して読み込みます。link要素で読み込む場合には、href属性でCSSファイルのパスを指定し、rel属性には「stylesheet」を、type属性には「text/css」を指定します。@importで読み込む場合は、@import url()と指定した()内にCSSファイルのパスを記述します。@importはstyle要素内または別のCSSファイル内で指定できます。

特定のWebページだけに適用させるCSSは、（X）HTMLのhead要素内にstyle属性を利用して記述します。style要素に対応していないブラウザで、要素の内容が誤って表示されてしまわないように、内容全体にコメントの指定をしておくことをお勧めします。

CSSの新しい規格 CSS3

CSSはWeb技術の規格団体W3Cが規格の策定をしており、現在はCSS Level2 revision1（CSS2.1）が広く利用されています。Internet ExplorerをはじめほとんどのモダンブラウザがこのCSS2.1に対応しています。
CSS2.1は2007年7月に勧告候補となりましたが、現在策定が進められているのがCSS Level3（CSS3）です。CSS3はモジュール化され、各ブラウザはどのモジュールに対応するかを選択できます。
CSS3では、画像を利用しない角丸四角形のボーダーやドロップシャドウといった表現が可能となります。

カテゴリー: CSS, CSS3, HTMLの基礎知識, ナレッジノート |