CSS
ドキュメント (XHTML)
ドキュメント (CSS)
リファレンス
プロパティ & セレクタ (CSS)
|
+
|
サイズの単位… |
サイズの単位
| 相対単位 |
| em |
現在のフォントサイズを1とした相対指定 |
| ex |
現在の英字の"x"のサイズを1とした相対指定 |
| % |
現在のフォントサイズや画面サイズを100%とした相対指定 |
| 絶対単位 |
| px |
ピクセルで指定 |
| pt |
ポイントで指定 |
| pc |
パイカで指定 |
| in |
インチで指定 |
| cm |
センチメートルで指定 |
| mm |
ミリメートルで指定 |
(1pt = 1/72in , 1pc = 1/6in , 1in = 2.54cm)
インチやセンチメートルなどでの指定は画面上ではかなり不正確です。また、厳密には%は別物なのですが、説明上ここに入れておきます。ときどき%が使えない事があるのはそのためで、リファレンスではその都度「(%は無効)」と表記しています。
|
|
+
|
セレクタの種類… |
セレクタの種類
| 名前 |
セレクタの書式 |
スタイルを適用する対象 |
使用例 |
| 要素型セレクタ |
要素名 |
指定した要素 |
p {color:blue;} |
| 全称セレクタ |
* |
すべての要素 |
* {color:blue;} |
| classセレクタ |
要素名.クラス名 |
クラス名を付けた要素 |
p.sample {color:blue;} |
| idセレクタ |
要素名#id名 |
id名を付けた要素 |
div#sample {color:blue;} |
| 擬似クラス |
要素名:link |
未訪問のリンク先 |
a:link {color:blue;} |
| 要素名:visited |
訪問済のリンク先 |
a:visited {color:blue;} |
| 要素名:hover |
カーソルが乗っている要素 |
a:hover {color:blue;} |
| 要素名:active |
クリック中の要素 |
a:active {color:blue;} |
| 要素名:focus |
フォーカスされている要素 |
input:focus {background:blue;} |
| 要素名:first-child |
要素内の最初の子要素 |
p:first-child {color:blue;} |
| 要素名:lang |
特定言語の要素 |
p:lang(en) {color:blue;} |
| 擬似要素 |
要素名:first-line |
要素の最初の一行 |
p:first-line {color:blue;} |
| 要素名:first-letter |
要素の最初の一文字 |
p:first-letter {color:blue;} |
| 要素名:before |
要素の直前 |
blockquote:before {content:"『";} |
| 要素名:after |
要素の直後 |
blockquote:after {content:"』";} |
| 属性セレクタ |
要素名[属性名] |
特定の属性を持つ指定要素 |
a[target] {color:blue;} |
| 要素名[属性名= "属性値"] |
特定の属性値を持つ指定要素 |
a[target]="_blank" {color:blue;} |
| 要素名[属性名~= "属性値"] |
属性値候補と一致した要素 |
p[class~="sample"] {color:blue;} |
| 複数のセレクタ |
セレクタ,セレクタ |
複数のセレクタ |
h1, h2 {color:blue;} |
| 子孫セレクタ |
セレクタ セレクタ |
下の階層の子孫要素 |
p strong {color:blue;} |
| 子供セレクタ |
セレクタ>セレクタ |
直下の階層の子供要素 |
p > strong {color:blue;} |
| 隣接セレクタ |
セレクタ+セレクタ |
直後に隣接している要素 |
h1 + p {color:blue;} |
|
レイアウト (CSS)
|
+
|
margin、padding、borderの関係… |
margin、padding、borderの関係
|
|
+
|
divをfloatさせる… |
divをfloatさせる
|
|
+
|
画面の幅… |
画面の幅
width, min-width, max-width
border, padding, margin
PC画面解像度
|
+
|
どのくらいの幅がいいか？ |
ウチでホームページを制作する場合は、固定幅の場合は大体横幅は７００ｐｘ（ピクセル）の後半から８００ｐｘの前半くらいでレイアウトします。
そして横幅だけで見ても、やはり１位は1024で、全体の約42％を占めています。２位は僅差で1280、これは約38％。この２サイズだけで、80％を占めていることになります。すべての画面に最適にすることは難しいので、やはり大は小を兼ね、「より狭くて数の多いものに合わせる」のがよいです。つまり、1024の横幅でおさまるように設計すれば、1280以上の解像度で見ても横スクロールは出ないので、1024以上の幅にならないようにすることが必要だということになります。
ブラウザには枠やスクロールが存在するのでSVGA(横幅800px×高さ600px)のユーザー用に800px限界に作ってしまうと、横スクロールが表示されてしまいます。実際の表示可能領域は760px×420程度ですので注意してください。
横幅は、自由に決めても良いですが、800pxを超えると、パソコンによっては横スクロールがでることがあり、とても見にくくなるので今回は750pxにしました。縦幅は、コンテンツの量によって自動で変化させるので、指定しません。
|
|
+
|
CSSで画面の最小・最大幅を指定する |
min-width: 800px; /* 800px以下にならない。800px以下の画面ではスクロールバーが出る */
max-width: 1000px; /* 1000px以上にならない。 */
|
|
position
background (CSS)
|
+
|
背景画像の固定… |
背景画像の固定
まとめ
- background-attachment:scrollの場合、背景画像の基点は要素の左上端になる。
- background-attachment:fixed の場合、背景画像の基点は表示領域の左上端になる(背景画像は表示領域に対して固定される)。
|
overflow
半角文字列は折り返さないが、全角文字列は折り返す。
XHTML1.1
CSSのテクニック
|
+
|
<h1>に画像を使う… |
<h1>に画像を使う
「display:none」と「visibility: hidden」と「text-indent」の違い
display: none;
要素を非表示にし、要素の描画領域は確保されません。
visibility: hidden;
要素を不可視にし、要素の描画領域は確保されます 。内容を透明にして表示するという感じです。
text-indent: -9999px;
テキストを画面の外にすっ飛ばすということです。
|
|
+
|
画像の枠を消す… |
画像の枠を消す
|
+
|
img要素で… |
a img {
border-style:none;
}
|
|
+
|
クラスで… |
.no_border {
border-style:none;
}
<img src="～" ait="banner" class="no_border" />
|
|
|
+
|
CSSで垂直中央に表示する… |
CSSで垂直中央に表示する
|
ソフトウェア
