諸々最初に設定

1. cssをreset

各タグに個別対応する手間を省き、表現を一元化
A (more) Modern CSS Resetを改造して「reset.css」を先頭に設置、あるいはcssファイルの先頭に配置
Header内に<link href=”reset.css” rel=”stylesheet” />と記述

入れておくと便利なCSSセレクタ

• margin、padding などの計算が不要に
  *, ::after, ::before { box-sizing: border-box; }
• purecssでスクロール
  html {
  scroll-behavior: smooth;
  /* scroll-padding-top: 100px; :MENUが100px固定*/
  }
• 文字詰め [設定：Font関連]
  .mojitume {
  font-family: ‘Gothic MB101 medium’, sans-serif; //メイリオ・Noto Sans・MS ゴシック・MS 明朝など、OTF以外では使えない
  font-feature-settings: “palt”;
  -webkit-font-feature-settings: “palt”;
  -moz-font-feature-settings: “palt”;
  }
• wbr用にbodyタグに記述 [文節の折り返し]
  body {
  overflow-wrap: anywhere;
  word-break: keep-all;
  }

2. @media

スタイルシートを適用する条件を指定。pc / tablet / smartphoneで区分け

480pxより小さい
@media screen and (max-width: 480px) {}

737pxより大きい
@media print,screen and (min-width: 737px) {}

481px〜768px
@media screen and (min-width: 481px) and (max-width: 768px) {}
@media screen and (481px〜768px < =width < 768px) {}

ホバーアクションがある場合
@media (any-hover: hover) {}

3. リンク

通常下線はこんな感じ

a.d1 {
  color: red !important;
}

文字につけたくない場合はこんな感じ

a.d2 {
  text-decoration-color: purple;
  text-decoration-line: underline;
  text-underline-offset: 5px;
}

4. image

.pc {
  display: inline-block;
}

.sp, .tablet {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: inline-block;
  }
}

@media screen and (max-width: 435px) {
  .tablet {
    display: inline-block;
  }
}

img{
  max-width: 100%;
  heigth: auto;
  border: none;
  vertical-align: bottom;
}

<picture>
  <source srcset="dummy-c.jpg" media="(min-width: 1280px)" />
  <source srcset="dummy-b.jpg" media="(min-width: 768px)" />
  <img src="dummy-a.jpg" alt="代替テキスト" />
</picture>

<picture>
  <source srcset="dummy.svg" type="image/svg+xml" />
  <source srcset="dummy.png" type="image/png" />
  <img src="dummy.gif" alt="代替テキスト" />
</picture>

.sam21 img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: contain;
}

transformプロパティ独立した書き方

※ skew はプロパティ無し

.hoge1 {
  transform: translateY(10px) rotate(90deg) scale(1.1);
}
.hoge2 {
  transform: translateY(100%) scaleX(1.1) scaleY(1.2);
}

　↓

.hoge1 {
  translate: 0 10px;
  rotate: 90deg;
  scale: 1.1;
}
.hoge2 {
  translate: 0 100%;
  scale: 1.1 1;
  scale: 1 1.2;
}