文字コード指定

@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'; }

リンク


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-1th-2th-3th-4th-5th-6
td-1-1td-1-2td-1-3td-1-4td-1-5td-1-6
td-2-1td-2-2td-2-3td-2-4td-2-5td-2-6
td-3-1td-3-2td-3-3td-3-4td-3-5td-3-6
td-4-1td-4-2td-4-3td-4-4td-4-5td-4-6
td-5-1td-5-2td-5-3td-5-4td-5-5td-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 -