すぐ忘れちゃう系CSS

ときどき更新。
# transform

## 移動

```
transform:translate()
```

### 移動させて上下中央

```
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
```

# IE10以降でselectの矢印ボタンを非表示

```
select::-ms-expand {
	display: none;
}
```

# input[type=number]でSpinnerを出さない

```
input[type=number] {
    -moz-appearance:textfield; //Firefox対策
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    appearance: none;
}
```

参考：[jquery \- Hide Spinner in Input Number \- Firefox 29 \- Stack Overflow](https://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29)

# flex

## 上下中央

```
align-items: center
```

# 否定

## classがないとき

```
Ele:not(.isActive)
```

# transform系

## rotate：回転

```
//反時計回りに90度
transform: rotate(90deg)

//時計回りに90度
transform: rotate(-90deg)
```

## transform-origin：変形の中心

デフォルトは50%,50%


# iphoneやiPadでスクロールを表示

```
::-webkit-scrollbar    //スクロールバー全体        
::-webkit-scrollbar-button      //ブラウザによって違いますが上下の矢印
::-webkit-scrollbar-track       //スクロールバーのある部分
::-webkit-scrollbar-track-piece      //スクロールバーが表示されてない部分
::-webkit-scrollbar-thumb      //スクロールバー本体 
::-webkit-scrollbar-corner      //角のとこ    
::-webkit-resizer                    //角のとこ
```

参考：[(K)iPhoneでもスクロールバーを表示させて、カスタマイズする方法はWebkitで | web(K)campus](http://webkcampus.com/201409/712/)

# フォームの変な色系
## [【Chrome】オートコンプリートのとき、背景を黄色（もしくは水色）にしない \- Qiita](https://qiita.com/ituki_b/items/094ca16e4ca3f17d8982)

## Safariでinput:disabledの時のcolorが淡く見える

```scss
//css
input:disabled {
    color: [テキストの色];
    -webkit-text-fill-color: [テキストの色];
    opacity: 1;
}

//scss
@mixin disabled-color($color) {
    color: $color;
    -webkit-text-fill-color: $color;
    opacity: 1;
}
```

# 改行系

## 単語で改行

```
word-break: keep-all
```
## 改行禁止

```
white-space: nowrap;
```

## 長い単語やURL,アドレスを改行

```
word-break: break-all;
word-wrap: break-word;
```

### flex内で改行が効かない時（特にIEとか）

```
word-break: break-all;
width: 100%; //flex:1の時はこれで。それ以外の時は適宜指定
```

参考：[\`word\-wrap:break\-word;\`がflexboxで効かない件 \- Qiita](https://qiita.com/yuji38kwmt/items/ba8d59eb0abef1956bae)

# テキストを1行で…省略

```
width: XXXX; //必ず指定
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
```

## display: flexのとき（直接）

どうやっても効かないようなので、```display: table-cell```などに変更する

## display: flexのとき（子要素）

```
width: 100%;
```

[html \- text\-overflow ellipsis not working in nested flexbox \- Stack Overflow](https://stackoverflow.com/questions/39838908/text-overflow-ellipsis-not-working-in-nested-flexbox)

## 複数行で…
```
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
```

# 無効系

## フォームのデフォルトスタイルを無効にする

```
appearance: none
```

## 画像や文字を選択させない

```
user-select: none
```

## スマホで長押しのポップアップ無効にする

```
-webkit-touch-callout: none;
```

## スマホでテキスト長押しの選択ボックスを無効にする

```
webkit-user-select: none;
```

## 要素のクリック動作を無効にする

```
pointer-events : none;
```

## animationの終了時に終了時の状態を維持する

animation-fill-modeをforwardsにする

```
animation: anim 2.5s ease-in-out .5s forwards;
```

参考：[keyframeアニメーション終了時に終了時の状態を維持する \- みかづきブログ その3](http://kimizuka.hatenablog.com/entry/2015/07/04/000000)

# テキストの下線のスタイル調整
## 色を変える

```css
text-decoration-color: blue;
```

## 波線や二重線などスタイルを変更
``` css
text-decoration-style: wavy; //波線
text-decoration-style: double; //二重線
text-decoration-style: dashed; //破線
text-decoration-style: dotted; //点線
```

## 線の太さを変える
```css
text-decoration-thickness: 3px;
```

## 下線と文字の重なり方
```css
text-decoration-skip-ink: none; //下線を途切れさせない
```

## 線と文字の距離
```css
text-underline-offset: 5px;
```