スタイルを継承を理解しよう
継承されるかどうか調べるときはMDNの仕様書を見る。
継承されないプロパティ例えばborderを子要素にも継承したかった場合、
子要素にinheritというキーワードを使う。
p{ border:inherit; }
デベロッパーツールを使ってみよう
要素を調べるとき、
デベロッパーツールを開いてCSSをクリックor矢印をクリック
または開いていないとき要素を右クリックして検証で見ることができる。
Comptedタブはプロパティをまとめてみることができる。
テキストにスタイルを設定しよう
h1を細字にする
h1{ font-weight:nomal; }
打ち消し線
p{ text-decoration:line-throught; }
下線
p{ text-decoratuion:under-line; }
line-heightで行の高さを調整しよう
line-heightを文字サイズの３倍にしたかった場合、１文字分を表すemという単位を使う。
単位なしの場合でも指定されたfont-sizeの３倍になる。
単位なしでline-heightを指定しよう
親要素と子要素でfont-sizeをそれぞれ指定した場合、line-heightは継承されるプロパティのため
line-heightにemの単位を使ったときは親要素のfont-sizeが適用される。
単位をつけなければそれぞれ指定したfont-sizeが適用される。
vertical-alignで位置を調整しよう
vertical-alignhは英字が土台となる線のこと
デフォルト値
vertical-align:baceline;
例えば画像を文字と文字の中央に配置したかった場合、
img{ vertical-align:middle; }
ただしインライン要素とテーブルセル要素に有効
RGBAを使った色の表現方法を覚えよう
それぞれRed, Green, Blue, Alpha（透明度）のことで
RGBは０から255まで、Alphaは０から1の数値で指定する。
HSLAを使った色の表現方法を覚えよう
それぞれHue, Saturation, Lightness, Alphaのことで
Hueは色相で０～３６０
Saturationは彩度で０％ならくすんだ色、１００％なら鮮やかな色
Lightnessは明度で０％暗い色、１００％なら明るい色
リストをスタイリングしてみよう
箇条書きリストの"ul" 順序付きリストの"ol"
記号の種類を変えたいときは
list-style-typeを使う。
調べたい場合はMDNで調べる。
リストを内側に配置したい場合、
list-style-position:inside;
記号の代わりに画像を使う場合、
list-style-img:url();
一括指定プロパティを使ってみよう
list-styleは半角空白区切りで一括指定できる。
※注意点
プロパティによっては書く順番が重要になることもある
list-styleプロパティでは任意の順番でキーワードを指定することができて、
list-style-typeとlist-style-imageを指定した場合
list-style-imageが優先される
width,heightを設定してみよう
div要素の場合、デフォルトでwidthは
親要素の幅いっぱい、高さはコンテンツの高さになっている
文字が要素からはみ出す場合
over-flow:hidden;
であふれた部分を隠すことができる。
また、
over-flow:scroll;
で領域内をスクロールできる。
利用規約等に活用する。
borderで境界線をつけてみよう
borderの無効化
border:none;
レスポンシブデザインを作るときに使う
paddingで内側の余白をつけよう
一括指定プロパティで４つの値を指定した場合、上から時計回り
３つの値を指定した場合、順番に上、左右、下
２つの値を指定した場合、順番に上下、左右
marginで外側の余白をつけよう
autoを指定した側に余白を割り当てられる。
marginの相殺を理解しよう
例えば、上の要素にmargin-bottom:30px;
下の要素にmargin-top:10px;
と指定した場合、下の要素で指定したmargin-topは反映されない。
これは垂直方向でmarginが重なると、小さい方が打ち消されるためである。
displayプロパティについて理解しよう
display:block
<h1> <div> <p> <section>など
・ページが追加されたときに下に追加される
・サイズの変更有効
display:inline;
<img> <a> <span> <input>など
・ページが追加されたとき左詰めに追加される
・サイズの変更無効
※サイズの変更を巣たい場合はdisplay:inline-block;にする。
z-indexで重なり順操作しよう
z-indexはpositionがstatic以外の要素に使える。
box-sizingを使ってみよう
通常boxモデルのwidthとheightはpaddingとborderは含まれていないが、
box-sizing:border-box
でwidthとheightがpaddingとborderを含めることができる。
例えば、borderをつけた要素が他のボックスとずれた場合、
borderをつけた要素にborder-boxをつけることにより
簡単に直すことができる。
calcで単位が違う計算をしてみよう
ブラウザ幅を変えてもボックスの間隔が常に20pxになって、
なおかつそれぞれのボックスの幅が同じになるようにしたかった場合
ボックスの幅をｘとすると
3x + 40px = 100%
x = (100% - 40px) = ÷ 3
⇓これをcalcに入れる
width:calc((100% - 40px) / 3);
calcを使うとき注意点
※四則演算は + - ＊ / とする
※演算子の前後には必ず半角空白を入れる
要素に影をつけてみよう
box-shadow:10px 10px 3px 10px rgba(0, 0, 0, 0.3);
pxは順番に、
x軸、y軸、ぼかし具合、影の大きさを指定できる。
文字に影をつける場合は
4番目の影の大きさは指定できない。
text-shadow:10px 10px 3px rgba(0, 0, 0, 0.3);
背景のスタイリングをしていこう
backgroundにurlを指定したとき
デフォルトでは左上を起点に伸縮されるが、
画像の中心を起点にしたい場合は
background-position:center;とする。
また、背景は一括指定プロパティを使うことができる。
１つだけルールがあって、 back-ground-sizeとpositionは
まとめて指定する必要があり、/（スラッシュ）で区切る。
その他は順位不動で指定ができる。
background: center/cover pink url();
floatを使ってみよう
画像にfloat:right;を使った場合、
下の要素は画像がなかったように上に詰めて配置されてしまう。
画像とは関係のない要素の場合画像より下に配置させたいため
下の要素に
clear:right;
と指定する。
なお、左にflroatさせた場合はclear:left;
両方にfloatさせた場合はclear:both;を指定する。