はじめてのCSS

スタイルを変えてみよう

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のホームページ</title>
<meta name="viewport" content="width=device-width">
<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: