↑
文字コード指定
@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-display: swap;
}
.*** {
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%);
↑
テキストボックスの幅をスタイルシートで指定した値に合わせる
box-sizing は、要素の幅と高さを計算する方法を指定するプロパティで、content-box と border-box の2つの値がある。
content-box は、CSS の初期値で、width と height は要素のコンテンツ領域のみに適用される。つまり、パディングやボーダーがある場合は、width と height に加えられて要素の幅と高さが増える。
border-box は、width と height がコンテンツ、パディング、ボーダーを含むように指定される。 つまり、パディングやボーダーがあっても、width と height が要素の幅と高さになる。
もし、テキストボックスの幅をスタイルシートで指定した値に合わせたい場合は、box-sizing を border-box に設定する。
width: 200px;
box-sizing: border-box;
↑
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 -