ホーム > HTMLサンプル

2009/12-2015/05/27

CSS はじめの一歩 (1)

HTML5 はじめの一歩 からの続きです。
サンプル HTML に CSS (Cascading Style Sheets、スタイルシート)を加えて、文書の装飾やレイアウトを行ってみます。
目次
  1. はじめの一歩
  2. ページの周囲に余白を入れる margin
  3. 文章の行間を調整する line-height
  4. フォントを指定してみる
  5. スタイルをHTML ファイルから分割
  6. いろいろ

はじめの一歩

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>文書のタイトル</title>
<style>

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

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

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

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

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

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

margin で余白(IE11)

body に枠線(border)を付けてみると、どれだけ余白が取られたかが分かります。

<style>
body {
  margin:2em;  /* 上下左右の余白 */
  border:1px solid #ccf; /* 太さ1ピクセル、実線、色が #ccccff の枠線を付ける */
}
</style>
body の枠線(border)を表示(IE11)

枠線の外側が margin で確保された余白。

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

次に段落(<p>~</p> の部分)の文章の行間を広くしてみます。 行間は line-height (1行の高さ)で指定します。 こちらも em や % などの単位があります。 たとえば line-height:180%; に設定すると、 1行の高さはフォントの高さの 180% = 1.8倍になり、行間の大きさは フォントの高さの分を差し引いた 80% になります。

<style>
body {
  margin:2em;  /* 上下左右の余白 */
}
p {
  line-height:180%;  /* 行の高さを 180%(行間を80%) */
}
</style>
p の行間を調整した結果(IE11)

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

フォントを指定してみる

フォントは font-family で指定します。 文書全体に対して適用する場合は、body { ... } のところに書き足します。 ここでは、MS Pゴシックに設定してみます。

<style>
body {
  margin:2em;  /* 上下左右の余白 */
  font-family:MS PGothic;  /* フォント */
}
p {
  line-height:180%;  /* 行の高さを 180%(行間を80%) */
}
</style>
フォントを変更した結果(IE11)

半角英数文字や記号文字のフォントが変わっている点に注意。

(参考)特殊な記号文字はブラウザによって表示がばらつくので注意が必要です。 あまり使わない方がいいかも?。

スタイルをHTML ファイルから分割

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

HTML は <style>...</style> の部分を <link .../> に置き換えます。href="..."のところに CSS ファイル名を書きます。 ここでは hello.css としました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>文書のタイトル</title>
<link rel="stylesheet" href="hello.css"/>
</head>
<body>
<div id="container">
<h1>こんにちは Hello World</h1>
<p>
サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を走る蒸気機関車の走行に成功した。
しかし、この頃は馬車鉄道用のもろい鋳鉄レールを使用していたため本格的な実用化までには至らなかった。
その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、
運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と進んだ。
</p>
あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40<br/>
記号文字:■□●◎○△▲▽▼<br/>
</div>
</body>
</html>
hello.css の内容は以下のようになります。 HTML ファイルと同じフォルダに保存します。 文字コードは utf-8 で保存します
@charset "UTF-8";
/* 文字コード指定を1行目に書く、@より前に不要なスペースなどを置かないこと */

body {
  margin:2em;              /* 上下左右の余白 */
  font-family:MS PGothic;  /* フォント */
}
p {
  line-height:180%;        /* 行の高さを 180%(行間を80%) */
}
ここまで:TestHTML_hello1.zip

いろいろ

CSS はじめの一歩 (2) に続く。
目次
gorogoronyan@gmail.com
inserted by FC2 system