技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

CSSのチートシート 後編

CSSチートシート 後編

CSSチートシート 中編の続き

文字の配置

文字の配置はtext-alignタグを利用すればOK(あくまで文字のみ)

 - left
 - right
 - center
 - jistify (両端そろえ。スペースの調整もしてくれる)
p {
  text-align: right;
}

f:id:lhiroki1205:20190323131909p:plain

リストの表示方法

1. list-style-type

ulで指定が可能なもの

-disc     : 円形
-circle   : 中空円
- square  : 塗りつぶされた四角

olで指定が可能なもの

-decimal          : 数値
-lower-roman : ローマ数字小文字)

2. list-styel-position

-inside      :ブロックの内側
-outside    :ブロックの外側
- inherit     :親要素の指定を継承
ul {
  list-style-type: square;
}

ol {
  list-style: lower-roman
}

f:id:lhiroki1205:20190323132827p:plain

display

HTML要素をどのように表示するかを決める

- block: ブロック要素として表示する
- inline: インライン要素として表示
- inline-block: インラインとしてブロック要素を表示(ブロックした適用できないCSSを指定できるようになる)
- none: 表示しない

visibility

HTML要素をどのように見せるかを決める

- visible: そのボックスを表示させる
- hidden: そのボックスを非常にさせる

boxのサイズの考え方(divとか)

min-width / max-width と min-height / max-height

min-〇〇
-> 最小でもこのサイズより小さくならない
max-〇〇
-> 最大でもこのサイズより大きくならない

box-sizing

ボックスのサイズの算出方法を決めるオプション

- content-box: padding/borderを幅や高さに含めない
- border-box: padding/borderを幅や高さに含める

overflow

文字があふれた時の考え方

- visible: はみ出して表示
- scroll: スクロールバーは表示
- hidden: はみ出した部分は隠す

postion

参考サイト 位置を決める基準の指定方法

- static : 配置の方法を決めない(通常通り)
- absolute : 絶対値
- relative : 相対位置
- fixed : 絶対値への配置(スクロールしても固定)

位置を決めるオプション

- top
- bottom
- right
- left

z-index

奥域を指定する場合にz-indexを利用する。

css
.top {
  background-color: red;
  color:white;
  position: absolute;
  top: 10px;
  left: 10px;
}

.middle {
  background-color: yellow;
  color:black;
  position: absolute;
  top: 40px;
  left: 40px;
}

.bottom {
  background-color: pink;
  color:black;
  position: absolute;
  top: 60px;
  left: 60px;
}

f:id:lhiroki1205:20190323193629p:plain topを前に持ってきたい場合はtopにz-indexをつけてあげる

.
.
.
.top {
  background-color: red;
  color:white;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;  <---- z-indexを指定
}
.
.

Topが前に出てきた f:id:lhiroki1205:20190323193632p:plain

背景指定方法

1. background

いくつもの背景の設定を指定する

2. background-color

いくつもの背景色の設定を指定する

  <div class="sketch-image"></div>
.sketch-image {
  width: 700px;
  height: 500px;
  border-radius: 10px;
  background-color: blue; <- 追加
}

3. background-image

いくつもの背景画像の設定を指定する。 書き方はurl('画像へのパス)

.sketch-image {
  width: 700px;
  height: 500px;
  border-radius: 10px;
  background-image: url(image.jpeg); <- 追加
}

画像の繰り返しが必要のない場合はbackground-repea設定が有効

background-repeat: no-repeat;

背景設定の一括方法はbackgroundが便利。

1. 画像選択
2. リピート設定
3. 位置設定

これを一気に設定できる。

  background: url(image.jpeg) no-repeat 350px 300px;

背景指定の応用

上記で背景設定を記載しましたが。もう少し応用もあります。

1.background-repeat

- no-repaet : 繰り返さない
- repeat: 縦横に繰り返す
- repaet-x : 横方向のみに繰り返す
- repaet-y :縦方向のみに繰り返す

2. background-position

背景の表示位置を指定する

■ キーワード方式
- center
- top
- bottom
- left
- right

■ %
画面左上を基準にそのBOX から何%のいちから開始するのかを指定する。

■ 数値
単位をつけて数値で明確化する

3.background-attachment

画面をスクロールするときに、背景画像をどのように表示するか

- fixed 
背景画面の位置が固定されてスクロールしても動かない
- scroll
スクロールに従って、背景位置も移動する
- local
そのboxのスクロール位置に合わせて移動する

4.background-size

-contain
縦横比は保持、背景領域に収まるように最大になるように拡大、縮小する。

-cover
縦横比は保持、背景領域に完全に覆う最小サイズになるように拡大、縮小する。

5.background-clip

- border-box
背景をボーダーボックスで適用する

- padding-box
背景をバディングボックスで適用する

- content-box
背景をコンテントボックスで適用する

影をつける方法

box-shadow

画像などに影をつけたいときに利用する

- 水平方向の影のオフセット値
- 垂直方向の影のオフセット値
 box-shadow: 20px 20px;