3. CSS基礎

CSSとはHTMLの文字色や背景色等といったスタイルを設定するためのものです。
CSSは Cascading Style Sheetの略で、Cascading(階段状に連続する滝)とあるように、親要素で設定されたスタイルが子要素、孫要素へと引き継がれて適用されます。
スタイルはHTMLのタグに直接設定する事もできますが、HTMLは本来、文章構造を記述するための言語なので、スタイルは別で定義する方が望ましいです。
また、ページが複数存在し、それぞれ共通のスタイルを設定したい場合には、同じスタイルを何度も記述する事になってしまいます。
それらの理由から、スタイルはCSSファイル内で定義し、HTMLはそのCSSファイルを読み込むだけの状態が望ましいです。
CSSの記述方法は以下です。

セレクタ {
    プロパティ: 設定値;
    プロパティ: 設定値;
    プロパティ: 設定値;
}

セレクタとはスタイルを設定する要素を指定するものです。

/* すべてのh1タグに文字色redを設定する */
h1 {
    color: red;
}
    
/* idがtopPageHeaderのタグにフォントサイズ30pxを設定する */
#topPageHeader {
    font-size: 30px;
}
    
/* classにblueBackが指定されたタグすべてに背景色blueを設定する */
.blueBack {
    background-color: blue;
}
    
/* divの子要素のpに太字を設定する */
div p {
    font-weight: bold;
}
    
/* divとpに下線を設定する */
div, p {
    text-decoration: underline;
}

このようにタグ名とid、classを使って設定する事もできます。

This software includes the work that is distributed in the Apache License 2.0

Last modified: Thursday, 25 October 2018, 12:46 PM