てけとーぶろぐ。

ソフトウェアの開発と、お絵かきと、雑記と。

AndroidでWebサイトを作る(3)

まだ自分のスマホ/タブレットからしか見ることはできないものの、一応これでWebサイトを作ったと言えないこともない…。 ですけど、見た目があまりに味気ないですし、最終的には簡単なゲームのWebアプリにしたいのでその準備も兼ねてもう少し手を入れてみます。

Webサイトを構成するファイル

Webサイトを構成するファイルとして代表的なものとしては、既に作成したHTMLファイルの他、CSSファイルとJSファイルがあげられます。 HTMLファイルに書かれるHTMLは主にWebサイトの構造を定義しているのに対して、CSSファイルに書かれるCSSは見た目を定義し、JSファイルに書かれるJavaScriptプログラミング言語でありプログラムにもとづいてWebサイトに動きを与えたりします。

まずはWebサイトの見た目を変えたいのでそれであればCSSを書くことになります。

HTMLからのCSSのリンクとJavaScriptの指定

CSSファイルやJSファイルは、単にそれらを用意するだけでは役割を果たしません。HTMLファイルからCSSファイルをリンクしたり、JSファイルを指定したりする必要があります。

実際にやってみましょう。index.htmlの内容を以下のようにします。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>title</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  Hello!
</body>

</html>

今までのindex.htmlからの変更箇所は以下の通りです。

* 「<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">」の追記
* 「<link rel="stylesheet" href="style.css">」の追記
* 「<script src="script.js"></script>」の追記
* 「<body>」と「</body>」に囲まれた文言を変更

以下のURLにアクセスしてコピーしてくると簡単です。

https://github.com/kurima-yoshida/web-dev-on-android/blob/main/css-sample/index.html

HTMLファイルに

<link rel="stylesheet" href="style.css">

と書くことでこのHTMLファイルからCSSファイル「style.css」にリンクします。これによってこのHTMLファイルのHTMLの見た目を定義するCSSとして「style.css」のCSSが使われることになります。

またHTMLファイルに

<script src="script.js"></script>

と書くことで「script.js」の内容のJavaScriptがここに埋め込まれているのと同じことになります。これによって「script.js」にWebサイトで実行したい処理のプログラムを書いてWebサイトで実行されるようにできます。

CSSファイルの作成

「index.html」ファイルからリンクするようにしたCSSファイル「style.css」を作成しましょう。

手順の流れはやはりHTMLファイルの作成と同じです。Termuxで以下のコマンドを実行します。

micro style.css

HTMLファイルはHTML言語で記述しました。CSSファイルはCSSという言語で記述します。

「style.css」の内容を以下のようにします。

html {
    height: 100%;
}

body {
    background-color: #00bfff;
    color: white;
    font-size: 40px;
    margin: 0;
    height: 100%;
    user-select: none;
    display: flex;
    flex-direction : column;
    align-items: center;
    justify-content: center;
}

以下のURLにアクセスしてコピーしてくると簡単です。

https://github.com/kurima-yoshida/web-dev-on-android/blob/main/css-sample/style.css

内容を大まかに説明します。

* 「html {…}」はHTML中の「<html>」と「</html>」で囲われた部分に対する見た目の定義であることを表しています。
* 「height: 100%;」は高さを「100%」つまりこの要素を囲む要素いっぱいの高さとしています。
* 「body {…}」はHTML中の「<body>」と「</body>」で囲われた部分に対する見た目の定義であることを表しています。
* 「background-color: #00bfff;」は背景色を「#00bfff」で表される色である水色としています。
* 「color: white;」はテキストなどの色を「white」つまり白としています。
* 「font-size: 40px;」は文字サイズを「40px」つまり40ピクセルとしています。
* 「margin: 0;」はマージン、外周の余白を、「0」つまりなしとしています。
* 「height: 100%;」は高さを「100%」つまりこの要素を囲む要素いっぱいの高さとしています。
* 「user-select: none;」はユーザーがテキストを範囲選択できないようにしています。* 「display: flex;」は要素のコンテンツのレイアウトをフレックスボックスレイアウトと呼ばれる種類のものにしています。これにより後の「flex-direction」「align-items」「justify-content」の指定が有効になります。

* 「flex-direction : column;」は要素内のアイテムを縦方向に並べるようにしています。
* 「align-items: center;」「justify-content: center;」は左右中央、上下中央に配置するようにしています。
仮のJSファイルの作成

ひとまずJSファイルは作成だけして内容は空にしておきましょう。 特にプログラムを書いていないわけですから特に何も実行されないことになります。

micro script.js

microが起動したら何も入力せずに保存して終了します。

CSSの効果の確認

Webサーバーを起動してWebブラウザーでWebサイトにアクセスして表示を確認してみてください。CSSによって見た目が変わったでしょうか?