Index
BIBI.MOE
Status
一旦、破棄
作成途中で、解説の切口を見直す必要に気づいたが、それに割く時間がない

CSSの書き方

最小限の CSS を説明します

1

最初に適当な HTML ファイルを用意します

この HTML のソースをそのままコピーしても大丈夫です

そして [head] と [body] との間に [link] を記述します

例
<html><head>
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Hello</title>
</head><body>
(以下略)

2

次に CSS ファイルを作成します

今回は HTML と同じフォルダーに [style.css] の名で作成します

中身は一旦、次の様にします

[style.css] の内容
* { font-size: 100%; margin: 0; padding: 0; }
body { background: black; color: white; }
a { color: cyan; }
a:visited { color: magenta; }
a:active { color: red; }

意味は次の通りです

HTML をブラウザーで表示したら意味がわかるはずです

3

ここで CSS の文法を簡単に説明します

CSS の断片
body /* <- Selector */
{
/* Property: Value */
background: black;
color: white;
}

この CSS は [body] 要素の見た目を指定します

異なる要素を同じ見た目にするにはセレクターを複数指定します

見出しをすべて赤くする例
h1, h2, h3, h4, h5, h6 { color: red; }

4

プロパティーを紹介します

4.1

背景色は [background: 色] で指定します

文字の色は [color: 色] で指定します

[色] にはカラーコードまたは色名を指定します

次の2つは同じく、背景を黄色にします

カラーコード
background: #ff0;
色名
background: yellow;

4.2

要素に罫線をつけたいときは [border] を使用します

基本の書き方は [border: 太さ 種類 色] です

h1 見出しを細いグレーの線で囲む
h1 { border: thin solid gray; }
h1 見出しを太いグレーの線で囲む
h1 { border: medium solid gray; }
h1 見出しをとても太いグレーの線で囲む
h1 { border: thick solid gray; }

太さ・種類・色を個別に指定することもできます

太さ
border-width: thin; /* 細い線 */
border-width: medium; /* 太い線 */
border-width: thick; /* とても太い線 */
border-width: 2px; /* 2px の線 */
border-width: 1em; /* 1文字分の太さの線 */
border-width: 0; /* 線無し */
種類
border-style: solid; /* 直線 */
border-style: dotted; /* 点線 */
border-style: dashed; /* 破線 */
border-style: none; /* 線なし */
他にもありますが使用しやすいのはこの4種類
色
border-color: red; /* 赤 */
border-color: auto; /* 文字と同じ色 */

罫線は上・右・下・左で別々に設定できます

上下は赤、左右は青
border-color: red blue;
上は赤、左右は青、下は黄色
border-color: red blue yellow;
上は赤、右は青、下は黄色、左は緑
border-color: red blue yellow green;

[border-style] や [border-width] でも同様です

4.3

文字の変更方法を紹介します

書体
font-style: normal; /* 通常 */
font-style: italic; /* 斜体 */
太さ
font-weight: normal; /* 通常 */
font-weight: bold; /* 太字 */
装飾
text-decoration: none; /* 通常 */
text-decoration: underline; /* 下線 */

4.4

4.5

4.6

5

6

  1. リセット
  2. 色
  3. 一括指定
  4. 個別指定

7