感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

ブラウザのデフォルトのCSSをリセットするためのスタイルシート。ノーマライズするためのスタイルシート(Normalize.css)

<スポンサーリンク>

CSSのデフォルトスタイルとノーマライズCSS

ブラウザによって、デフォルトのCSSがあらかじめ設定されている。
自分でマークアップするために、デフォルトのCSSをリセットするときもある。
デフォルトのCSSをリセットするためのCSSは以下からダウンロード出来る。
http://yuilibrary.com/yui/docs/cssreset/

一方、デフォルトのCSSをリセットするのではなく、デフォルトを生かしつつ、ブラウザ間の差異をすりあわせることを目的としたのが「ノーマライズ」である。ノーマライズCSSは以下でダウンロードすることができる。
http://necolas.github.io/normalize.css/

CSSセレクタの優先度

CSSセレクタには「詳細度」がある。
「適用対象の要素がより詳しく、細かく指定されているスタイルの方が優先される」というCSSのルールによる。
セレクタの記述例と詳細度について。

セレクタ 名前 詳細度
 * ユニバーサルセレクタ 0
p タイプセレクタ 1
p em タイプセレクタ × 2 2
.text クラスセレクタ 10
p.text クラスセレクタ + タイプセレクタ 11
#content idセレクタ 100
div#content p.text idセレクタ + クラスセレクタ + タイプセレクタ ×2 112

あとは、1つのファイルに複数の同じ要素に対する指定がある場合は、最初に読み込まれたものが優先される。
複数のファイルに同じ指定があるものは、最後のファイルの指定が優先される。

CSSプロパティの単位

多くの場合、相対単位が使用される。

相対?絶対 プロパティ 意味
絶対単位 cm センチメートル
絶対単位 mm ミリメートル
絶対単位 min インチ
絶対単位 pt ポイント
絶対単位 pc パイカ
相対単位 em アルファベットのMの高さを「1」としたときの、その倍率。
相対単位 ex アルファベットの「x」の高さを「1」としたときの、その倍率。
相対単位 px ピクセル数。ディスプレイの画像解像度に依存する。
相対単位 % 画像サイズや親要素に対する%で指定する。

テキストにまつわるCSS

プロパティ 意味
color テキストの色を指定する
font-family フォントの種類を指定する。カンマで区切ることで、複数のフォント候補を並べることができる。
font-size フォントの大きさを指定するプロパティ。
font-weight フォントの太さを指定するためのプロパティ
font-style フォントのスタイルを指定するためのプロパティ
line-height テキスト1行の高さを指定するプロパティ
text-indent 行頭の字下げ幅を指定するプロパティ。
text-decoration テキストを装飾するためのプロパティ。
text-align テキストの行揃えを指定するためのプロパティ。

総称ファミリー

font-familyを指定する際の、おおまかなフォントの種類のこと。
総称ファミリーを指定すると、閲覧者の環境に容易されているフォントのうち、最も近いものやユーザーがあらかじめブラウザに設定したフォントが表示されるようになる。
総称ファミリーはこんなものがある。
serif:明朝系
sans-serif:ゴシック系
cursive:筆記体・草書体
fantasy:装飾フォント
monospace:等幅フォント

読んだ本

ここに書いてある内容は、全て以下の書籍で詳しく学ぶことができる。

具体例が豊富でとてもわかりやすいCSSの入門書である。

感謝のプログラミング

今回で感謝のプログラミングは【643時間目】
10000時間まで、あと【9357時間】