CSS After

CSS を適用する

JavaScript と CSS は別物ですが、JavaScript でゲームを作成するとき CSS の機能が良く使われます。
CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。
HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

CSSは、HTMLと組み合わせて使用する言語です。
HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。
例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、プリンタなどの機器で印刷・出力される際の出力スタイル、音声で読み上げられる際の再生スタイルなど、ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。
HTMLでは文書構造のみを定義して、スタイルについてはスタイルシートで指定することが推奨されています。

HTML4.01やXHTML1.0では

フォントの設定

ヘッダーの表示

フォントのサイズ
フォントの色
サイズと色

などを指定できます。
装飾目的の属性については現在のところ非推奨(deprecated)とされながらも使用することができますが、 HTMLの次世代バージョンとなるHTML5では、<center>や<font>などは廃止される予定となっています。
詳細は CSSの基本を参照して下さい。

このページの head と body の抜粋です。
link から "test.css" をリンクしています。
[div class="xx"], [span class="xx"], [img class="xx"] などから CSS を参照します。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="test.css" type="text/css">
<title>CSS</title>
</head>

<body>
<h1>CSS After</h1> 
<h2>CSS を適用する</h2>

<div class="ff">JavaScript と CSS は別物ですが、JavaScript でゲームを作成するとき CSS の機能が良く使われます。<br>
CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。<br>
HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。</div><br>

<div class="e0">CSSは、HTMLと組み合わせて使用する言語です。<br>
HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。<br>
例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。<br>
HTMLでは文書構造のみを定義して、スタイルについてはスタイルシートで指定することが推奨されています。</div><br>

HTML4.01やXHTML1.0では<br>
<h1>フォントの設定</h1>
<h2>ヘッダーの表示</h2><br>
<span class="s1">フォントのサイズ</span>
<span class="red">フォントの色</span><br><br>

などを指定できます。<br>

装飾目的の属性については現在のところ非推奨(deprecated)とされながらも使用することができますが、 HTMLの次世代バージョンとなるHTML5では、<center>や<font>などは廃止される予定となっています。<br>
詳細は <a href="http://www.htmq.com/csskihon/">CSSの基本</a> を参照して下さい。<br><br></div>

<p><img src="img/bar_gh.gif" class="bar"></p>

"test.css" のソースコードです。
css_after.html が格納されているフォルダーに格納して下さい。
CSS 専用のフォルダーを作成するケースが多いかも知れませんが、解りやすいので直接格納することにします。
body や div では背景色を設定しています。
h1 では位置の調整とフォントの種類を設定しています。
h2 では文字のサイズとアンダーラインを設定しています。
span.red では文字の色を設定しています。
span.s1 と span.s2 では文字のサイズを設定しています。
img.bar では画像の幅と高さを設定しています。
CSS 適用前の CSS Before と比較してみて下さい。

@charset "utf-8";

body
{   background-color:#e8f0f8;   /*ページ全体の背景色*/
}
h1
{   padding:20px 0px 0px 30px;  /*見出し内容の位置調整*/
    font-family:Arial, Helvetica, sans-serif;   /*フォントの種類*/
}
h2
{   font-size:16pt; margin-bottom:10px;
    border-bottom:solid 1px #cccccc;
}
div.ff
{   text-align:left;
    background-color:#ffffe0;   /*内容全体の背景色*/
}
div.e0
{   text-align:left;
    background-color:#e0e0e0;
}
span.red
{   color:#e02020;
}
span.s1
{   font-size:20pt;
}
span.s2
{   font-size:16pt;
}
img.bar
{   width: 100%;
    height: 8px;
}

CSS(Cascading Style Sheets) の Cascading は直列を意味します。
CSS ファイルは一個だけでなく、複数のファイルを直列にリンクすることが出来ます。
最初のファイルは今まで説明したように head の中から link します。

<link rel="stylesheet" href="test.css" type="text/css">

二個目からは、link された CSS ファイルの先頭で次のように link します。
"test.css" から "javascript.css" をリンクする例です。

@charset "utf-8";
@import url("javascript.css");

重複して定義された場合は後から定義した方が優先されます。
私が提供している Mapedit.exe で作成した CSS ファイルを複数 link すると沢山の重複定義が生じるので注意して下さい。

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)