文字コード指定

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

リンク


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%);

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 -