【CSS】おすすめ基本設定（scssで記述してある）

CSS

/* table of contents -----------------------------
1.背景画像パス指定
2.フォント指定
3.インプットフォーカス
4.リンク
5.画像
6.ul liタグリセット
------------------------------------------------ */
//1.背景画像パス指定
$img_path:'../img/';

//2.フォント指定
.lato {
  font-family: 'Lato', sans-serif;
}

html {
  font-size: 62.5%;
}

body,input {
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system,
    YuGothic,
    "Yu Gothic Medium",
    "Yu Gothic",
    Verdana,
    Meiryo,
    sans-serif;
  font-size: $large_rem;
  line-height: 1.4;
  @include sp {
    @include fz_vw(13);
  }
}

//3.インプットリセット
input {
  appearance: none;
  &:focus {
    outline: none;
  }
}
button {
  appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  background: none;
  transition: all 0.3s ease-in-out;
  &:hover {
    @include pc {
      opacity: 0.5;
    }
  }
}
::placeholder {
  color: $gray;
}
::-ms-input-placeholder {
  color: $gray;
}
:-ms-input-placeholder {
  color: $gray;
}

//4.リンク
a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;

  &:hover {
    @include pc {
      opacity: 0.5;
    }
  }
}

//5.画像
img {
  vertical-align: top;
}
figure {
  img {
    width: 100%;
  }
}

//6.ul liタグリセット
ul,
li {
  list-style: none;
}