メディア工房サマーワークショップ「Webアプリ制作」お手元の資料

Web アプリ製作関連資料
1
ページの基本型
<!DOCTYPE 文書型宣言>
<html>
<head>
ページの各種情報
</head>
<body>
ページの内容
</body>
</html>
ページの構造を示す要素
header 要素…ページのヘッダー部分
nav 要素…ページのナビゲーション
section 要素…セクション全般、章・節・項など
article 要素…内容が自己完結するセクション、記事など
aside 要素…メインの内容ではないセクション、補足・広告・サイドバーなど
footer 要素…ページのフッター部分
<header>
<h1>サイトのタイトル</h1>
<nav>
<ul>
<li><a href="index.html">トップへ</a></li>
<li><a href="gallary.html">ギャラリー</a></li>
<li><a href="about.html">このサイトについて</a></li>
</ul>
</nav>
</header>
<section>
<h2>見出し</h2><p>おれのサイトです。ゆっくりしていけ</p>
</section>
<footer>
Copyright © 2013 おれ
</footer>

2

<div id="header">
<h1>サイトのタイトル</h1>
<div id="navigator">
<ul>
<li><a href="index.html">トップへ</a></li>
<li><a href="gallary.html">ギャラリー</a></li>
<li><a href="about.html">このサイトについて</a></li>
</ul>
</div>
</div>
<div>
<h2>見出し</h2><p>おれのサイトです。ゆっくりしていけ</p>
</div>
<div id="footer">
Copyright © 2013 おれ
</div>

主なブロックレベル要素
h1~h6 要素…見出し
<h1>第 1 章</h1>
<h2>第 1 節</h2>
<section><h3>第 1 項</h3>
<p>本文</p></section>
<section><h3>第 2 項</h3>
<p>本文</p></section>
p 要素…段落
<p>現在のメモリ、ＣＰＵなどの状態をボカロキャラの表情と文字でお知らせする Windows サイ
ドバーガジェットです</p>
pre 要素…整形済みテキスト
半角スペースや改行があってもそのまま表示する。プログラムのソースコードなどに使用

3
<pre>
1.5 beta（2013/ 3/15）
従来の半分のサイズになり実用性が増しました
ソースコードが気に食わなかったので作り直し
</pre>
table 要素…表
tr 要素…表の行
td 要素…表の列
<table>
<tr>
<td>正常</td>
<td>注意</td>
</tr>
<tr>
<td>緑</td>
<td>黄</td>
</tr>
</table>
ul 要素…順序がないリスト
ol 要素…順序があるリスト
li 要素…リストの項目
<ul>
<li>項目１</li>
<li>項目２</li>
</ul>
<ol>
<li>項目１</li>
<li>項目２</li>
</ol>
div 要素…汎用ブロックレベル要素
特に意味は持たない。レイアウトなどで使用
<div id="divsample">
<h1>見出し</h1>

4
<p>見出しと本文をグループ化できる</p>
</div>
主なインライン要素
br 要素…改行、終了タグがない
ここで<br />改行する
em 要素…強調
ここで<em>強調</em>する
img 要素…画像を表示する、終了タグがない
<img src="画像が置いてある場所" />
video 要素…動画を表示する
<video src="動画が置いてある場所"></video>
audio 要素…音声を表示する（コントロールが表示される）
<audio src="音声が置いてある場所"></audio>
input 要素…フォームの部品、終了タグがない
テキストボックスやボタンなどの部品を使うことができる
label 要素…ラベル
select 要素…セレクトボックス
option 要素…セレクトボックスの選択肢
<label>学籍番号：</label><input type="text" /><br />
<input type="button" value="PUSH!" /><br />
<label>何派：</label><select>
<option value="dog">犬派</option>
<option value="cat">猫派</option>
</select>
span 要素…汎用インライン要素
特に意味は持たない。レイアウトなどで使用
ここで<span class="strong">文字を赤色に</span>する

5
主な CSS プロパティ
background-color プロパティ…背景色
background-image プロパティ…背景画像
background-color: #808080;
background-image: url(画像が置いてある場所);
color プロパティ…文字色
font-family プロパティ…フォントの種類、字体
font-size プロパティ…文字の大きさ
font-weight プロパティ…文字の太さ
color: #ff0000;
font-family: "ヒラギノ角ゴ Pro W3", "MS ゴシック", san-self;
font-size: 16px;
font-weight: bold;
text-align プロパティ…行揃え、左右中央揃えが指定できる
text-decoration プロパティ…文字の装飾、下線や取り消し線など
line-height プロパティ…行間
text-align: center;
text-decoration: underline;
line-height: 30px;
border プロパティ…枠線
margin プロパティ…枠線の外側の余白
padding プロパティ…枠線の内側の余白
width プロパティ…幅
height プロパティ…高さ
overflow プロパティ…幅、高さを超えた部分の表示方法
border: 1px dashed #cccccc;
margin: 20px;
padding: 50px;
width: 300px;
height: 200px;
overflow: scroll;

6
position プロパティ…配置方法、配置を座標指定したい時に使う
z-index プロパティ…重ね順、数字が大きいほど手前
left プロパティ…画面左からの位置、X 座標みたいなもの
top プロパティ…画面上からの位置、Y 座標みたいなもの
position: absolute;
z-index: 10;
left: 200px;
top: 800px;
opacity プロパティ…透明度、0.0（透明）～1.0（不透明）
float プロパティ…回り込みレイアウトのときに使う
周辺の要素を左右に回し込むことができる
display プロパティ…要素の表示種類
インライン要素として表示したりブロックレベル要素として表示したりすることができる
要素を隠したい時にも使える
opacity: 0.8;
float: left;
display: none;
主な JavaScript のオブジェクト
String オブジェクト…文字列を扱う
var str1 = "文字列です";
var str2 = '文字列だよ';
length
文字列の長さ
split("区切り文字")
文字列を区切り文字で分割して配列を返す
replace(正規表現, "置き換える文字列")
正規表現に一致した部分を置き換える
var str3 = str1 + "," + str2;
alert("この文字列は" + str3.length + "文字です");
var split = str3.split(",");
alert(split[0]); // 「文字列です」が表示される

7
Array オブジェクト…配列を扱う
var array = [1, 5, 3, 2];
length
配列の長さ、個数
join("区切り文字")
配列の中身を区切り文字で連結して文字列を返す
push(配列に入れたいもの)
pop()
push は配列の一番後ろに追加、pop は配列の一番後ろを削除
sort()
配列を並び替える
array.push(4);
alert("この配列は" + array.length + "個の要素を持っています");
array.sort();
var str = array.join(",");
alert(str); // 「1,2,3,4,5」と表示される
Math オブジェクト…数学関係を扱う
Math
random()
0 以上 1 未満の乱数を生成する
ceil(数字)
floor(数字)
round(数字)
ceil は小数点以下繰り上げ、floor は繰り下げ、round は四捨五入
var random = Math.floor(Math.random() * 30);
alert(random); // 0 ~ 29 までの整数を表示
Date オブジェクト…日付を扱う
var date1 = new Date();
// 現在の日付時刻
var date2 = new Date(2013, 9, 1, 12, 0, 0);
// ある時の日付時刻
getFullYear()
getMonth()
getDate()

8
getDay()
getHours()
getMinutes()
getSeconds()
年、月、日、曜日、時、分、秒を返す。月と曜日は 0 から数えるので注意
getTime()
1970 年 1 月 1 日 0 時 0 分 0 秒 0 ミリ秒からのミリ秒を返す、比較の際に使用
alert("今日は" + (date1.getMonth() + 1) + "月" + date1.getDate() + "日、");
var days = ["日", "月", "火", "水", "木", "金", "土"];
alert(days[date1.getDay()] + "曜日です");
var time = date1.getTime() / 1000 - date2.getTime() / 1000;
alert("9 月 1 日 12 時から" + time + "秒たちました");
Window オブジェクト…ブラウザのウィンドウを扱う
window;
// 現在開いているウィンドウ
var newwindow = window.open("HTML が置いてある場所", "ウィンドウの名前", "width=ウィン
ドウの幅,height=ウィンドウの高さ");
// 自分で開いたウィンドウ
alert("メッセージ")
confirm("確認メッセージ")
prompt("文字入力メッセージ", "初期入力値")
それぞれメッセージボックスを出してメッセージを表示します
focus()
blur()
focus はウィンドウにフォーカスをあてる、blur はフォーカスを外す
setTimeout('実行するスクリプト', ミリ秒)
clearTimeout(解除するタイマー)
setInterval('実行するスクリプト', ミリ秒)
clearInterval(解除するタイマー)
setTimeout はミリ秒後にスクリプトを実行、setInterval はミリ秒おきにスクリプト
を実行
blur(); // 現在のウィンドウのときは「window.」を省略できる
newwindow.focus();
var timer = setTimeout('alert("にんにくたべたい")', 1000);
clearTimeout(timer);

9
document…ページを扱う
window.document;
// 現在のウィンドウの Web ページ
newwindow.document;
// 自分で開いたウィンドウの Web ページ
lastModified
title
lastModified はページの最終更新日、title は title 要素で指定したページのタイト
ル
getElementById("要素の ID")
要素オブジェクトを取得できる
creatElement("タグ名")
要素オブジェクトを生成できる
alert("このページの最終更新日は" + document.lastModified + "です");
Element オブジェクト…HTML の要素を扱う
var output = document.getElementById("output");
// HTML に書いてある要素を取得する
var content = document.createElement("p");
// 要素を生成する
style
スタイルシート（CSS）オブジェクトを取得できる
innerHTML
要素の中身
setAttribute("属性名", "属性の中身")
要素の属性を設定する
appendChild(ほかの Element オブジェクト)
ほかの要素を入れ子にできる
contents.innerHTML = "こんにちは";
output.appendChild(content);
Style オブジェクト…スタイルシート（CSS）を扱う
var output = document.getElementById("output");
var style = output.style;
CSS プロパティ名
プロパティ名がそのまま使える、ただし「-」がある場合は text-align→textAlign

10
with(output.style){
backgroundImage = "url(background.jpg)";
width = "300px"
height = "200px";
}
主なイベントハンドラ
onload 属性…ページが読み込まれたとき、body 要素に付けるのが一般的
onunload 属性…ページから離れるとき、body 要素に付けるのが一般的
<body onload="init()" onunload="destroy()">
…
</body>
onclick 属性…要素がクリックされたとき
onmouseover 属性…要素の上にマウスが乗ったとき
onmouseout 属性…要素の上からマウスが外れたとき
<img src="test.jpg"
onclick="alert('クリックされたよ！')"
onmouseover="this.src = 'test2.jpg'"
onmouseout="this.src = 'test.jpg'"
/>
onchange 属性…フォーム部品の内容が変更されたとき
<select onchange="alert('誰だ、選択を変えたやつは！')">
<option value="kinoko">きのこ派</option>
<option value="takenoko" selected>たけのこ派</option>
</select>
おわり

メディア工房サマーワークショップ「Webアプリ制作」お手元の資料

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to メディア工房サマーワークショップ「Webアプリ制作」お手元の資料

Similar to メディア工房サマーワークショップ「Webアプリ制作」お手元の資料 (9)

メディア工房サマーワークショップ「Webアプリ制作」お手元の資料