初心者による初心者のためのゲームアプリ作成 6

CSSを学ぼう。

CSS(Cascading Style Sheets)とは、HTML文書を装飾するための技術なんですけど、具体的に言いますと、画面の背景や文字の色設定を行ったり、文字や画像のサイズ、表示位置を調整したりと、画面にデザインを適用するために使われます。色やサイズなどの1つ1つのデザインのことを「スタイル」と呼びます。「Cascading」は重ね合わせるといった意味がある言葉ですので、CSS(Cascading Style Sheets)は、たくさんのスタイルを重ね合わせてデザインを完成させるための文書と、いう意味になります。直訳するとですが。



CSSをHTMLファイルに読み込む方法

CSSは、HTMLファイルの中に読み込む形で利用します。まず、CSSのコードのみのファイルを記述し、拡張子を.cssとして保存します。次に、HTMLファイルに<link>タグを記述し、href属性にCSSファイルのパスを指定してあげます。

<link rel=”stylesheet” href=”CSSファイルのパス”>

Monacaにログインし、最小限のテンプレートのプロジェクトを開いてみて下さい。エディター画面に開かれたindex.htmlファイルの9行目に、

<link rel=”stylesheet” href=”css/style.css”>

と書かれているはずです。まさしく、これですね。

CSSの書き方

CSSを記述する際には、「どの要素に対して」「どのようなスタイル」を適用するのか、の2つの情報が必要となります。「どの要素に対して」は、「セレクタ」という仕組みでタグなどを指定します。また、「どのようなスタイル」は、「プロパティ」と「値」で指定します。プロパティには、文字の色や背景色またはサイズなどいろいろなものが用意されており、適応させたい色や数値を値として指定できます。

セレクタとプロパティの記述方法と記述例

セレクタ{

プロパティ : 値;

プロパティ:     値 ;

}

p {

color:   red;

font-size:   10px;

}

この記述例では、HTMLファイル内の<p>タグに対して、文字の色を赤に、フォントサイズを10pxにするという指定をしています。

※ px (ピクセル)

コンピューター上に表示される写真や図形などは、ピクセルという点の集合によって描画されています。その点1つが1pxです。基本的にアプリの画面を作成するときはこのpxという単位を使います。

セレクタの種類

セレクタは対象要素を指定する方法で、複数の種類があります。タグ名が同じ要素すべてにスタイルを適用したい場合と、1つの要素に対してのみスタイルを指定したい場合とでは、利用するセレクタが違います。状況に応じて適切なセレクタを指定しましょう。

●タグセレクタ

対象要素をタグ名で指定します。

記述例 タグ名{・・・・・} p{・・・・・}

●IDセレクタ

対象要素をID属性値で指定します。ID属性値はHTMLファイルの中で重複する値を指定できないので、特定の要素1つだけにスタイルを適用したい場合に使います。

記述例 #ID{・・・・・}  #id1122{・・・・・}

●クラスセレクタ

CSSにおいては、クラスは、スタイルをひとまとめにして名前を付けたもののことです。クラスはどのタグに対しても付けることができるので、複数の要素の中から任意の要素を選択してスタイルを適用したい場合に使用します。

記述例 .クラス名{・・・・・} .className{・・・・・}

ちょっと、実践して見ようかと思いますが、次回にします。すみません。


スポンサーリンク