長さ・大きさの単位
-px
-pt
-%
スタイルを指定しなかった時のボックスの幅やフォントサイズと比べて何％の大きさにするか指定する。ボックスはスタイルを適用しないとブラウザウインドウいっぱいの幅になる。そこで50%と指定すると、ブラウザウインドウの半分の幅になる
-em
1文字のサイズを表す。フォントサイズに依存。
-rem
ルート・エムと読む。<html>要素に指定されたフォントサイズを1remとする。
デフォルトは基本的に16pt。
マージン、パディング、ボーダー
-コンテンツ領域
ブロック内で、テキストや画像など要素の内容が確保する領域
-パディング
コンテンツ領域の外側で、ボーダーの内側の領域
-ボーダー
パディングの外側に引かれる枠線の領域
-マージン
隣り合うボックスとの余白を形成する領域
h2 {
color: #442220;
font-size: 18px;
border-bottom-width: 2px; /* ボックスの下線の太さ */
border-bottom-style: dotted; /* スタイルは点線 */
border-bottom-color: #442220;
margin-top: 20px; /* 上の余白 */
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 10px; /* コンテンツ領域の外側でボーダーの内側の領域 */
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
ブロックレベル要素とインラインレベル要素
段落を作るのがブロックレベル要素、<strong>などはインラインレベル要素
インラインレベル要素ではwidth,height,marginは無視される。
ダイナミック擬似クラス
:link 通常
:visited リンク先が訪問済み
:hover マウスポインタがリンクに乗っている
:active マウスボタンが押されている
この順に書かないと機能しない。
p {
line-height: 160%; /* 行送り */
}
a:link {
color: #6aa4d6;
}
a:visited {
color: #6aa4d6;
}
a:hover {
color: #4f7697;
}
a:active {
color: #aed3f2;
}
marginの折りたたみ
縦に隣接するボックスの上下マージンは大きい方だけが適用される
行揃え
ショートハンド・プロパティ
margin,paddingの指定を一行で済ませる。上から右回転
margin: 上 右 下 左;
text-align
left,center,rightなどを指定して行を揃える
h1 {
margin: 30px 0 30px 0;
padding: 0 0 0 0;
line-height: 0;
text-align: center; /* 中央揃え */
}
リンク付きイメージのボーダーを消す
リンクが付いてるとボーダーが表示されるのでこれを消す
img {
border-style: none;
}
リスト項目を横並びにする
/* すべてのページに適用 - navまわり - */
#nav li { /* 子孫コンビネータ */
display: inline; /* インラインレベル要素として表示=>横一列に */
list-style-type: none; /* 中黒の非表示 */
padding-right: 30px;
}
displayプロパティではブロックレベル要素をインラインレベル要素として表示することやその逆ができる。
list-style-typeプロパティでは中黒を別のものに変更する。
背景画像を指定する
background-image: url(画像のパス)
パスは""などで囲まない。
#nav {
margin: 0 0 0 0;
padding: 15px 30px 10px 30px;
background-image: url(../images/menu-bg.png);
}
リンクの下線をなくす
#nav li a:link {
color: #f5f3eb;
text-decoration: none;
}
text-decoration: none;でなくせる。
カスケード
優先順位に従って適用されるということを示す。
同じ優先順位の場合後から出てきたものに上書きされる。=>下の方のルールが適用される
上書きはプロパティ単位で行われる。
セレクタの優先順位は
タイプセレクタ < classセレクタ < idセレクタ
背景画像の繰り返し
background-repeat: repeat縦横に繰り返す
background-repeat: repeat-x 横方向に繰り返す
background-repeat: repeat-y 縦方向に繰り返す
background-repeat: no-repeat 繰り返さない
フォントサイズ
font-size: smaller; なども可能。
ページ全体を中央に配置する
<div class="wrapper">についてwidthプロパティを使って
autoにするとマージンの大きさは自動で調整される。
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #f5f3eb;
}
.wrapper {
margin: 0 auto 0 auto;
width: 900px;
}
フロート
float: leftなら、要素を可能な限り左上に配置する。
<p class="float"><img src="images/about-photo.jpg" width="259" height="269" alt="店舗写真">
KUJIRA cafeは、4月18日に九寺楽町にオープンしたカフェです。
皆様のお越しを心よりお待ちしております。</p>
<h2 class="clear">店舗情報</h2>
/* about.html */
.float img {
float: left;
padding-right: 1em;
}
.clear {
clear: both;
}
この例では、は親要素の
が形成するボックスの左上に配置されることになる。floatプロパティが適用された要素に続く要素はその要素を避けるようにして配置される。続く要素がテキスト、およびインラインレベル要素の場合は結果的に画像に回り込むようになる。
フロートの解除
基本はclearプロパティを使う。
clear: left;,clear: right;,clear: both;
の三種類。
clear: both;は、floatの値がleftでもrightでも解除する。
テーブルの外側にボーダーを引く
table.info {
border-collapse: collapse;
border: 1px solid #b78c5f;
}
テーブルの整形
table.info th, table.info td {
padding: 8px 8px 8px 8px;
border: 1px solid #d6c2b5;
text-align: left;
vertical-align: middle; /* テキストをセルの上下中央に表示 */
}
table.info th {
background-color: #c99e73;
color: #442220;
}
border-collapseは<th>,<td>のセルごとにボーダーを引くか、隣り合うボーダーを１本にまとめるか、どちらかを決めるプロパティ。
collapseとseparateの2つの値をとる。
collapseにするとセル同士のボーダーは１本だけ引かれる。
ボーダー のショートハンドプロパティ
border: 太さ スタイル 色;
各辺それぞれを指定するショートハンドプロパティもある。
overflowプロパティによるフロートの解除
フロートを適用したブロックの親要素にoverflow: hidden;を指定するとフロートが解除される。
<div class="menu_block">
<div class="menu_left">
(省略)
</div>
<div class="menu_right">
(省略)
</div>
</div>
/* menu.html */
.menu_block {
overflow: hidden;
zoom: 1; /* 古いIEでoverflowを使うためのもの */
}
.menu_left {
float: left;
width: 280px;
margin-ritht: 20px;
}
.menu_right {
float: left;
width: 600px;
}
ショートハンドプロパティの省略
margin: 上 右 下 左; =>4つのとき
margin: 上 左右 下; =>3つのとき
margin: 上下 左右; =>2つのとき
margin: 四辺; =>1つのとき