CSS 1 基本(更新中) - user000422/0 GitHub Wiki

セレクタ {プロパティ名: プロパティ値;}

CSSリセット
CSSリセットを推奨する理由 … UAスタイルシートはブラウザ毎で異なり、期待している表示にならないことがあるため

/* 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; }

デジタル庁サイトのデザイン変遷の面白さ https://qiita.com/mu_tomoya/items/14cd7c7ca4c6d1af96ca
フレームワーク脱却しピュアCSSに、gridからflexに

インデントはスペース2つ(Tabキーによるインデントは禁止)
要素名にスタイルを指定しない( h1等にスタイルを指定する場合はクラスを付けて指定する )
ID名とクラス名はハイフンで区切ること( #h1-red )
0 の後の単位は省略すること( 誤0px 正0 )
可能な限りショートハンドプロパティを使用すること
重いプロパティ … border-radius box-shadow position: fixed :nth-child

@import "style.css"; … CSSの中で外部のスタイルシートを読み込む

CSSスプライト … 複数の画像を結合して1つにし、ずらして使い回すことでサーバへのリクエスト負担を減らす
位置調整はbackground-positionを使用

画像には(画像のクラスには)あらかじめ高さを指定しておくことで読み込み遅延ズレを解消できる
※あらかじめボックスモデルで画像のサイズが決まっている場合のみ

繰り返しで表現できる背景画像の場合、画像が小さいほどデータを小さくできる

フルードグリッド … ウインドウ幅に合わせてレイアウトを可変
フルードイメージ … スクリーンサイズに合わせて画像の幅をCSSで可変に表示させる手法

単位 … 下記以外にも複数存在する
em … 親要素のフォントサイズを1とする単位
rem … html要素のフォントサイズを1とする単位(root em)
vw … ビューポート幅の1%1とする単位
vh … ビューポート高さの1%1とする単位

CSSセレクタにクラスを推奨する理由
IDの成約 … 同じページ内では1つのIDを複数使えない
詳細度の関係でIDをクラスで上書き出来ない
IDをHTMLやJs用にしておくと管理が楽で保守性が上がる

ol… 順序に意味がある
ul… 順序に意味がない

font
font … 半角で区切る、記述順序が存在する
font-weight font-style font-variant line-height は省略可能
font-family … 左側のフォントが優先
sand-serif … ゴシック系フォント(おおまかな分類指定記述)

.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;
}

ベンダープレフィックス http://caniuse.com (黄色いマーク)

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

メディアクエリ
media screen … ビューポート(ブラウザ表示領域)
orientationに指定できる値はportraitlandscapeのみ
メディアタイプ(allやscreen)は省略可能(省略した場合はallとして扱う)
メディアクエリ4から非推奨のメディアタイプ … tv handheld projection

@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) { … } /* 横長のデバイス */

属性セレクタ … HTML属性を指定
要素名[属性名="属性値"] { … } … 基本型

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

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

擬似クラス … ユーザのアクションによる特定状態の要素が対象(23種類)
nth-child … 要素の種類に関係なく、親要素から見て何番目の要素か
nth-of-type … 同種類の子要素を対象とし、親要素から見て何番目の要素か

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 { … } /* 唯一の子要素である場合 */

結合子 … 複数のセレクタを組み合わせる
子孫要素を探すより、直下の子要素を探す処理の方が速い xxx > yyy

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

擬似要素 … HTML上は存在しない要素

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

::placeholder { … } /* placeholder */

プロパティ

.property {

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

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

background
backgroung-sizeプロパティはbackgroungプロパティ中で指定できるが、Android 4.3以前が対応してないため個別で記述する必要がある

.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(テキスト関係)
line-heightheight と同じ値にすることでテキストがその要素内で縦中央揃いされる

.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 ))*/
}

opacity … color , background 両方に影響
rgba … background のみに影響
画像の透明度を変更するのに適しているのは 「 opacity 」

BOX(ボックス要素関係)

.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 上下用 */
}

アニメーション
transformプロパティを複数記述すると最後のみ反映されるので1つのプロパティで複数の値を記述すること ※要確認
keyframesでanimationを設定する
keyframesの0%from100%toと書くこともできる
'skew()'関数は削除予定なので'skewX'や'skewY'を使用すること ※2016年時点でskew()非推奨勧告

.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
order: 1; … 子要素に記述し、flex子要素の並び順を変更(初期値は0、数字の大きいものが右に並ぶ)

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

  display: grid;
}

shadow
px px px px 水平方向の距離, 垂直方向の距離, ぼかし距離, 広がり距離
rgba( 0, 0, 0, 0.5 ) 色, 透明度

/*--- 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));

⚠️ **GitHub.com Fallback** ⚠️