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

CSSの実践

前回の続きです。HTMLファイルの中に読み込まれているCSSファイルを記述して、画面を装飾してみましょう。Monacaにログインし、最小限のテンプレート、プロジェクトを開いて下さい。このブログのとうりに進めていれば、開かれたindex.htmlファイルは、下記のようになっているはずです。



<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
<meta http-equiv=”Content-Security-Policy” content=”default-src * data: gap: content: https://ssl.gstatic.com; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval'”>
<script src=”components/loader.js”></script>
<link rel=”stylesheet” href=”components/loader.css”>
<link rel=”stylesheet” href=”css/style.css”>
<script>
</script>
</head>
<body>
<br />
<a href=”http://www.google.co.jp/”>グーグルへ</a>
</body>
</html>

それでは、画面左側のプロジェクトパネルのCSSフィルダーをダブルクリックして、style.cssファイルをダブルクリックしてみてください。エディター画面にstyle.cssファイルの画面が表示されると思います。その2行目に、

a {
font-size: 40px;
}

to

と記述し、メニューバーの保存をクリックしてみてください。プレビュー画面で確認すると、リンクの文字列の大きさが変更(40px)されていることがわかりますね。これがタグ(a)セレクタによる指定の方法です。

続いて、IDセレクタを試してみましょうか。それには、まず、index.htmlファイルを開き、

<a href=”http://www.google.co.jp/”>グーグルへ</a>の部分を、

<a href=”http://www.google.co.jp/” id=”target”>グーグルへ</a>と書き換えて保存します。

次に、style.cssファイルを開き、

/**/
a {
font-size: 40px;
}

#target {
color: red;
}

#target以下の部分を追加し、保存すると、プレビュー画面には、「グーグルへ」というリンク文字列が赤い色に装飾されて表示されるはずです。最後に、クラスセレクタによる指定方法を試してみようかと思いましたが、ここでは、省かせていただきたいと思います。すみません。

次回は、CSSのプロパティについて、記述したいと思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です