5-1. ほぼカラのHTML
5-2. FormとCSSデザイン
5-3. JavaScriptを読み解く
5-4. Bootstrap でデザインを効率化する
5-5. ライブラリ［p5.js］でキャンバスに絵を描画
5-6. Google Chart でグラフを描く
5-7. 3Dグラフィックを描く
WEBサイトの基本、HTMLとCSSでホームページをデザインします。
前提：第4章のNginxインストールとWEBサイトの初期設定が完了していること
WEBサイトのコンテンツファイルの置き場所は、デフォルトのディレクトリが［/var/www/html］ですが、［/home/ユーザー名/www1］などに変更することもできます。
最小限のHTMLとCSSを記述してWEBページを作ってみましょう。
目次［index.html］を表示してみる
新しいHTMLファイル［/home/ユーザー/www1/index.html］を作成して、ブラウザで表示してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap デザイン</title>
</head>
<body>
<div class="container">
<h1>目次</h1>
<p>WEBサイト制作の学習</p>
<ul>
<li><a href="test1.html">ほぼカラのHTML</a></li>
<li><a href="test2.html">FormとCSSデザイン</a></li>
<li><a href="test3.html">Bootstrapでデザインを効率化</a></li>
</ul>
</div>
</body>
</html>
5-1. ほぼカラのHTML
新しいHTMLファイル［/home/ユーザー/www1/test1.html］を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブデザイン</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>レスポンシブデザインの例</h1>
<p>このページは異なるデバイスに適応するように設計されています。</p>
</div>
</body>
</html>ブラウザでWEBサイトにアクセスして検査します［http://******/test1.html］
新しいCSSファイル［/home/ユーザー/www1/styles.css］を作成します。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
}
.container {
width: 90%;
max-width: 1200px;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #333;
}
@media (max-width: 768px) {
.container {
width: 95%;
}
}ブラウザでWEBサイトにアクセスして検査します
5-2. FormとCSSデザイン
まずはCSS無しのHTMLを表示してみましょう
新しいファイル［test2.html］を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>天気カード</title>
</head>
<body>
<div class="form-box">
<input type="text" id="weather" placeholder="天気">
<input type="text" id="temperature" placeholder="気温">
<button onclick="updateCard()">表示</button>
</div>
<div class="card">
<img src="https://funnygeekjp.com/mnt/wp-content/uploads/2024/06/image-13.png" alt="天気画像" style="width:300px;">
<div class="card-text" id="cardText">
今日の天気は＿＿です。気温は＿℃。
</div>
</div>
<script>
function updateCard() {
const weather = document.getElementById('weather').value;
const temperature = document.getElementById('temperature').value;
document.getElementById('cardText').textContent = `天気は${weather}です。気温は${temperature}℃。です。`;
}
</script>
</body>
</html>ブラウザで表示してみましょう［http://*****/test2.html］
HTMLファイルの<head></head>内に下記を追加します。
<style>
body {
background-color: #e0f7fa;
font-family: sans-serif;
padding: 20px;
}
.form-box {
background-color: #b2ebf2;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.form-box input {
margin: 5px;
padding: 8px;
border: 1px solid #81d4fa;
border-radius: 4px;
}
.form-box button {
padding: 8px 16px;
background-color: #4dd0e1;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
.card {
background-color: #ffffff;
border: 1px solid #81d4fa;
border-radius: 10px;
padding: 15px;
display: flex;
align-items: center;
max-width: 400px;
}
.card img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 8px;
margin-right: 15px;
}
.card-text {
color: #0277bd;
font-size: 16px;
}
@media (max-width: 768px) {
.container {
width: 95%;
}
}
</style>ブラウザで表示してみましょう［http://*****/test2.html］
テキスト入力して［表示］ボタンも試します
5-3. JavaScriptを読み解く
［表示］ボタンを表示する。押すと、updateCard()関数が実行される
<button onclick="updateCard()">表示</button>JavaScript の updateCard()関数は、FormのInput BOXから天気と気温の値を取り出し、’cardText’の場所にテキストを書き込みます
function updateCard() {
const weather = document.getElementById('weather').value;
const temperature = document.getElementById('temperature').value;
document.getElementById('cardText').textContent = `天気は${weather}です。気温は${temperature}℃。です。`;
}‘cardText’は下記<div>タグの場所です
<div class="card-text" id="cardText"></div>5-4. Bootstrap でデザインを効率化する
WEBページ（HTML）を美しいデザインで表示するにはCSSを駆使しなければなりません。
CSSでデザインするには、知識と経験が必要で、CSSをテストする時間がかかります。
今度はCSSをあらかじめ設定されているBootstrapを使って効率的なデザインを体験します。
新しいファイル［test3.html］を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap デザイン</title>
</head>
<body>
<div class="container">
<h1>Bootstrap デザインを体験する</h1>
<p>このページは HTML タグだけで表示されています</p>
</div>
</body>
</html>ブラウザで表示してみます
作成したHTMLの <head></head>内に Bootstrap のアドレスへのリンクを追加します
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">HTMLの <hody></body>内に、パーツを追加します。
InputBOXのサンプル
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">ラベルの例</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="何かテキスト入力してね">
</div>ブラウザで表示してみます
先ほどのInputBOXのサンプルを <div class=”container”></div>タグ内に移動してブラウザで表示してみます
Buttonsのサンプル
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>ブラウザで表示してみます
Bootstrap まとめ
あらかじめ美しいデザインが定義されている Bootstrap を使うと、CSSでデザインする作業を効率化できます。
5-5. ライブラリ［p5.js］でキャンバスに絵を描画
p5.jsライブラリの参照
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>新しいファイル［ufo.html］を作成してブラウザで表示してみましょう
WEBブラウザのキャンバス（Canvas）でグラフィックを描き、キーボード［←］［→］でUFOを操作します。
UFOを描く関数
・初期設定
・function setup() 最初の場所
・function draw() ずっとグラフィックを描く
・function preStar() 星の配置
・function drawStar() 星を描く
・function initUFO() UFOの配置
・function drawUFO() UFOを描く［外部ファイル］
・function setGradient(x, y, w, h, c1, c2, axis)ufo.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>夜空のUFO</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<script src="skyufo.js"></script>
</body>
</html>同じディレクトリにファイル［skyufo.js］を作ります
let ufoX, ufoY;
let ufoSpeed = 5;
function initUFO() {
ufoX = width / 2;
ufoY = height / 2;
}
let star = [];
const Y_AXIS = 1; // グラデーションの方向
function setup() {
createCanvas(windowWidth, windowHeight).position(0, 0).style("z-index", "-1");
colorMode(RGB);
frameRate(60);
preStar();
initUFO();
}
function draw() {
setGradient(0, 0, width, height, color(0, 0, 0), color(24, 32, 72), Y_AXIS);
noStroke();
drawStar();
drawUFO(); // ← skyufo.js に定義された関数を呼び出し
}
function preStar() {
for (let i = 0; i < 100; i++) {
star.push([random(width), random(height / 2), random(1, 4)]);
}
}
function drawStar() {
for (let s of star) {
let c = color(random(150, 255), random(150, 255), 255);
c.setAlpha(random(150, 200));
fill(c);
ellipse(s[0], s[1], s[2], s[2]);
}
}
function setGradient(x, y, w, h, c1, c2, axis) {
noFill();
for (let i = y; i <= y + h; i++) {
let inter = map(i, y, y + h, 0, 1);
stroke(lerpColor(c1, c2, inter));
line(x, i, x + w, i);
}
}
function drawUFO() {
if (keyIsDown(LEFT_ARROW)) {
ufoX -= ufoSpeed;
}
if (keyIsDown(RIGHT_ARROW)) {
ufoX += ufoSpeed;
}
ufoX = constrain(ufoX, 0, width);
fill(200, 255, 255);
ellipse(ufoX, ufoY, 60, 30);
fill(150);
ellipse(ufoX, ufoY - 10, 40, 20);
}WEBブラウザで［ufo.html］を表示して動作テストします。
5-6. Google Chart でグラフを描く
新しいファイル［chart.html］を作って、下記コードを実行してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>グラフ描画</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- google script -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h1>Google Chart</h1>
<p><a href="https://developers.google.com/chart" target="_blank">Google Charts</a>, ガイド＆リファレンス</p>
<!-- 円グラフを追加 -->
<div id="donutchart" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Point'],
['Tokyo', 10],
['Osaka', 5],
['Sapporo', 30],
['Nagoya', 3],
['Okinawa', 2],
['Fukuoka', 1]
]);
var options = {
title: 'タイトルxxxxxxxxxxxxxxxxxx',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
<h2>▼グラフを表示するHTMLおよび、HTML内に記述したJavascript</h2>
<pre><code>
<!-- google script -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Point'],
['Tokyo', 10],
['Osaka', 5],
['Sapporo', 30],
['Nagoya', 3],
['Okinawa', 2],
['Fukuoka', 1]
]);
var options = {
title: 'タイトルxxxxxxxxxxxxxxxxxx',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
</code></pre>
<!-- 応用 -->
<h3>▼データを入れ替えて、グラフを描画する</h3>
<input type="button" value="データ１でグラフ描画" onclick="drawChart2(1);" />
<input type="button" value="データ２でグラフ描画" onclick="drawChart2(2);" />
<!-- 棒グラフを追加 -->
<div id="barchart" style="width: 900px; height: 500px;"></div>
<!-- 折れ線グラフここまで -->
<div id="linechart" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
//google.charts.setOnLoadCallback(drawChart2(1));
function drawChart2( intNumber ) {
var data1 = google.visualization.arrayToDataTable([
['Type', 'Point'],
['Tokyo', 10],
['Osaka', 5],
['Sapporo', 30],
['Nagoya', 3],
['Okinawa', 2],
['Fukuoka', 1]
]);
var data2 = google.visualization.arrayToDataTable([
['Type', 'Point'],
['Tokyo', 2],
['Osaka', 10],
['Sapporo', 14],
['Nagoya', 22],
['Okinawa', 18],
['Fukuoka', 28]
]);
var options = {
title: 'タイトルxxxxxxxxxxxxxxxxxx',
};
if (intNumber==1) {
data = data1;
} else {
data = data2;
}
// 棒グラフを追加
var chart = new google.visualization.BarChart(document.getElementById('barchart'));
chart.draw(data, options);
var chart = new google.visualization.LineChart(document.getElementById('linechart'));
chart.draw(data, options);
// 棒グラフここまで
}
</script>
</body>
</html>5-7. 3Dグラフィックを描く
新しいファイル［3d.html］を作って、下記コードを実行してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>３Ｄ描画|かの</title>
<!-- 最新のp5ライブラリはここで見つける https://cdnjs.com/libraries/p5.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
</head>
<body>
<h1>かの「３Ｄ描画をお試し」</h1>
<div id="キャンバスの位置"></div>
<p>マウスで斜め右上からの視点に切り替えて、キーボード操作することを推奨</p>
<p>矢印キー［左右］で横。［上下］で奥行き。［スペースキー］でジャンプ。［z, x］［a, s］［q, w］で回転。</p>
<p>マウス左ボタン押しながら、キャンバスを左右上下斜めに操作可能。</p>
<p>マウス右ボタン押しながら、キャンバスをズーム、横ずらし操作可能。</p>
<script>
"use strict";
// 宣言
let angle = {
x: 0,
y: 0,
z: 0
};
let player = {
x: 0,
y: 0,
jump: false,
z: 0,
grav: 0
};
// キーボード入力の機能を追加
addEventListener( "keydown", keydownfunc );
//キャンバス：最初の1回だけ実行
function setup(){
createCanvas(1024, 600, WEBGL).parent('キャンバスの位置'); // WebGLモードでキャンバスを作成（Graphic Libraly）
angleMode(DEGREES); // 角度（ラジアンでなく、角度°）
debugMode(); // デバッグモード（地平線や角度の起点を表示する！！）
normalMaterial(); // デバッグ向けマテリアル
createCamera().camera(100, -100, 360, 0, 0, 0, 0, 1, 0);
}
//キャンバス：ずーっと↓ここを繰り返す
function draw(){
background("#883333"); // 背景の色：常に上書きして前のフレームを消す
orbitControl(); // オービット制御（ぐりぐり）
rotateX(angle.x);
rotateY(angle.y);
rotateZ(angle.z);
translate( player.x, player.y, player.z );
// 座標を設定してから立体を描くこと
box(50, 60, 200 ); // box( 幅, 高さ, 奥行き, ?, ? ) ?はサブディビジョン数4以下
sphere(50);
rotateX(-90);
translate(0,140,0);
cone(35,80,40);
//angle += 1;
if( player.jump == true ) { // ジャンプ中ならば、スクリプトを実行
player.grav += 1; // ジャンプ加速度を減らす
if( player.grav > 18 ) player.jump = false; // ジャンプ着地したらリセット
player.y += player.grav; // 高さ = Y座標 + ジャンプ加速度
}
}
// キー操作
function keydownfunc(event) {
var key_code = event.keyCode;
if( key_code === 88 ) angle.y -= 8; //[x]
if( key_code === 90 ) angle.y += 8; //[z]
if( key_code === 65 ) angle.x -= 8; //[a]
if( key_code === 83 ) angle.x += 8; //[s]
if( key_code === 81 ) angle.z -= 8; //[q]
if( key_code === 87 ) angle.z += 8; //[w]
if( key_code === 37 ) player.x -= 8; //左
if( key_code === 38 ) player.z -= 8; //上
if( key_code === 39 ) player.x += 8; //右
if( key_code === 40 ) player.z += 8; //下
if( key_code === 32 ) { player.jump = true; player.grav = -20; } //スペースキー
}
</script>
</body>
</html>以上で、この章は終了です