css
Flexbox テク
マンガのコマっぽいレイアウト
justify-content, align-items は flex-direction の方向に影響を受けるので、横方向とか垂直とか言わないべき
filter
filter: brightness(110%) とかでホバーしたりした時にちょっと明るくするのに便利
contrast もべんり、hue-rotate(90deg) もおもしろい
flex で1つだけ右寄せ
最後の要素だけ右寄せしたいことがよくあるし毎回調べてる
margin-left: auto
背景シュッてするアニメーション
横にシュッとするなら
background-size: 300% 100% などででかい背景を作る
background-image で背景指定、画像置いたり liner-gradient で色塗ったり
background-position: 0% などで初期位置
keyframe で background-position をずらしていく
表示できるぶんだけ文字列を表示する
1行なら text-overflow: ellipsis で ... つけられる
進行方向にブロック要素をはみ出る時だけ使える、複数行で次の行が消える場合、とかには使えない
overflow: hidden ではみ出すやつ消す
block コンテナにつけて、内側の p 要素は普通に全部出すとか
webkit-line-clamp
レイアウト確認する時
outline つけると見やすい、border は幅があるけど outline は領域を作らないので幅でずれない
code:outline.css
* {
outline: solid cyan 1px;
}
filter で黒を任意の色にする
任意の色から任意の色へ変えたい
メディアクエリ
screen 省略したら all 扱い
モバイルファースト
モバイル向けの css 書いて
@media (min-width: 768px) {...}
@media (min-width: 1024px) {...}
のように 小 → 大で書いていく
max-width: 767px or 768px?
よくあるスマホ分けるポイント、どう指定する?
code:breakpoints.css
// @include media-breakpoint-up(md) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
...
// @include media-breakpoint-down(md) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
これまねする
word-break: break-all は連続した記号で改行しない
break-all が強いイメージだったけど word-break: break-word; を使う
(未確認) iOS Safari で p 要素に長い文字列を入れて break-all で折り返し height 指定 & overflow: hidden で表示範囲を制御していたときに、表示領域外の文字列に記号が連続?していて、word-break がうまくいかなくて崩れていた、表示領域外の文字列も影響を与える?
WIP