gorogoronyan FC2

CSS はじめの一歩 (2)

CSS はじめの一歩 (1) からの続きです。
CSS の内容をどんどん変えてみます。

見出しに装飾をつけてみる

見出し (<h1>~</h1>) に背景色 (background) や額縁の線 (border) などをつけてみます。

body {
  margin: 2em;          /* 上下左右の余白 */
  font-family: Meiryo;  /* フォント */
}
p {
  line-height: 1.8;     /* 行の高さをフォントに対して 1.8倍 (行間を80%) */
}
h1 {
  font-size: 18pt;         /* 文字の大きさ */
  color: #336;             /* 文字の色 */
  background: #eef;        /* 背景色 */
  border-style: solid;     /* 枠線の種類 */
  border-color: #669;      /* 枠線の色 */
  border-width: 1px 0px;   /* 枠線の太さ:上下、左右 */
  padding: 0.35em;         /* 内側の余白の大きさ */
  margin-bottom: 1em;      /* 下側の余白の大きさ */
}

font-size、color、border, margin などのスタイルは h1 だけでなく、 p や ul や table など他の要素でも使えます。

見出しを変更した結果(Edge)
見出しを変更した結果(Edge)

色の指定

色の指定では #xxxxxx; または #xxx; (x は 16進数, 0 から 9 と a から f) という表記を用います。
CSS 色の指定

下の 1) と 2) は同じ設定です。2) が短縮した表記になります。

1) color: #333366;    /* #RRGGBB;  R:赤 G:緑 B:青 */
2) color: #336;       /* #RGB; */

◎ 背景色の設定例

下の 1), 2), 3) は同じ設定です。

1) background-color: #cccccc;
2) background: #cccccc;
3) background: #ccc;

書く手間を省略できる 3) がよく使われます。
background: は色以外に背景画像もまとめて設定できます。

上下左右の大きさの指定方法

margin や padding や border などで同じ値を設定するときに 記述の仕方がいくつかあります。 楽な方法を選んでください。また、0 の場合は単位が省略できます。

◎ マージンの設定例

1), 2), 3) はどれも同じ設定です。

1) margin: 1em;             /* 上下左右をまとめて設定 */
2) margin: 1em 1em;         /* 上下、左右を個別に設定 */
3) margin: 1em 1em 1em 1em; /* 上、右、下、左を個別に設定 */

下の 4行も 1), 2), 3) と同じ設定です。

margin-top: 1em;    /* 上の余白 */
margin-right: 1em;  /* 右の余白 */
margin-bottom: 1em; /* 下の余白 */
margin-left: 1em;   /* 左の余白 */
◎ 枠線の設定例

下の 1),  2) は同じ設定です。

1) まとめて設定
border: 1px solid #669;  /* 枠線の太さ、種類、色。値の順番は任意 */

2) 個別に設定
border-style: solid;     /* 枠線の種類 */
border-color: #669;      /* 枠線の色 */
border-width: 1px;       /* 枠線の太さ:上下左右をまとめて設定 */

border-width も margin と同じように上下左右の値をまとめて設定したり 個別に設定したりできます。

例:
border-width: 1px;              /* 上下左右をまとめて設定 */
border-width: 1px 0;            /* 上下、左右を個別に設定、0 は単位を省略できる */
border-width: 0 1px 2px 3px;    /* 上、右、下、左を個別に設定 */

スタイルをいろいろ変えてみる

変更した結果(Edge)
変更した結果(Edge)
body {
  margin: 2em;                     /* 上下左右の余白 */
  font-family: Meiryo;             /* フォント */
  font-size:12pt;                  /* 文字の大きさ */
}
p {
  line-height: 1.8;                /* 行の高さをフォントに対して 1.8倍 (行間を80%) */
  text-indent: 1em;                /* 段落の先頭を1文字インデント */
  text-align: justify;             /* 均等割り付け、文章の行末を揃える */
}
h1 {
  font-size: 1.5em;                /* 文字の大きさ。親の要素(このサンプルではbody)のフォントに対して1.5倍 */
  color: #336;                     /* 文字の色 */
  background: #eef;                /* 背景色 */
  border-style: solid;             /* 枠線の種類 */
  border-color: #669;              /* 枠線の色 */
  border-width: 1px 0;             /* 枠線の太さ:上下、左右 */
  padding: 0.35em 0 0.1em 0.4em;   /* 内側の余白の大きさ:上、右、下、左 */
  margin: 0 -0.3em 1em -0.3em;     /* 外側の余白の大きさ:上、右、下、左 */
}

TestJS_edit_intro01.html

ページの幅を指定する

上のサンプルはブラウザのウインド幅を広くすると ページの幅もいくらでも広くなります。 ページの幅が極端に広いと1行あたりの文字数が多くなって 文章が読みづらくなります。 雑誌や書籍などの 1行の文字数は、 横書きで全角で 20文字から 40文字程度で構成されています。
TestHTML_layout_p01.html

そこで次にページの幅を制限してみます。 下のサンプルはページの幅の最小値と最大値をもたせ、 この範囲内で本文の幅が可変するようにしてあります。

HTML の内容

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>文書のタイトル</title>
<link rel="stylesheet" href="hello2.css"/>
</head>
<body>
<main>
<h1>こんにちは Hello World</h1>
<p>
サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を走る蒸気機関車の走行に成功した。
しかし、この頃は馬車鉄道用のもろい鋳鉄レールを使用していたため本格的な実用化までには至らなかった。
その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、
運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と進んだ。
</p>
あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40<br/>
記号文字:■□●◎○△▲▽▼<br/>
</main>
</body>
</html>

body の内側に main タグを追加しています。 main タグはページを構成するさまざまなブロックのうち、 本文のブロックに使用します。 ページを構成するタグには他にヘッダー (header タグ)、 フッター (footer タグ)、 目次などのナビゲーション (nav タグ) があります。

(昔話) main タグは IE で定義されていませんでした

2020年代では気にしない昔話です。 main タグは現在のブラウザ (Chrome, Edge, Firefox など) では問題なく使えますが、 IE11 では未定義になっていました。 IE ではそのままだとブロック要素にならないので CSS に main { display:block; } が必要でした。 昔の HTML では main を使わず、 例えば <div id="content"> などのように id 名を指定した div を使用していました。

CSS の内容

body {
  margin: 0;                       /* 0 の場合は単位を省略できる */
  padding: 0;
  background: #dde;                /* 背景色 */
  font-family: Meiryo;             /* フォント */
  font-size: 12pt;                 /* 文字の大きさ */
}
main {                             /* main 内に対してスタイルを適用 */
  margin: 0 auto;                  /* 外側の余白:上下,左右、左右 auto でセンタリング */
  padding: 2em 4%;                 /* 内側の余白:上下,右左。% はウインドの幅に対する割合で、
                                      ウインド幅が変わると左右の padding の大きさも変わる。 */
  background: #fff;
  min-width: 300px;                /* 最小幅 */
  max-width: 600px;                /* 最大幅 */
  min-height: 500px;               /* 最小高さ */
}
main p {                           /* main内の p に対して適用される (main の外の p には適用されない) */
  line-height: 1.8;                /* 行の高さを 180%(行間を80%) */
  text-indent: 1em;                /* 段落の先頭を1文字インデント */
  text-align: justify;             /* 均等割り付け */
}
main h1 {                          /* main内の h1 に対して適用される (main の外の h1 には適用されない) */
  font-size: 1.5rem;               /* 文字の大きさ。bodyのフォントに対して1.5倍 */
  color: #336;                     /* 文字の色 */
  background: #eef;                /* 背景色 */
  border-style: solid;             /* 枠線の種類 */
  border-color: #669;              /* 枠線の色 */
  border-width: 1px 0;             /* 枠線の太さ:上、右、下、左の順 */
  padding: 0.35em 0em 0.1em 0.4em; /* 内側の余白の大きさ:上、右、下、左の順 */
  margin: 0em -0.3em 1em -0.3em;   /* 外側の余白の大きさ:上、右、下、左の順 */
}

結果(Edge)
結果(Edge)

異なる画面サイズに対応する (レスポンシブ)

近年は画面の大きな Windows パソコンだけでなく、 スマホやタブレットなどサイズの異なる画面で Web を表示する話が出てきます。 このようなさまざまな画面サイズに対応できる HTML にする話もあります。

はじめの一歩から進んで難しい話になるので、ここでは参考程度です。 必要になったら関連するサンプルを眺めてください。

TestCSS_flex_page02.html
2段組みで目次をつけて、本文は可変幅にしたサンプル。 ウインドの幅を変えると目次の位置を変えたり、 文字サイズを変えたりします。
main タグ, nav タグを CSS の flex で組み合わせたり、 CSS の @media で指定したりします。
HTML ページレイアウト

関連

CSS はじめの一歩 (3) に続く。
inserted by FC2 system