CSSプロパティの個人的まとめ
line-height
行間を指定する時に使います。
line-heightの値には、文字サイズ × 行間の数値を単位なしでしているることが推奨されます。
line-heightの計算式
行間のサイズ（px） / フォントサイズ(px)行間のサイズ27px、フォントサイズ18pxの場合、line-heightは1.5になります。
letter-spacing
文字間隔を指定します。
画面幅にあわせて変化する文字サイズを加味して、文字感覚を自動で変わるようにemを指定します。
1em=1000となるため、計算する場合は
文字感覚のサイズ(px) / 1000文字感覚が10pxの場合、letter-spacingの値は0.01emとなります。
emについて
「em」は文字で使う単位となります。
文字サイズ（font-size）に指定した「em」は親要素の文字サイズが起点になります。
親要素が20pxの時、0.5emで指定すると10pxとなります（1emで親要素と等倍です）。
しかし、
文字サイズ以外に「em」を指定する場合は、同じ要素の文字サイズ(font-size)が起点となります。
font-weight
font-weightの値は100から900までの100刻み数値を指定できる。
400はnormal、700はboldと同じ太さになる。
| 数値 | 名前 |
|---|---|
| 100 | Thin |
| 200 | Extra Light |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold |
| 700 | Bold |
| 800 | Extra Bold |
| 900 | Black |
vertical-align
インライン要素や表のセルに対して、縦方向の整列を指定します。
上揃えや、中央揃えなど。
background-repeat
背景画像の繰り返しを指定します。
デフォルトでは、繰り返して表示する設定になっています。
繰り返さない場合は、no-repeatを指定します。
.background-repeat {
background-repeat: no-repeat;
}background-size
背景画像の大きさを指定します。
数値で指定する方法と、coverやcontainで指定できます。
/* 幅と高さを数値で指定 */
.background-size1 {
background-size: 100% 100%;
}
/* 表示域に収まる最大サイズ */
.background-size2{
background-size: contain;
}
/* 表示域を覆う最小サイズ */
.background-size3{
background-size: cover;
}background-position
背景画像の位置を指定します。
数値での指定やcenter、rightなどの指定方法があります。
border-collapse
表の中の枠線を重ねるか離しすか指定できます。
See the Pen Untitled by takano999 (@takano999) on CodePen.
box-shadow
ボックスに影をつけます。
指定方法は、
box-shadow: [左右方向] [上下方向] [ぼかし具合] [広がり具合] [色] [内外];See the Pen Untitled by takano999 (@takano999) on CodePen.
margin
marginは、 お互いの 「margin が相殺する」 という特別な性質を持っています。
例えば、兄弟要素の<div>が二つ並んでいて、
上の<div>が「margin-bottom: 10px;」
下の<div>が「margin-top: 30px;」
と指定されている場合、大きい方が優先されて「margin-top: 30px;」が適用されます。
display
display: block
ブロック要素にします。
要素は横幅いっぱいになり、幅・高さ・余白などの調節ができます。
display: inline
インライン要素にします。
要素は横にならび、幅・高さなどの調節ができません。
display: inline-block
インラインブロック要素にします。
幅・高さ・余白、text-alignなどの設定ができるブロック要素をインライン要素のように横に並べることができます。
display: table
要素にtableタグの特徴を持たます。
Flexboxを使う
display: flex
指定した要素がflexコンテナ、子要素がflexアイテムとなります。
flex-direction
flexアイテムの並ぶ方向を指定します。
| プロパティ | 並び順 |
|---|---|
| row（デフォルト） | 横並び |
| row-reverse | 逆向きの横並び |
| column | 縦並び |
| column-reverse | 逆向きの縦並び |
justify-content
flexアイテムの主軸方向の整列を指定します。
| プロパティ | 整列方向 |
|---|---|
| flex-start | 左寄 |
| flex-end | 右寄せ |
| center | 中央寄せ |
| space-between | 両端揃えの均等配置 |
| space-around | 余白を均等にする |
align-items
flexアイテムの交差軸方向の整列を指定します。
align-items を指定をしない場合、flexアイテムの高さはflexコンテナ内で100%になります。
| プロパティ | 説明 |
|---|---|
| baseline | ベースライン揃え・コンテンツ量によって高さが変動 |
| flex-start | 上揃え・コンテンツ量によって高さが変動 |
| flex-end | 下揃え・コンテンツ量によって高さが変動 |
| center | 中央揃え・コンテンツ量によって高さが変動 |
| stretch | コンテンツの量や大きさによらず高さが揃う |
flex-wrap
flexアイテムの折り返しを指定します。
デフォルトでは「nowrap」で折り返しなし。
「wrap」で折り返し有りになります。
order
flexアイテムの表示順を指定します。
（-）を含む整数値を指定でき、小さい順に表示されます。
column-gap
flexアイテムの要素間の横方向の余白を指定します。
row-gap
flexアイテムの要素間の縦方向の余白を指定します。
box-sizing
要素の幅と高さを計算するボックスモデルのルールを変更します。
content-boxはボックスの幅にpadding（余白）とborder（ボーダー）の幅は含みません。デフォルトの値になります。border-boxはボックスの幅にpadding（余白）とborder（ボーダー）の幅を含みます。
コメント