背景の下をグラデーションにする場合 background: linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 100%), url(../../assets/images/xx.jpg); background-repeat: repeat; background-position: top center; 背景の下を空ける場合 backgr…

スマートフォンで画像を横スクロールする方法 &__img { @include sp { width: 100%; overflow-x: auto; &-inner { width: 901px; } }

position: absoluteを使って中央寄せする記述。transformを使うのがポイント。 .xxx-wrapper { position: relative;} .xxx { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;}

SASS マイナス値の扱い / calcの計算 / 変数などすぐ忘れてしまうのでメモ パーセントは丸括弧で囲む flex: 1 1 (100% / 3); width: (100% / 3); クラス名を変数にする場合の書き方 $variable: '.entry-content'; #{$variable} { p { color: red; } } calcの…

Flexbox と Grid それぞれの複数行に対応したカラムレイアウトの書き方。 Flexbox IEで3で割り切れない数字の場合は不具合がでるので100%では無く、99.9999%にする。 .col { display: flex; flex-wrap: wrap; margin-left: -10px; margin-top: -10px; } .col…