scss css_小技

Posted 2021-05-17

//line-heightの指定方法(1行の行間設定)
//line-heightは単位なしで設定する。
//文字サイズが「15px」だとして「line-height: 1;」を指定すると、行の高さは文字サイズと同じ「15px」になる。
//psdデータのテキスト情報パラメータの「行送り」を見て、設定する。
//例:文字サイズ「16pt」に対して、行送りが「42pt」の場合「42 ÷ 16 = 2.625」となるので、line-heightは「2.625」

//クロームにてアンカーリンクのフォーカスを解除
hoge:focus{
  outline: none;
}

//背景色のグラデーション
background: linear-gradient(to bottom, red 0, yellow 70%, blue 100%);

//背景色のグラデーションではなくかっちり分ける
background: linear-gradient(to bottom,#FFF 0%,#FFF 50%,#FFC778 50%,#FFC778 100%);

//SP時にテーブルを横スクロールさせる(テーブルを囲っている親要素に当てる)
overflow: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;

//CSS3アニメーションURL
https://www.tam-tam.co.jp/tipsnote/html_css/post7917.html

//CSSで自動カーニング
font-feature-settings : "palt";

//aタグをクリックした際にリンク機能をさせない(空リンクの時に使える。)
//※ホバーアニメーションの設定も消えてしまうので注意。
pointer-events: none;

//iOS で滑らかなスクロールを実現
-webkit-overflow-scrolling: touch;

//CSSでトリミング
img {
  width: 250px;
  height: 250px;
  object-fit: cover; /* この一行を追加するだけ！ */
}