理系ジン

しばらくPythonに力を入れる予定です。

CSSの基礎

概要

CSSの基本・適用方法・ボックス・レイアウトについて書きます。

レスポンシブWebデザイン関連は次回の記事で書きます。JavaScriptからの操作やその他の事柄は、いつか使うときに記事にしたいと思います。

基本

CSSは次のように、要素やidやclassなどのセレクタの、スタイルの種類を表すプロパティに、を設定します。

セレクタa, セレクタb {
  プロパティi: 値ii; /* コメント */
  プロパティj: 値jj;
}

セレクタには、要素の名前、id(#を付ける)、clsss(.を付ける)や、属性([]内に指定)、リンク、セレクタの関係などを指定します。

プロパティは、スタイルの種類を表します。

値には、数値、文字列、長さ(em、ex、px、%など)、URI、色を指定します。

HTMLへのCSSの適用方法

HTMLにCSSを適用するには次の方法があります。link要素で外部CSSファイルを呼び出し適用style要素で文書単位に適用要素にstyle属性を追加して局所的に適用

スタイルの優先順位は、ブラウザのデフォルトスタイルよりページで定義しているスタイルが優先され、後から読み込まれたスタイルが優先(上書き)され、狭い範囲を指定するセレクタが優先され、!importantを付けると最優先ととなります。

ボックス

要素はボックスを生成し、ボックスの領域はコンテンツの入るcontentpaddingbordermarginとなります。contentのサイズはwidth, heightで指定し、背景のbackgroundはcontentとpaddingに適用されmarginには適用されません(例では灰色)、borderには境界線の太さ・線種・色を指定します。

これらのプロパティには-付きの詳細項目があります。padding、border-width、marginは、上・右・下・左のスペース区切りの値を指定することもできます。(2014/12/31追記)2個、3個の値により、それぞれ上下・左右、上・左右・下の値も指定できます。参照:margin - HTMLクイックリファレンス

<div style="width:100px; height:50px;
            padding:10px; border:5px solid black; margin:5px;
            background-color:lightgray;">ボックス</div>
ボックス

レイアウト

CSSのレイアウトは、基本的にボックスを上から順に並べていきます。連続するボックスのmarginは大きい方一つだけ適用されます。(2014/12/31追記)float, positionが利用されている場合は、marginの相殺は起こりません。参考:マージンの相殺 - CSS | MDN

横幅は指定しない場合、親要素のwidthに合わせられます。

positionプロパティに、配置方法のstatic(デフォルト、移動しない)・relative(基準位置からの移動)・absolute(親ボックスからの移動)・fixed(画面全体からの移動)を指定し、top・bottom・left・rightプロパティで指定した配置方法での移動距離を指定します。

floatプロパティに、値left・right・none(デフォルト)を指定すると、指定された要素はそれぞれ左・右・無しに寄せられ、後に続く要素は反対側に回り込みます。static値以外のpositionプロパティが指定されていると無効になります。

参考資料

次回予定

レスポンシブWebデザインの記事を予定しています。