Sponsored Link
CSSの基礎
基本的なことをつらつら
▼参考
http://webdesignrecipes.com/css-visual-formating-model/
▼基本的なプロパティ
margin
padding
float
border
background
width
height
font
display
position
text
visibility
子セレクタ
セレクタ > 子セレクタ {}
セレクタ直下にある子セレクタに一致するスタイルが適用されます。
<body>
<h1>明日の<strong>天気</strong></h1>
<p>明日は<strong>晴れ</strong>です。<span>ときどき<strong>曇り</strong>となります。</span></p>
</body>
p > strong {
background-color: #f00;
}
■結果
p 要素直下に指定している、 strong 要素の「晴れ」部分のみに適用されています。
孫要素の「曇り」部分等には反映されておりません。
子孫セレクタ
セレクタ 子孫セレクタ {}
セレクタの下にある子孫セレクタに一致するスタイルが適用されます。
<body>
<h1>明日の<strong>天気</strong></h1>
<p>明日は<strong>晴れ</strong>です。<span>ときどき<strong>曇り</strong>となります。</span></p>
</body>
p strong {
background-color: #f00;
}
■結果
p 要素の下に指定している、 strong 要素（子要素）の「晴れ」部分と、
さらに下に指定してあるstrong要素（孫要素）「曇り」部分に適用されています。
「天気」部分等には反映されておりません。
複数セレクタ
セレクタ, セレクタ {}
記載されているセレクタのスタイルが適用されます。
<body>
<h1>明日の<strong>天気</strong></h1>
<p>明日は<strong>晴れ</strong>です。<span>ときどき<strong>曇り</strong>となります。</span></p>
<div>ここは適用されないよ</div>
</body>
h1, p {
background-color: #f00;
}
■結果
h1 要素と p 要素内の部分に適用されます。
隣接セレクタ
セレクタ + セレクタ {}
最初に記載されているセレクタの直後に隣接している、指定セレクタ（後ろに記載されているセレクタ）のスタイルが適用されます。
<body>
<h1>明日の<strong>天気</strong></h1>
<p>明日は<strong>晴れ</strong>です。</p><p>ときどき<strong>曇り</strong>となります。</p>
<h1>明後日の<strong>天気</strong></h1>
<p>明後日も<strong>晴れ</strong>です。</p>
<p>自信はないです。</p>
</body>
h1 + p {
background-color: #f00;
}
■結果
h1 直後にある p 要素部分に適用されます。
フレームワーク
- bootstrap
bootstrap.css
non-responsive.css
スプライト
- 概要
WEBサイトの読み込みを高速化するCSSの小技
具体的にはサイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする
▼参考 CSSスプライトについての説明サイト
http://lopan.jp/css-sprites/
▼ブロックボックスについて分かりやすそう
http://css-eblog.com/csstechnique/css-course.html#trackback
clearfix
floatプロパティを使用した際に、floatした要素の中身の高さが認識出来なくなります。
つまり、「height:0;」の状態となる為、その下にある要素は上に詰めていきます。
そこで高さを認識させる為に、「floatした要素」の後に擬似要素を追加して高さを認識させます。
<header id="header">Header</header>
<div class="main clearfix">
<div id="box1">サイドカラム</div>
<div id="box2">メインカラム</div>
</div>
<footer id="footer">Footer</footer>
.clearfix:after {
clear: both;
content: "";
display: block;
}
- 擬似要素がdiv要素の最後に追加される（:after）
- clearによって擬似要素が回りこみを解除する
- 擬似要素がサイドカラム・メインカラムの高さを認識し、下につく
- .divが子要素の高さを認識する
- footerがdivの下につく