@charset "utf-8";

※ この指定は、外部スタイルシートファイル内でのみ使用できます。
※ また、最初の要素でなければならず、これより前には文字を一切記述してはいけません。

@font-face { font-family: 'linux_libertineSBdIt'; src: url('./fonts/linlibertine_rziah-webfont.woff2') format('woff2'), url('./fonts/linlibertine_rziah-webfont.woff') format('woff'); font-display: swap; } .*** { font-family: 'linux_libertineSBdIt'; }

.*** a:link { text-decoration: underline; color: #******; } .*** a:visited { text-decoration: none; color: #******; } .*** a:hover { } .*** a:active { }

background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

box-sizing: content-box; （初期値）
box-sizing: border-box;

content-box は、width と height は要素のコンテンツ領域のみに適用される。パディングやボーダーがある場合は、width と height に加えられて要素の幅と高さが増える。

border-box は、width と height がコンテンツ、パディング、ボーダーを含むように指定される。 パディングやボーダーがあっても、width と height が要素の幅と高さになる。

tr:nth-child(2n+1) { background-color: pink; } tr:first-child { background-color: aqua; } tr:last-child { background-color: yellow; } tr td:nth-child(3) { color: blue; }

プロパティ値を指定する際に計算を行うことができるもの。

width: calc(100% - 80px);

演算子は、「+」「-」「*」「/」。
優先順位は標準的な規則と同じ。
計算順序を指定するために 「括弧（）」 を使用することができる。

:root { --main-size: 256px; } .hoge { width: var(--main-size); }

.fuga { width: calc(var(--main-size) - var(--main-size) * 2 / 16); }

空のセルに対角線を引く

td:empty { background-image: linear-gradient( to bottom right, transparent 0%, transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px), transparent 100% ); }

×印

background-image: linear-gradient(to bottom right, transparent 0%, transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px), transparent 100% ), linear-gradient(to bottom left, transparent 0%, transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px), transparent 100% );