gorogoronyan FC2

CSS はじめの一歩 (1)

HTML5 はじめの一歩 からの続きです。 サンプル HTML に CSS （Cascading Style Sheets、スタイルシート）を加えて、文書の装飾やレイアウトを行ってみます。

はじめの一歩

元になる HTML のサンプルは下のとおり。 まだ、スタイルが入っていない簡素な HTML5 の文書です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>文書のタイトル</title>
<style>

/* ここに文書のスタイルを入れる */

</style>
</head>
<body>
<h1>こんにちは Hello World</h1>
<p>
サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を
走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の
もろい鋳鉄レールを使用していたため本格的な実用化までには至らな
かった。
その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、
運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と
進んだ。
</p>
あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/>
記号文字：■□●◎○△▲▽▼<br/>
</body>
</html>

HTML5 はじめの一歩 のサンプルの <head>～</head> の中に <style> ... </style> を追加しました。 ここにスタイルを記述していきます。 /* */ で囲まれた文字列はコメント（注釈）になります。

元の HTMLサンプル（Edge）
元の HTMLサンプル（Edge）

ページの周囲に余白を入れる margin

ページの周囲の余白は body のプロパティ margin で設定します。 スタイルは タグ名 { } のように記述して、{ } の中に 設定したいプロパティの名前と値を記述します。

<style>
body {
  margin: 2em;  /* 上下左右の余白 */
}
</style>

値の単位には em (基準となるフォントに対する相対的な大きさ)、 px (ピクセル)、pt (ポイント)などがあります。 margin: 2em; なら2文字分の大きさの余白になります。

margin で余白を確保（Edge）
margin で余白を確保（Edge）

body に border (枠線) を付けると、 body の周囲の余白の大きさが分かります。

<style>
body {
  margin: 2em;            /* 上下左右の余白 */
  border: 1px solid #ccf; /* 太さ１ピクセル、実線、色が #ccccff の枠線を付ける */
}
</style>
body の枠線 (border) を表示（Edge）
body の枠線 (border) を表示（Edge）
枠線の外側が margin で確保された余白です。
CSS: border (枠線) のサンプル
CSS: 色の指定

文章の行間を調整する line-height

次に段落（<p>～</p> の部分） の文章の行間を広くしてみます。 行間は line-height （１行の高さ）で指定します。 たとえば line-height: 1.8; に設定すると、 1行の高さはフォントの高さの 1.8倍 = 180% になり、行間の高さは フォントの高さの分を差し引いた 80% になります。

<style>
body {
  margin: 2em;        /* 上下左右の余白 */
}
p {
  line-height: 1.8;   /* 行の高さをフォントに対して 1.8倍 (行間を80%） */
}
</style>
TestJS_edit_intro01.html

p 要素内のの行間を調整した結果（Edge）
p 要素内のの行間を調整した結果（Edge）

行間のスタイルが p 要素内の文章にだけ適用されている点に注意してください。 p { ... } の中に line-height: 1.8; を記述すると p の外側のテキストには適用されません。 このようにしてスタイルを適用したい範囲を限定することができます。

line-height で数値に単位を付けない

line-height でも 1.8em や 180% など単位付きの指定もできますが、 単位を付けない方が良いです。 単位を付けると、子要素、孫要素の line-height の計算の仕方が変わり、 面倒な話になることがあります。

Androidスマホで表示した結果

左は元のサンプル : TestJS_edit_intro01.html
右は余白と行間を変更した結果 : TestJS_edit_intro01.html

スマホのような小さな画面では、margin : 2em; では余白の大きさが相対的に大きく見えます。 ページの幅に合わせて余白の大きさや文字の大きさを変更する方法もあります。 CSS の @media を使用します。ここでは詳しい説明は省略します。

フォントを指定してみる

フォントは font-family で指定します。 文書全体に対して適用する場合は、body { ... } のところに書き足します。 ここでは、Meiryo (メイリオ)に設定してみます。

<style>
body {
  margin: 2em;          /* 上下左右の余白 */
  font-family: Meiryo;  /* フォント */
}
p {
  line-height: 1.8;     /* 行の高さをフォントに対して 1.8倍 (行間を80%） */
}
</style>
フォントを変更した結果（Edge）
フォントを変更した結果（Edge）

フォント名は OS によってさまざまな種類のフォント名があるので、 複数のフォント名を列挙するのが一般的です。

スタイルを CSS ファイルに分離する

スタイルを別のファイルにして HTML から分離します。 HTML ファイルをいくつも作成するようになると、 どの HTML にも共通のスタイル設定が繰り返し出てきます。 このようなスタイルを毎回記述するのは面倒なので、 スタイルを CSS ファイルに分離して複数の HTML ファイルから参照できるようにします。 これによりスタイルを変更したい場合でも 1つの CSS ファイルの内容を修正するだけで済み、 すべての HTML ファイルを書き直す必要がなくなります。

HTML の <style>...</style> の部分を <link rel="stylesheet" ... /> に置き換えます。href="..."のところに CSS ファイル名を書きます。 ここでは hello.css としました。

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

hello.css の内容は以下のようになります。 HTML ファイルと同じフォルダに保存します。 文字コードは utf-8 で保存します。
Windows のメモ帳で HTML を utf-8 で保存する方法

@charset "UTF-8";
/* 文字コード指定を１行目に書く。@より前に不要なスペースなどを置かないこと */

body {
  margin: 2em;          /* 上下左右の余白 */
  font-family: Meiryo;  /* フォント */
}
p {
  line-height: 1.8;     /* 行の高さをフォントに対して 1.8倍 (行間を80%） */
}

関連

CSS はじめの一歩 (2) に続く。

inserted by FC2 system