CSSの基本

Index

セレクタの基本形
CSSの適用の仕方
ボックスの構造
ブロックレベル要素の配置の仕方
position プロパティ: 要素の座標値
diplay プロパティ: 要素の表示の仕方

セレクタの基本形

CSSのスタイルを適用するHTMLの要素を選択するのが、セレクタです。
セレクタには、CSSのプロパティと値をコロン（:）で繋いだ組を、セミコロン（;）で区切って、中括弧（{}）のブロックの中に並べて指定します。

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

コメントを書く場合は、/* ～ */の中に書きます。/*がコメントの始まりで、*/がコメントの終わりを表します。
コメントは、次の例のように、一時的に文字の色を様々に変更してみて検討するときに使用すると便利である。下の例では、文字は緑色になります。

コメントの使い方例)

<style type="text/css" >
h1 {
/*   color: red; */
/*   color: #A00;
     color: #800;
     color: #700; */
     color: green;
/*   color: #0000e9; */
}
</style>

<h1>見出し1</h1>

タイプセレクタ(要素型セレクタ)

HTMLの要素名をセレクタとします。指定された要素すべてに、スタイルが適用されます。

例)

p { color : blue; }

h1 {
color: white;
background-color: silver;
}

クラスセレクタ（classセレクタ）

ページ内で複数の要素に同じ使用したいスタイルがある場合に、クラスセレクタを定義して、それらの要素のclass属性の値にクラスセレクタを指定して、同一のスタイルを適用することがでます。

クラスセレクタを定義するには、セレクタ名の先頭にピリオド（.）を付けます。

例)

.sironuki {
color: white;
background-color: silver;
}

適用例)

<h1 class="sironuki">見出し1</h1>
<h2 class="sironuki">見出し2</h2>

IDセレクタ

id属性のある要素に適用したりスタイルをしてするセレクタです。一つのページ内では、id属性が同じ値を持つ複数の要素は存在してはならないので、唯一つの要素についてのスタイルの指定となります。。

IDセレクタを定義するには、セレクタ名の先頭にシャープ（#）を付けます。

例)

#copy {
   color: yellow;
   background-color: black;
   text-align: center;
   padding: 1em;
}

適用例)

<p id="copy">© Satoshi Uchiyama All rights reserved. </p>

↑

CSSの適用の仕方

HTMLでCSSを使用するには、外部ファイルにセレクタの定義を書いてlinkする方法、HTML内のstyle要素にセレクタの定義を書く方法、要素ごとにstyle属性でスタイルを指定する（インライン）方法があります。
インラインで指定されたスタイルが最優先されます。

style要素に記述する例(head要素内の子要素とするのが良い)

<style type="text/css">
.sironuki {
color: white;
background-color: silver;
}
</style>

インラインの例

<h1 style="color: white; background-color: silver;"> 見出し１</h1>

<p style="border: solid thin #3500ff;"> 吾輩は猫である。名前はまだ無い。</p>

↑

ボックスの構造

HTML文書の要素はボックスと呼ばれる箱のような形をもっていて、CSSでプロパティを設定することで、このボックスの幅や高さ、配置を変更したりすることができます。




content
(内容)

←―――――――― width ――――――――→

←―― height ――→

padding

border

margin

padding-top

border-top

margin-top

padding-bottom

border-bottom

margin-bottom

padding-left

border-left

margin-left

padding-right

border-right

margin-right

borderの例）

<style type="text/css">
#ex_border {
   width: 18em;
   padding: 0.3em;
   border-top: solid 0.4em #ffa500;
   border-bottom: solid 0.5em #af5500;
   border-right: solid 0.8em #df8500;
   border-left: solid 0.4em #ffb500;
/*   border: solid 0.5em orange; */
}
</style>
<h4 id="ex_border"> 吾輩は猫である。名前はまだ無い。</h4>

吾輩は猫である。名前はまだ無い。

↑

ブロックレベル要素の配置の仕方

body要素の中の要素は、インライン要素とブロックレベル要素の2種類に分かれます。

インライン要素は、文章中の文字や画像のように行内に表示されるような要素のことです。複数のインライン要素を連続して記述すると、横に並んで表示されます。代表的なインライン要素は、strong要素（強調）、img要素（画像）、em要素（強調）、span要素、などです。span要素は特別な意味は持っていません。

インライン要素の配置の例）

Shine Like Stars!

<strong>Shine</strong> <img src="OK.gif"><em>Like</em> <span style="color: tomato;">Stars!</span>

ブロックレベル要素は、段落などのひとかたまりの要素で、前後に改行が入って表示されます。複数のブロックレベル要素を連続して記述すると、縦に並んで表示されます。代表的なブロックレベル要素は、hn要素(n = 1, ..., 6)（見出し）、p要素（段落）、ul要素（箇条書き）、ol要素（番号付きリスト）、div要素、などです。div要素は特別な意味は持っていません。

ブロックレベル要素の配置の例）

DIV要素1

DIV要素2

DIV要素3

DIV要素4

<div style="width: 10em;">DIV要素1</div> <div style="width: 10em;">DIV要素2</div> <div style="width: 10em;">DIV要素3</div> <div style="width: 10em;">DIV要素4</div>

縦に並ぶブロックレベル要素を横に配置したい場合は、floatプロパティを使います。float: left;とすると、そのブロックレベル要素は、順番に左に配置されます。

ブロックレベル要素の配置の例）

DIV要素1(float: left;)

DIV要素2 (float: left;)

DIV要素3 (float: left;)

DIV要素4 (float: left;)

ブロックレベル要素の配置の例）

DIV要素1

DIV要素2 (float: left;)

DIV要素3 (float: left;)

DIV要素4 (float: left;)

ブロックレベル要素の配置の例）

DIV要素1

DIV要素2

DIV要素3 (float: left;)

DIV要素4 (float: left;)

ブロックレベル要素の配置の例）

DIV要素4はporoperty:left;がないので、描画の起点はDIV要素2の下になります。

DIV要素1

DIV要素2 (float: left;)

DIV要素3 (float: left;)

DIV要素4

同様に、ブロックレベル要素の右側に配置したい場合は、float: right;を指定します。

ブロックレベル要素の配置の例）

右から順番にならんでいることに注意してください。

DIV要素1(float: right;)

DIV要素2 (float: right;)

DIV要素3 (float: right;)

DIV要素4 (float: right;)

下の例のように、floatプロパティでleftを指定すると（DIV要素1）、それに続くfloatプロパティがleftの要素（DIV要素2）の描画の起点はfloatプロパティがleftの直前の要素（DIV要素1）の右横になり、左から順番に横に並べられます。それを解除したい場合は、解除したい要素（DIV要素3）のプロパティにclear: left;を指定します。 clear: left;が指定された要素（DIV要素3）のあとに続く要素（DIV要素4）にfloatプロパティでleftを指定すると、その描画の起点は前の要素（DIV要素3）の下の一番左端になります。

ブロックレベル要素の配置の例）

DIV要素1(float: left;)

DIV要素2 (float: left;)

DIV要素3 (clear: left;)

DIV要素4 (float: left;)

DIV要素5 (float: left;)

同様にfloatプロパティでrightを指定した場合、それを解除したい要素にclear: right;を指定します。尚、float: left;とfloat: right;とを解除したい場合はclear: both；を指定します。

clear:both;を指定する適当な要素が無い場合は、例えば改行要素にclear:both;を指定したりします。

改行要素でclearする例)

<br style="clear: both;">

↑

position プロパティ: 要素の座標値

左上を原点として、下方向にx-方向、右方向にy-方向の座標が定義されています。ブロックレベル要素の上のy-座標はtopプロパティ、下のy-座標はbottomプロパティで参照できます。ブロックレベル要素の左のy-座標はleftプロパティ、右のy-座標はrightプロパティで参照できます。

座標の原点は、positionプロパティの値によって異なります。以下、 http://www.htmq.com/style/position.shtml から引用します。

static: 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative: 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute: 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed: 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

↑

display プロパティ: 要素の表示の仕方

HTMLの要素にはインライン要素とブロックレベル要素の二通りに分けられるが、displayプロパティによって、どちらの要素として表示するかを指定できる。

display:

inline: インライン要素として表示
block: ブロックレベル要素として表示
none: 要素を非表示にする

↑

つづく

Last update: