CSSメモ

## 文字系

### 文字の大きさ
px: 縦のピクセルの大きさで指定、Webページのメインの文章は15px~18pxくらいにするのがいいらしい

em: 現在のフォントサイズに対する倍率、現在の設定が10pxの時に2.0emを指定するとフォントサイズは20pxになる

### テキストの位置を指定する
```css
/* 真ん中によせ */
text-align: center;

/* 右側によせ */
text-align: right;
```

### 線で囲う
```css
/* 実線 */
border: solid 2px gray;
/* 点線 */
border: dotted 2px gray;
/* 破線 */
border: dashed 2px gray;
/* 二重線 */
border: double 5px gray;
```

上にだけ線を引く：border-top:〜
下にだけ線を引く：border-bottom:〜
左にだけ線を引く：border-left:〜
右にだけ線を引く：border-right:〜

### widthとheight
display: inlineはwidthとheightを指定することができない。
幅・高さが指定できるのは要素がdisplay:blockもしくはinline-blockのときだけ。

widthの初期値は**auto**となっており何も指定していないと要素幅は横いっぱいに広がっている。
display: inlineやinline-blockのときには、要素の幅＝要素の中身（テキスト）の長さとなる。親要素以上に自動で大きくなることはない。
親要素のwidth > 子要素の幅にしてはいけない

親要素６００pxの時、子要素50%にすると３００pxになる。

とくにCSSで指定しない限り、要素のheightの値はautoとなり、高さが自動で決まる。基本的に横いっぱいに広がるwidth: autoと異なり、height: autoは縦いっぱいには広がらず、文字や画像などの要素の中身の分だけの高さになる。

### min-width

```css
/* 要素が100pxより小さくならないという意味 */
p {
min-width: 100px
}
```

### max-width

```css
p{
/* 要素が２００pxより大きくならない */
max-width: 200px;
}
```
画像の横縦比を保つ方法

```
height: auto;
```

## merginとpadding

要素の中身があるその周りの余白が**padding**
paddingを超えると**border**が存在する
borderを超えると**margin**が存在する

要素に背景色を指定しているとき、paddingの部分も背景色で塗られる

```css
margin: 10px 10px 10px 10px;
/*      　上　 右　　下　　左*/

margin: 10px 0;
/* 上下・左右を指定 */

```
時計回りに指定していく。

margin-bottomと、margin-topが並ぶと片方のmarginが無効になる。適用されるmarginは値が大きい方が優先される。

しかしpaddingでは相殺は起こらない。

marginを使って要素を左右中央に配置する

```css
margin-left: auto;
margin-right: auto;
```

## display

displayはプロパティの１つで**要素の表示形式**を決めるもの。

```php
/* displayの値 */
block
inline
inline-block
none
flex
```
block・・・要素が横いっぱいまで広がり縦に並んでいく
inline・・・要素が横に広がっていく
inline-block・・・blockとinlineの中間
none・・・非表示
flex・・・要素が平行になる

pタグの初期値はblock

blockの場合だと```text-aline: center; ```で中央揃えができない。中身の文字などは中央揃えにできる。
 
display: inlineだと**spanタグやimgタグ**が初期値として設定されている。要素の前後には改行が入らずに横に並ぶ。

blockの中にinlineの要素が入る。逆にinlineのなかにblockの要素が入ることはない。
inlineの要素は**幅と高さ**を指定することができない。
**上下の余白**を調整することができないが**左右のpaddingとmargin**を指定することができる。

inlineの要素は ```text-align vertical-align```を指定することができる。 
親要素に対して中央寄せを指定する必要がある。

aタグなどの初期値がinlineのものは直接指定すればblockに抱えることができる。そうすることで縦横の調整をすることができる。

## display: inline-block

要素の並びがinlineで要素の中身はblock的な性質を持っている。inlineとは異なり幅と高さの指定ができる。上下左右の指定もできる。

inline-blockの使い所
・ナビゲーションバー
・ツイッターボタンとか横に並べたいとき

## display: none;

display: none;を指定したものは、画像でも文字でも非表示にすることができる。しかし読み込み速度が早くなるわけではない。

レスポンシブデザインを作成するときに便利。スマホでの表示の時に非表示にすることができたりする。

## フォントサイズの変更

```css
font-size: ○○px or ○○em
```

## 文字色を変える

```css
color: 色名 or カラーコード
```

## 太字にする
```css
font-weight: bold;
```

## 斜体にする
```css
font-style: italic;
```

## 行間を変える
```css
line-height: 値;
```

## 文字の間隔を変える
```css
letter-spacing: ○○em;
```

## 文字に下線を引く
```css
/* この方法では下線の色と太さを変えることはできない */
text-decoration: underline;
```

## 取り消し線を引く
```css
text-decoration: line-through;
```

## 文字を実線の枠で囲む
```css
border: solid 線の太さ 色
```

## フォントの種類の変更
```css
font-family: フォント名;
```

## 文字の位置を変える
```css
text-align: center 
```

## 文字に影をつける
```css
text-shadow: 影の右への長さ 下への長さ ボケ具合 影の色
```

## 不透明にする
```css
opacity: 値;
```

## aタグで作成したリンクの下線を消す
```css
text-decoration: none;
```

## マウスカーソルを乗せたときのデザインを変える
```css
a:hover {~}
```

## 箇条書きの仕方

**ul・li**はセットで使う。

```css
<ul>
  <li>項目</li>
</ul>
```

ulの代わりにolを使うと**番号付きの箇条書き**になる。

## positionとは
要素の位置を決めるためのプロパティ（例えば要素の位置を20pxだけ右に動かしたり要素の上に別の要素を重ねて乗せることができる、画面の決まった位置に要素を固定して表示させることもできる）

```css
要素{position:
/* 初期値、指定することはほとんどない */
static

/* 現在の位置を基準に相対的な位置を決める */
relative

/* 親要素を基準に絶対的な位置を決める */
absolute

/* 画面の決まった位置に固定する */
fixed
}
```

### positionとセットで使うもの

```css
/* 基準の上からの距離 */
top:

/* 基準の下からの距離 */ 
bottom:

/* 基準の左からの距離 */
left: 

/* 基準の右からの距離 */
right:
```

``` position: relative ```はtopやbottomを指定しなければstaticと同じ位置に表示される。z-indexやtopなどが指定できないときはrelativeにする。

``` position: absolute ```親要素を基準に、絶対的な位置を指定することになる。要素がどんな形であろうと、間に他の要素や余白が入っていようとその位置に配置してくれる。
absoluteを使って位置調整するときは親要素にposition: relativeを指定しておく。

### position: fixed
画面の決まった位置に要素を固定させたい時に使う
これを利用すると画面をスクロールしても表示位置は変わらない

## z-index
```css
z-index: 数字;
```
指定した数字が大きい順に要素が重なっていく。ただし**position: static**の時は使えない、よってpositionプロパティの初期値の場合はz-indexが効かないのでもしz-indexで躓いたらここを疑ってみる。

## overflow

**overflow**とは要素のボックスから**はみ出た部分をどう扱うか**を指定する

```css
overflow: 

/* 初期値はみ出た部分がはみ出たままの状態で表示される場合がある */
visible

/* はみ出た部分が隠れる */
hidden

/* はみ出た部分が隠れてスクロールできる状態になる */
scroll

/* スクロールできる状態になる */
auto
```
### overflow: visible
はみ出た部分がそのまま表示される。初期値のため書かなくてもいい。

## overflow: hidden
要素のボックスからはみ出た部分は見えなくなる。スクロールしても表示されない

## overflow: scroll
はみ出た部分が隠れスクロールにより表示できるようになる。

```css
/* 横方向にスクロールできるようになる */
white-space:nowrap;

/* 縦方向にスクロールできるようになる */
overflow-y: scroll;

/* 横方向は非表示になる */
overflow-x: hidden;
```

## overflow: auto
はみ出た部分の処理をブラウザに委ねる。ほとんどの場合はscrollと同じような処理になる。

## 表の作り方
table: 表全体を挟む
tr: 行全体を挟む
th: trの中で使う。挟まれた部分は見出しセルとなる
td: trのなかで使う。挟まれた部分が表の中身のセルになる。

## GoogleFonts
GoogleFontsのメリット・・・使用端末によって使用できないフォントが存在する可能性があるため、統一した文字を表示させることができない。
しかしGoogleFontsならサーバーから読み込むため、どの端末でも共通のフォントを表示させることができる。