ときどき更新。
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
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
フォームの変な色系
【Chrome】オートコンプリートのとき、背景を黄色（もしくは水色）にしない - Qiita
Safariでinput:disabledの時のcolorが淡く見える
//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
テキストを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
複数行で…
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
テキストの下線のスタイル調整
色を変える
text-decoration-color: blue;
波線や二重線などスタイルを変更
text-decoration-style: wavy; //波線
text-decoration-style: double; //二重線
text-decoration-style: dashed; //破線
text-decoration-style: dotted; //点線
線の太さを変える
text-decoration-thickness: 3px;
下線と文字の重なり方
text-decoration-skip-ink: none; //下線を途切れさせない
線と文字の距離
text-underline-offset: 5px;