CSS 1 基本（更新中） - user000422/0 GitHub Wiki

/* font:inherit; デフォルトのフォント成形を解除 */
/* a に color: inherit; で colorを解除 */
/* 2020_06 font-size:62.5%系統の話は保守性最悪なので論外 */
/* 2020_04 全体に border:0 かけたい */

/* 完成予定 */
@charset "utf-8"; /* 必須ではない デフォルトはutf-8 */
* { margin: 0; padding: 0; box-sizing: border-box; }
*:focus { outline: none; } /* アスタリスク消してもいけるか試したい（:focus{}） */
html { font-size: 10px; }
body { font-size: 1.4rem; line-height: 1; font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", Helvetica, sans-serif; }
a { vertical-align: baseline; background: transparent; text-decoration: none; color: inherit; }
ol , ul { list-style: none; }
table { border-collapse: collapse; }

.body {
  /* font */
  font: 10px "メイリオ";

  /* HTML5/CSS3 モダンコーディング SHOEISHA式 */
  font-family: "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;

  /* HTML5プロフェッショナル認定試験 レベル1 ver2.0式 */
  font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", Helvetica, sans-serif;
}

.benderprefix {
  -webkit-color: #fff; /* Google Chrome , Safari */
  -ms-color: #fff; /* Internet Explorer */
  -moz-color: #fff; /* Firefox */
  -o-color: #fff; /* Opera */
}

@media screen and (min-width: 480px) { … } /*--- スマホ縦 ---*/
@media screen and (min-width: 896px) { … } /*--- スマホ横 ---*/
@media screen and (min-width: 1024px) { … } /*--- タブレット縦 ---*/
@media screen and (orientation:portrait) { … } /* 縦長のデバイス */
@media screen and (orientation:landscape) { … } /* 横長のデバイス */

img[src] { … } /* xxx */
img[src="sample.jpg"] { … } /* 属性値直接指定 */
img[src*=".jpg"] { … } /* 属性値の一部が一致 */
img[src^="sample"] { … } /* 属性値の始まりが一致 */
img[src$="sample"] { … } /* 属性値の終わりが一致 */

input[type="text"] { … } /* text入力欄 */
input[type="○○○"][value="○○○"] { … } /* value指定 */

a:link { … } /* リンク先閲覧前状態 */
a:visited { … } /* リンク先閲覧後状態 */
a:hover { … } /* カーソルが要素の上にある状態 */
a:active { … } /* マウスのボタン等が押されている状態 */
a:focus { … } /* フォーカス（選択）された状態 */

tr:nth-child(n) { … } /* 先頭からn番目 */
tr:nth-of-type(n) { … } /* 先頭からn番目 */
tr:nth-child(n+4) { … } /* 4番目以降全てに適応 */
tr:nth-child(odd) { … } /* 奇数個目を対象 */
tr:nth-child(even) { … } /* 偶数個目を対象 */
tr:nth-last-of-type(n) { … } /* 最後からn番目 */

tr:first-child { … } /* 最初の要素 */
tr:first-of-type { … } /* 最初の要素 */
tr:last-child { … } /* 最後の要素 */
tr:last-of-type { … } /* 最後の要素 */

tr:only-child { … } /* 唯一の子要素である場合 */

div, section, article { … } /* 複数指定 */
div.wrapper { … } /* 半角で複数指定している class を 指定 */
div p { … } /* 子孫の指定要素すべて */
div > p { … } /* 直下の子要素のみ */
div + p { … } /* 隣接セレクタ 直後にあらわれる要素のみ */
div ~ p { … } /* 間接セレクタ 後にあらわれる対象要素すべて */

/* beforeは要素内の最初 , afterは要素内の最後 に位置する */
.test::before, .test::after {
  content: ''; /* 空の擬似要素を配置したい場合でもこれが必須 */
  content: url(/xxx/aaa/zzz.jpg); /* 擬似要素内に画像を配置 */
}

::placeholder { … } /* placeholder */

.property {

  caret-color: #fff; /* 入力欄の縦棒（キャレット）の色設定 */

  /*--- ポインター ---*/
  cursor: pointer; /*--- 指差す手 ---*/
  cursor: default; /*--- 矢印 ---*/
}

.background {

  background-color: #000000; /* 基本形 */
  background-color: transparent; /* 背景透明（初期値） */

  /* 背景画像設定 url()での値はクォーテーションで囲う必要はない（どちらでも可） */
  background-image: url(img/dog.png); /* 背景画像設定 */
  background-image: url(img/dog.png), url(img/park.jpg); /* 背景画像複数設定（左が最前面に配置） */

  /* repeat 背景画像の繰り返し表示設定 ※背景画像設定前提 */
  background-repeat: repeat; /* 縦横にタイル状に繰り返し表示（初期値） */
  background-repeat: round; /* 縦横にタイル状に繰り返し表示（画像が見切れないように自動で拡大縮小） */
  background-repeat: space; /* 背景画像が範囲に収まらない場合、画像と画像の間に隙間を表示 */
  background-repeat: no-repeat; /* 繰り返し無し（1枚だけ表示） */
  background-repeat: repeat space; /* 値2つ指定 1つ目が横方向、2つ目が縦方向 */

  /* size 背景画像の表示サイズ設定 ※背景画像設定前提 */
  background-size: contain; /* 比率を保ったまま、画像の全体が表示される最大サイズに設定 */
  background-size: cover; /* 比率を保ったまま、画像で要素を隙間なく覆う */

  /* 背景画像指定 背景色 横 縦 繰り返し無し */
  background: url('../img/○○○.png') #FFF center center no-repeat;

  /*--- グラデーション（ 方向, 色A, 色B ） ---*/
  /*--- 0deg（ 下から上 ）, 90deg（ 左から右 ）, 180deg（ 上から下 ）---*/
  background: linear-gradient(225deg, #fff, #eee);
}

.text {
  /* text-shadow 数値は2~3つ必須 色指定は前でも後でも可（指定省略可） */
  /* 数値1「右にずらす影の距離」、数値2「下にずらす影の距離」、数値3「影をぼかす範囲、強さ」 */
  text-shadow: 2px 2px #000;
  text-shadow: 2px 2px 4px #000;

  /* text-decoration */
  text-decoration: wavy line-through #000; /* 3つをまとめる 順不同 */
  text-decoration-style: wavy; /* 線の種類 wavy:波線 */
  text-decoration-line: line-through; /* 線の位置 line-through:取り消し線 */
  text-decoration-color: #000; /* 線の色 */

  text-transform: lowercase; /* 大文字小文字変換 lowercase:小文字 */

  /* word-break 行の折り返し */
  word-break: normal; /* 初期値 既定の改行規則（日本語は折り返す、英語は折り返さない） */
  word-break: break-all; /* 全ての言語で折り返す */
  word-break: keep-all; /* 全ての言語で折返さない */

  /* white-space 連続する空白文字の制御、自動的な行折返しの制御 */
  white-space: normal; /* 初期値 半角スペース、タブ、改行文字、<br>は半角スペース1つに変換 幅がいっぱいの場合行自動折返し */
  white-space: nowrap; /* 半角スペース、タブ、改行文字、<br>は半角スペース1つに変換  行自動折返し無し */
  white-space: pre; /* 半角スペース、タブはそのまま 改行文字や<br>で改行 行自動折返し無し */
  white-space: pre-wrap; /* 半角スペース、タブはそのまま 改行文字や<br>で改行 幅がいっぱいの場合行自動折返し */
  white-space: pre-line; /* 半角スペース、タブを半角スペース1つに変換 改行文字や<br>で改行 幅がいっぱいの場合行自動折返し */

  line-height: 1.5; /* 行の高さを設定 , 値が数値のみの場合その数値をfont-sizeに掛けた高さになる */

  text-indent: -9999px; /* input, submit 等の value文字を消去する（応用テクニック） */

  letter-spacing: 0.1em ; /* 文字幅（ em ･･･ 相対比率（ おすすめ 0.05 - 0.1 ））*/
}

.box {

  height: 100vh; /* 縦幅100% */

  /* visibility */
  visibility: visible; /* 見える状態（初期値） */
  visibility: hidden; /* 透明（ボックス自体は存在） */

  /* overflow ボックスに収まらない要素の扱い */
  overflow: auto; /* 必要に応じてスクロール可能に（初期値） */
  overflow: visible; /* ボックスからはみ出したまま表示 */
  overflow: hidden; /* ボックスからはみ出した部分は非表示 */
  overflow: scroll; /* ボックスからはみ出した部分をスクロールで表示 */

  overflow-x: visible; /* overflow 左右用 */
  overflow-y: visible; /* overflow 上下用 */
}

.trans {

  /* 半角スペース区切りで複数繋げることも可 */
  transform: scale(20, 10); /* 拡大・縮小（カンマで区切る場合 最初が横・最後が縦） */
  transform: skewX(10deg); /* 傾斜（skewX … 左右傾斜 , skewY … 上下傾斜） */
  transform: translate(20px, 10px); /* 移動（カンマで区切る場合 最初が右移動・最後が下移動） */
  transform: translateX(10px); /* 移動（X … 横方向指定 , Y … 縦方向指定） */
  transform: rotate(45deg); /* 角度指定回転（n度回転） */

  transition: color 3s; /* transitionのショートハンド */
  transition-duration: 3s; /* 変化にかかる時間を設定 */
  transition-property: color; /* transitionを適用するcssプロパティ名を指定 */
  transition-timing-function: ease-in; /* 変化速度を操作（初期値:ease） */
  transition-delay: 3s; /* 変化が開始するまでの時間を設定 */

  /* animation */
  animation-name: animation-move; /* キーフレーム名（keframes）を指定 */
  animation-duration: 3s; /* 開始から終了までの時間設定 */
  animation-iteration-count: infinite; /* 再生繰り返し回数 infinite:無限に繰り返す */
  animation-timing-function: linear; /* 再生速度操作 liner:一定速度 */
}

/* animation 開始から終了まで詳細に設定 */
@keyframes animation-move {
  0% {
    top: 0;
  }
  100% {
    top: 100px;
  }
}

.flex .grid {
  display: flex;
  justify-content: center; /* 左右中央寄せ */
  justify-content: start; /* 左寄せ */
  justify-content: space-between; /* 左右両端に分離 */
  align-items: center; /* 上下中央寄せ */
  flex-direction: column; /* 縦並び */

  display: grid;
}

/*--- box-shadow ---*/
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.5);

/*--- filter:drop-shadow ( PNG 対応 ) ---*/
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.1));