Private Chamber - CSS

　ノーコメント.

コメントアウト

/*コメント*/

/*
複数行コメント
*/

値の単位

アニメーション

div {
  animation: My_Animation 1s linear 0s infinite normal;
}
@keyframes My_Animation {
  0% { background: red; }
  100% { background: blue; }
}

文字の色

color: #64ec86;

フォント

font-family: "sans-serif";

　.ttfファイルを読み込んで新しいフォントを定義

@font-face {
  font-family: 'MyFont';
　src: url(〇〇.ttf);
}

文字の大きさ

　xx-small,x-small,small,medium,large,x-large,xx-largeから選ぶか、数値指定

font-size: x-large;

文字の幅

letter-spacing: 0.5em;

行間

line-height: 0.5em;

テキストの〇〇揃え

　left, center, right, justifyから選択

text-align: center;

上下の〇〇揃え

　top, middle, bottom, baselineから選択

vertical-align: top;

インデントの大きさ

text-indent: 1em;

テキストの影

　左右、上下、半径、色

text-shadow: 3px 3px 2px #0000ff;

テキスト装飾無効化

text-decoration: none;

要素の高さ・幅

height: 20px;
width: 20px;

要素の最大・最小の高さ・幅

max-height: 0.5em;
min-height: 0.5em;
max-width: 0.5em;
min-width: 0.5em;

背景色

background-color: #64ec86;

背景画像

background-image: "img.png";

枠

・一部の場合は「border-top」のようにする。top, bottom, right, leftから選択
・「border-radius」で角を丸く
・通常はsolid, 点線はdotted, 破線はdashed, 二重線はdouble

border: solid 3px #000000;

内側の余白

padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;

　このようにすると、上下が10px、左右が20pxになる

padding: 10px 20px;

　

padding: 10px 20px 30px 40px;

外側の余白

margin: 10px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;

　このようにすると、上下が10px、左右が20pxになる

margin: 10px 20px;

　

margin: 10px 20px 30px 40px;

はみ出した部分

　visibleで見えてはみ出す、hiddenで見えずにはみ出す、scrollでスクロール、autoでおさまらないときだけスクロール

overflow: visible;
overflow-x: visible;
overflow-y: visible;

影

box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
text-shadow: 0 1px 0 rgba(0,0,0,0.2);

レイヤー

　大きいほど上

z-index: 100;

ズーム

zoom: 150%;

トランジション

transition: 1s;

チェックボックスを消す

display: none;

色反転

filter: invert();

すべての要素

* { a: b; }

特定の要素

div { a: b; }

特定の要素にある特定の子要素

div > span { a: b; }

特定のクラス名の要素

div.class { a: b; }

特定のidの要素

div#id { a: b; }

マウスホバーされた要素

a:hover { a: b; }

クリックされた要素

a:active { a: b; }

未訪問のリンク

a:link { a: b; }

訪問済みのリンク

a:visited { a: b; }

～に当てはまらない要素

div:not(:hover) { a: b; }

特定の属性を持った特定の要素

div[width] { a: b; }
div[width=20px] { a: b; }

～で始まる値をもつ属性

a[title^="a"] { a: b; }

～で終わる値をもつ属性

a[title$="z"] { a: b; }

n番目の子要素

div:nth-cild(2n+1) { a: b; }

最初の子要素

div:first-child { a: b; }

最後の子要素

div:last-child { a: b; }

要素の最初の行

div::first-line { a: b; }

要素の最初の文字

div::first-letter { a: b; }

要素の直前

div::before { content: "内容"; }

要素の直後

div::after { content: "内容"; }

ボックスを並べる

・inlineまたはblockまたはinline-block
・div要素の横並びはこれを使う

display: inline;

空白の扱い

・normalで半角スペースを無視、改行を半角スペースで表示
・preで半角スペースも改行もそのまま表示
・pre-lineで半角スペース無視、改行はそのまま表示

white-space: normal;

マーカー

background: linear-gradient(transparent 50%, #64ec86 50%);

コピペ禁止

body {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

強制的に改行

overflow-wrap: break-word;