CSSの文法
CSSは「カスケード・スタイル・シート」の頭文字をとった略語です。CSSは厳密にはプログラミング言語でもマークアップ言語でもなく、スタイルシート言語です。
CSSの文法は基本的なことは次の書式だけです。セレクタのwidth（幅）などのプロパティに値をセットする「プロパティ: プロパティ値;」で宣言をして、セレクタのプロパティを「装飾」します。
CSSの書式
セレクタ {
プロパティ: プロパティ値;
プロパティ: プロパティ値;
}
スタイルシートを読み込む
<meta>タグ内に<link rel="stylesheet" href="styles.css" />タグを記述して、スタイルシートを記述したstyles.cssファイルを読み込みます。スタイルシートはhtmlファイルの外部ファイルにも、htmlファイル内にも記述することができます。
次のサンプルスクリプト「index.html」は、1ページ目のindex.htmlを書き換えたものです。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tauri 2.0ではじめるRustプログラミング</title>
<link rel="stylesheet" href="styles.css" />
</head>
(後略)
html,
body {
height: 120%;
margin: 0;
padding: 0;
font-family:"メイリオ","Hiragino Kaku Gothic Pro";
}
サンプルコードの解説
<html>タグと<body>タグ：高さを120％、外側の余白を0、内側の余白を0、フォントを"メイリオ"（Windows向け）か、なければ"Hiragino Kaku Gothic Pro"（macOS向け）を指定します。
<h1>タグと<h2>タグ
<h1>タグはWebサイトタイトル文字で、<h2>タグはWebページタイトル文字です。無理に決まっているわけではありません。
CSSでは、プロパティ値に加減乗除した数値を入れたい場合「calc」関数を使います。むき出しで計算式を書くことはできません。
(前略)
h1 {
margin: 0;
padding: 0;
}
h2 {
width: calc(100% - 40px);
margin: 0;
padding: 30px 20px;
color: #fff;
background-color: #000;
font-size: 36px;
}
サンプルコードの解説
<h1>タグ：外側の余白を0、内側の余白を0にします。
<h2>タグ：幅を100％から40px減算した数値にし、外側の余白を0に、内側の余白を上下30pxと左右20pxに、文字の色を白色に、背景色を黒色に、フォントサイズを36pxにします。
<h3>タグと<td>タグと<a>タグ
<h3>タグは今回はサブタイトルにしました。<td>タグは今回はWebサイトタイトル文字列とメニューにしました。<a>タグはメニュー文字列のハイパーリンクを装飾しました。
<h3>タグと<td>タグと<a>タグを装飾
(前略)
h3 {
margin: 20px 0 0 20px;
padding: 0 0 0 10px;
border-left: 5px solid #000;
}
td {
padding: 10px;
}
a {
color: #000;
text-decoration: none;
}
サンプルコードの解説
<h3>タグ：外側の余白を上20pxと右0と下0と左20pxにし、内側の余白を上0と右0と下0と左10pxにし、左側のボーダーを黒色で厚さ5pxにします。
<td>タグ：内側の余白を10pxにします。
<a>タグ：文字色を黒色に、下線を無しにします。
