↑
文字コード指定
@charset "utf-8";
※この指定は、外部スタイルシートファイル内でのみ使用できます。
※また、最初の要素でなければならず、これより前には文字を一切記述してはいけません。
↑
Web Font
@font-face {
font-family: 'linux_libertineSBdIt';
src: url('./fonts/linlibertine_rziah-webfont.woff2') format('woff2'),
url('./fonts/linlibertine_rziah-webfont.woff') format('woff');
}
.*** {
font-family: 'linux_libertineSBdIt';
}
↑
リンク
.*** a:link {
text-decoration: underline;
color: #******;
}
.*** a:visited {
text-decoration: none;
color: #******;
}
.*** a:hover {
}
.*** a:active {
}
↑
色
color: #******;
background-color: #******;
参考：文字色と背景色の配色確認
↑
位置
text-align: center;
position: relative; top: **px; left: **px;
↑
フォント
font-style: italic;
font-family: monospace;
font-size: **px;
font-weight: bold;
↑
縞模様
background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
↑
nth-child
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;
}
| th-1 | th-2 | th-3 | th-4 | th-5 | th-6 |
|---|---|---|---|---|---|
| td-1-1 | td-1-2 | td-1-3 | td-1-4 | td-1-5 | td-1-6 |
| td-2-1 | td-2-2 | td-2-3 | td-2-4 | td-2-5 | td-2-6 |
| td-3-1 | td-3-2 | td-3-3 | td-3-4 | td-3-5 | td-3-6 |
| td-4-1 | td-4-2 | td-4-3 | td-4-4 | td-4-5 | td-4-6 |
| td-5-1 | td-5-2 | td-5-3 | td-5-4 | td-5-5 | td-5-6 |
↑
JavaScript で CSS を操作する
const target1 = document.querySelector('#example-id');
const target2 = document.querySelectorAll('.example-class');
target1.style.setProperty('color', '#00f');
target1.style.setProperty('position', 'relative');
target1.style.setProperty('top', '3px');
target2.forEach(function (element) {
element.style.setProperty('color', '#f00');
element.style.setProperty('font-weight', 'bold', 'important');
});
↑
calc() 関数
プロパティ値を指定する際に計算を行うことができるもの。
width: calc(100% - 80px);
演算子は、「+」「-」「*」「/」。
優先順位は標準的な規則と同じ。
計算順序を指定するために 「括弧（）」 を使用することができる。
↑
CSS 変数（カスタムプロパティ）
:root {
--main-size: 256px;
}
.hoge {
width: var(--main-size);
}
↑
CSS 変数＋ calc() 関数
.fuga {
width: calc(var(--main-size) - var(--main-size) * 2 / 16);
}
↑
JavaScript から CSS 変数の値を変更する
document.documentElement.style.setProperty('--main-size', '96px');
↑
コメントアウト
/*
コメントアウト
*/
↑
- guitar site WAVE -