QuestScript

06. CSSファイル

レッスン5では、<style>タグを使ってCSSをHTMLの中に書きました。このレッスンでは、CSSを別ファイルに切り出し、さまざまなスタイルを適用していきます。

CSSファイルに切り出す

スタイルが増えてくると、HTMLファイルが長くなって見づらくなります。CSSを別ファイルに切り出しましょう。

battle.htmlと同じ場所にcssフォルダを作り、その中にbattle.cssというファイルを作ってください。

battle.html
css/
  └── battle.css
img/
  ├── dark-knight.png
  ├── dark-lord.png
  └── demon-priest.png

battle.cssに、<style>タグの中身をコピーします。

/* battle.css */
table {
    border: solid 1px black;
    border-collapse: collapse;
}
.name-row {
    border-bottom: solid 1px black;
}
img {
    width: 400px;
}

HTMLの<style>タグを削除し、代わりに<link>タグでCSSファイルを読み込みます。

<!-- battle.html highlight:6 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table>
        <tr class="name-row">
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div>
        <img src="img/dark-lord.png">
    </div>
    <div>
        まおうがあらわれた。
    </div>
</body>
</html>

linkタグ

<link>タグは、外部ファイルを読み込むためのタグです。

背景色と文字色を変える

RPGのバトル画面らしく、暗い背景に白い文字にしましょう。battle.cssに追記します。

/* battle.css highlight:1-4 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
}
table {
    border: solid 1px black;
    border-collapse: collapse;
}
.name-row {
    border-bottom: solid 1px black;
}
img {
    width: 400px;
}

ブラウザで確認すると、背景が暗いグレーに、文字が白色になります。

色の指定

色は以下の方法で指定できます。

RGBは光の三原色（Red：赤、Green：緑、Blue：青）の頭文字です。この3色を混ぜることで、さまざまな色を表現できます。

それぞれの値は0〜255の範囲で指定します。0が最も暗く、255が最も明るくなります。

色 指定方法 説明
rgb(0, 0, 0) 黒（すべて0）
rgb(255, 0, 0) 赤
rgb(0, 255, 0) 緑
rgb(0, 0, 255) 青
rgb(255, 255, 0) 黄（赤+緑）
rgb(255, 0, 255) 紫（赤+青）
rgb(0, 255, 255) 水色（緑+青）
rgb(255, 255, 255) 白（すべて255）
rgb(34, 34, 34) 暗いグレー（すべて同じ値でグレーになる）

フォントを変える

フォントも変えてみましょう。bodyにfont-familyを追加します。

/* battle.css selection:1-5 highlight:4 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 1px black;
    border-collapse: collapse;
}
.name-row {
    border-bottom: solid 1px black;
}
img {
    width: 400px;
}

sans-serifは、ゴシック体のフォントを指定します。

テーブルのスタイルを整える

罫線の色を白に変えましょう。

/* battle.css selection:6-12 highlight:7,11 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
}
.name-row {
    border-bottom: solid 1px white;
}
img {
    width: 400px;
}

メッセージボックスにスタイルを適用する

「まおうがあらわれた。」のメッセージボックスにも枠線をつけましょう。

まず、メッセージの<div>にid="message"を追加します。

<!-- battle.html selection:19-21 highlight:19 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table>
        <tr class="name-row">
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div>
        <img src="img/dark-lord.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
</body>
</html>

CSSで#messageと指定してスタイルを適用します。

/* battle.css selection:13-20 highlight:16-20 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
}
.name-row {
    border-bottom: solid 1px white;
}
img {
    width: 400px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
}

id属性

id属性は、要素に一意な名前を付けるための属性です。ページ内で同じidを持つ要素は1つだけにする必要があります。

CSSでidを指定するには、id名の前に#を付けます。

他の要素にもidを付ける

ステータス表とモンスター画像にもidを付けて、スタイルを適用しましょう。

<!-- battle.html selection:9-21 highlight:9,16 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr class="name-row">
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img src="img/dark-lord.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
</body>
</html>

ステータス表を中央寄せにする

ステータス表が左寄せのままだと不自然です。中央寄せにしましょう。

/* battle.css selection:6-12 highlight:9 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
}
.name-row {
    border-bottom: solid 1px white;
}
img {
    width: 400px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
}

marginと中央寄せ

marginプロパティは、要素の外側の余白を指定します。値を4つ指定すると、上・右・下・左の順に余白が設定されます。

margin: 10px auto 0 auto;
/*      上   右   下  左  */

左右の値をautoにすると、左右の余白が自動的に均等になり、要素が中央に配置されます。

ついでに、上にも余白がないと不自然なので10pxを指定します。

幅を指定する

今のままだと、ステータス表とメッセージボックスの幅が違いすぎて不自然です。それぞれに幅を指定しましょう。

/* battle.css selection:6-11 highlight:10 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    width: 640px;
}
.name-row {
    border-bottom: solid 1px white;
}
img {
    width: 400px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
    width: 720px;
}

/* battle.css selection:18-23 highlight:22 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    width: 640px;
}
.name-row {
    border-bottom: solid 1px white;
}
img {
    width: 400px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
    width: 720px;
}

メッセージボックスを中央寄せにする

メッセージボックスも中央寄せにしましょう。

/* battle.css selection:18-24 highlight:23 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    width: 640px;
}
.name-row {
    border-bottom: solid 1px white;
}
img {
    width: 400px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
    width: 720px;
    margin: 30px auto;
}

marginの値が2つの場合は「上下・左右」の順になります。

margin: 30px auto;
/*      上下  左右 */

ここでは、左右にautoを指定して中央寄せし、下部やモンスター画像との間に余白を設けるために上下に30pxを指定しています。

テーブルのセルを中央寄せにする

HPやMPの表示が左寄りになっていて不自然です。テーブルのセル内のテキストを中央寄せにしましょう。

/* battle.css selection:12-20 highlight:15-17 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    width: 640px;
}
.name-row {
    border-bottom: solid 1px white;
}
td {
    text-align: center;
}
img {
    width: 400px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
    width: 720px;
    margin: 30px auto;
}

text-align: centerは、要素の中身を中央寄せにします。margin: autoは要素自体を中央に配置しますが、text-alignは要素の中のテキストや子要素を中央に配置します。

tdの中身を中央寄せすることで、HPやMPの表示を中央寄せ表示できます。

モンスター画像を中央寄せにする

同様に、モンスター画像もtext-alignで中央寄せにします。ついでに上に余白を追加しましょう。

/* battle.css selection:15-24 highlight:18-21 */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    width: 640px;
}
.name-row {
    border-bottom: solid 1px white;
}
td {
    text-align: center;
}
#monster {
    text-align: center;
    margin-top: 40px;
}
img {
    width: 400px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
    width: 720px;
    margin: 30px auto;
}

margin-topは上方向だけに余白を追加します。

試してみよう

これまでの成果

<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr class="name-row">
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img src="img/dark-lord.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
</body>
</html>

/* battle.css */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    width: 640px;
}
.name-row {
    border-bottom: solid 1px white;
}
td {
    text-align: center;
}
#monster {
    text-align: center;
    margin-top: 40px;
}
img {
    width: 400px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
    width: 720px;
    margin: 30px auto;
}
arrow_back前へ次へ: 07. CSSセレクタarrow_forward