はじめに
CSSに関して、ネットに転がっているソースを朧気な理解のままコピペしてきたが
この度仕組みをきちんと理解しようと基礎から勉強を始めたので、備忘録として残す
inherit
プロパティには自動で継承するものと継承しないものがある。
例えば…
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent{
color: green;
border: 1px solid;
}
.child{
}
</style>
</head>
<body>
<div class="parent">
yamada
<div class="child">
tarou
</div>
</div>
</body>
</html>
parentセレクタに指定したcolorプロパティは、小要素の方にも適用されているが、
borderプロパティは親要素にしか適用されない。
そこで、childセレクタを以下のようにすると…
.child{
border: inherit;
}
といった具合に、小要素にも適用される。
＊MDNには、borderプロパティには「継承なし」と記載されている
https://developer.mozilla.org/ja/docs/Web/CSS/border
width, height
width, heightの値を%指定（ちょっとした注意点）
width, heightともに、親要素に対する%の値を指定することができる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent{
border: 1px solid;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="parent">
yamada
</div>
</body>
</html>
上記の場合だと、parentクラスセレクタの親要素はbodyであるため、
見た目上、幅は50%になるが、高さは変わらないように見える
（開発者ツールで見るとcssはきちんと効いていることがわかる）
実際の例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent{
border: 1px solid;
width: 500px;
height: 500px;
}
.child{
border: inherit;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="parent">
yamada
<div class="child">
tarou
</div>
</div>
</body>
</html>
childクラスセレクタに関して、parentクラスセレクタに対してwidth50%, height50%が適用されていることがわかる
display
displayプロパティの主な値は以下の通りで、サイズの変更の有無は以下の通りである
| 値 | サイズの変更 |
|---|---|
| block | 可 |
| inline | 不可 |
| inline-block | 可 |
.block{
border: 1px solid;
width: 100px;
height: 10px;
}
.line{
border: 1px solid;
width: 30px;
height: 10px;
display: inline;
}
lineクラスセレクタはdisplay: inline;よりインライン要素となる。
lineクラスセレクタのwidthプロパティには30px、heightプロパティには10pxを指定しているが、
コンテンツ（a）の幅に添ったサイズとなってしまっている。
これを解消するには、displayプロパティにinline-blockを指定する
これで、セレクタで指定した値が反映される
position
その要素の位置を調整する際に用いる
↓基準となる位置
.pos1{
border: 2px solid red;
width: 100px;
height: 10px;
}
.pos2{
border: 2px solid blue;
width: 100px;
height: 10px;
}
.pos3{
border: 2px solid green;
width: 100px;
height: 10px;
}
relative
基準となる位置と比較して、どの位置となるかを指定する
.pos2{
position: relative;
top: 5px; left: 5px;
}
fixed
基準となる位置(ページの左上端)と比較して、どの位置となるかを指定し、固定する
.pos2{
position: fixed;
top: 5px; left: 5px;
}
pos3クラスセレクタが詰められていることにも注目
absolute
基準となる位置と比較して、位置を指定する
しかし、親要素のpositionの値によって挙動が変わる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pos1{
border: 2px solid red;
width: 100px;
height: 10px;
}
.pos2{
border: 2px solid blue;
width: 100px;
height: 10px;
}
.pos3{
border: 2px solid green;
width: 100px;
height: 10px;
}
.abs{
background:plum;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<div class="pos1"></div>
<div class="pos2">
<div class="abs"></div>
</div>
<div class="pos3"></div>
</body>
</html>
親要素のpositionがstatic（指定なし）のとき
ウィンドウの左端上を基準に、位置を指定する
.pos2{
border: 2px solid blue;
width: 100px;
height: 10px;
position: static;
}
.abs{
background:plum;
width: 10px;
height: 10px;
position: absolute;
top: 5px; left: 5px;
}
親要素のpositionがrelativeのとき
親要素の位置を基準に、位置を指定する
.pos2{
border: 2px solid blue;
width: 100px;
height: 10px;
position: static;
}
.abs{
background:plum;
width: 10px;
height: 10px;
position: absolute;
top: 5px; left: 5px;
}
verical-align
垂直方向の位置の調節を行う
例えば、文字とアイコンを並べて表示したいとき…
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="UTF-8">
<title>Document</title>
<style>
.back{
background: aqua;
}
</style>
</head>
<body>
<div class="back">Yamada Tarou<i class="material-icons">insert_chart</i></div>
</body>
</html>
アイコンが少し浮いてしまう。
文字やアイコンなどの要素は、ベースライン(baseline)と呼ばれる基準線を元に配置されるため、
このような現象が起こる
これを直すためには、アイコンの方のベースラインをいじる必要がある
.pos{
vertical-align: bottom;
}
