はじめてのCSS

スタイルを変えてみよう

さきほど作ったサンプルをもう一度よく見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のホームページ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>私のホームページ</h1>

<p>工事中</p>

</body>
</html>

7行目の style.css は，このページのスタイルを指定するスタイルシートのファイル名ですが，まだこのファイルを作っていませんでした。

これから style.css を作りましょう。メモ帳を開いて，次のように打ち込みます。これは本文（body）の余白（margin）を画面の幅の 5% に設定するというスタイル指定です。

body {
  margin: 5%;
}

これを style.css という名前で，さきほどの index.html と同じ場所に保存します。このファイルには（今のところ）日本語は使われていないので，保存するときの文字コードはUTF-8でもシフトJIS（「メモ帳」では「ANSI」と表示される文字コード）でもかまいません。

この style.css もサーバに送って，どうなるか見てください。余白ができればOKです。

CSSとは

CSS（Cascading Style Sheets，カスケーディング・スタイルシート）は，Webページのスタイルを指定するための仕組みです。

最初のCSSレベル1はWorld Wide Web Consortium（W3C）が1996年に定めました。1998年にCSSレベル2，2011年にCSS 2.1が作られ，現在はCSSレベル3（CSS3）の策定が進行中です。

CSSは style.css のような別ファイルに書くことをお勧めします。こうすることによって，デザインと内容を切り分けることができますし，複数のページを同じデザインにできるので統一感が得られます。

CSSをその場だけで使うことも可能です。例えば特定のページの本文だけ余白を 5% に設定したいなら，そのHTMLファイルの <body> タグを次のようにします：

<body style="margin:5%">

このように最後のセミコロン ; は省略してもかまいません。

Last modified: