More than 5 years have passed since last update.

よく使いそうなCSS

Last updated at 2020-02-21Posted at 2020-01-23

よく見るfont-family

@charset "utf-8";

body {
    font-family: Arial, sans-serif;
  }

複数書く理由はOSによって入っているフォントが異なるため。
左のものから優先的に使用される。

個々のフォント名ではなく、フォントのカテゴリーを指定するもの。
もし指定したフォントが全く入っていなかった場合にせめてこういう系統のフォントを表示してほしいと伝えるためのもの。

body {
      box-sizing: border-box;
  }

こうすることでwidthとheightがpaddingとborderを含めるようになる。

どのタグでもページにテキストが配置されると、
行ごとに行ボックスと言われる四角い領域がline-heightプロパティで設定される。
テキストの大きさはfont-sizeで設定し、文字は上下中央に配置される。

文字サイズの3倍にしたい場合はemを使う。単位なしで指定すると子要素に値が継承されない。

p {
  font-size: 16px;
  line-height: 48px;
  line-height: 3em;
  line-height: 3; 
  background-color: pink;
}

# box1 {
    overflow: hidden; /*隠れる*/
    overflow: scroll; /*スクロールバーがつく*/
  }

# btn.disabled {
    opacity: 0.5;
  }

  input[type=text] {
    width: 100%;
    height: 100%;
  }

absolute:基準の位置が「親要素」
fixed:基準の位置が「ウィンド全体」

※absolute注意点
子要素をabsoluteにした場合、親要素に必ずrelative(もしくはfixed)を指定しておく

displayプロパティにflexを指定する。
Flexboxはmarginの相殺が起きない。
Flexboxにおけるレイアウトは、主軸と交差軸により決定され、初期状態ではヨコが主軸、タテが交差軸となる。
- 主軸の並びはjustify-contentプロパティで指定する。
- 交差幅の並びはalign-itemsプロパティで指定する。
ボックスを複数行に並べる
- 初期設定では、ボックスは親要素の幅にかかわらず一行に並ぶ。設定を変えるにはflex-wrapプロパティの値を変える。
  - nowrap:ボックスを単一行に配置
  - wrap:ボックスを複数行に配置
- ボックスごとの高さは揃う。これはalign-itemsプロパティの初期値(strech)によるもの。
ボックスの並び方向
- 初期状態ではボックスは横方向に並ぶ。並び方向を変更するにはflex-directionプロパティを用いる。

.container {
  display: flex;
  justify-content: center; /*主軸方向で中央*/
  align-items: center; /*交差軸で中央*/
}

左右にautoを指定すると、左右中央に要素を配置できる。

.foo {
  margin: 0 auto;
}

imgタグはインライン要素であり、テキストが配置されるときの基準であるベースラインを基準に配置される。そのへんのスタイルをいじるにはvertical-alignの設定をすると解決する

例)画像の下の余白を埋めたいとき

img {
  vertical-align: bottom;
}