HTML/CSS/JavaScript入門
HTML
CSS
/* style.css */
body {
background: #d5b47a;
text-align: center;
}
h1 {
color: #f28566;
}<!-- main_css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- ここにlinkタグを追加 -->
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<h1>main_css.html</h1>
</body>
</html>
/* style.css */
body {
/*ページ全体の背景色をベージュに*/
background: #d5b47a;
/*全文字を中央揃えに*/
text-align: center;
}
h1 {
/*h1タグの文字色を変える*/
color: #f28566;
}
#headline {
/*id="headline"の下に点線を引く*/
border-bottom: dotted 2px #9a17ec;
}
#headline p {
/*id="headline"の中のpタグのフォントサイズを0.5倍に*/
font-size: 0.5em;
}
.main {
/*class="main"の中の背景色を白に*/
background: white;
}
.main h2 {
/*class="main"の中のh2タグの文字色を青に*/
color: blue;
}
.light {
/*class="light"の中の背景色と文字色を変える*/
background: #4a4847;
color: white;
}
h2 {
/*h2タグの文字色を緑に*/
color: green;
}
a {
/*リンクの文字色を赤に*/
color: red;
}<!-- main_css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="headline">
<h1>CSS入門</h1>
<h2>これは見出しです。</h2>
<p>これは段落です。</p>
</div>
<div class="main">
<h2>これは見出しです。</h2>
<p>これは<span class="light">例</span>です。</p>
<p>
<a href="hello.html">こんにちは</a>
</p>
</div>
</body>
</html>
JavaScript
// sample.js
console.log('Sample Message!');<!-- main_js.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<h1>main_js.html</h1>
<!-- ここにscriptタグを追加 -->
<script src="./sample.js"></script>
</body>
</html>
// sample.js
let now = new Date();
console.log(now);更新ボタンを押し、出力結果を確認する
// sample.js
for (let i = 0; i < 5; i++) {
console.log((i + 1) + '回目の処理');
}更新ボタンを押し、出力結果を確認する
// sample.js
let num = 10;
if (num > 5) {
console.log("numは5より大きい");
}更新ボタンを押し、出力結果を確認する
// sample.js
function inputChange(event) {
msg.innerText = 'お名前は' + nameText.value + 'さんですね';
}
let nameText = document.getElementById('nameText');
nameText.addEventListener('change', inputChange);
let msg = document.getElementById('msg');// sample.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<label>名前：<input type="text" id="nameText"></label>
<p id="msg"></p>
<script src="./sample.js"></script>
</body>
</html>更新ボタンを押し、ブラウザ画面を確認する
