JavaScript/HTML５おぼえがき
コンテンツ表示
メディアクエリの使い方 戻る
メディアクエリを使ってレスポンシブwebデザインに役立ちます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Web Design</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
<!--
body{
margin:0px; font-family: sans-serif; color: white;
}
header{
text-align: center; background: #333;
}
.wrap{
overflow: hidden;
}
article{
width: calc(100% - 300px); text-align: center; background: #666; float:left;
} /*calcファンクションで表示横幅を計算して指定する。*/
aside{
text-align: center; background: #999; width:300px; float:right;
}
footer{
text-align: center; background: #333;
}
@media ( max-width : 750px ) { /*メディアクエリを使って表示方法を変更する。*/
header{
width:100%;
}
.wrap{
width:100%;
}
article{
width:100%; float:none;
}
aside{
width:100%; float:none;
}
footer{
width:100%;
}
}
-->
</style>
<script>
function int(){
ww = window.innerWidth;
wh = window.innerHeight;
win = "<p>モニタ画面の解像度の横幅と高さは：" + window.screen.width + "x" + window.screen.height + " です。<br>"
+ "ウィンドウ内側（表示領域）の横幅と高さは：" + ww + "x" + wh + " です。</p><br>" ;
document.getElementById("dat").innerHTML = win ;
}
</script>
</head>
<body onload="int();">
<header><br>Header<br><br></header>
<div class="wrap">
<article><br><br><br><br>Content<br>ブラウザの表示横幅を変えてください。幅７５０ピクセル以上と以下で表示レイアウトが変わります。<br><br><br><br><br></article>
<aside><br>Sideber <br>
<div id="dat"></div>
<input onclick="int()" type="button" value="再計算"><br><br>
</aside>
</div>
<footer><br>Footer<br><br></footer>
</body>
</html>
アコーディオンメニューの作り方 戻る
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion menu</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
<!--
.tab{
text-align:left;width:250px;height:15px;padding:5px;border-width:2px;border-style:solid;border-color:gray;
}
-->
</style>
<script>
function ini() { // メニューの初期設定
if( !document.getElementsByTagName ){ return ; } // DOMのサポートチェック
var objs = document.getElementsByTagName("div") ; // HTML中の「div」タグを取得
for( var i = 0; i < objs.length ; i++ ) { // クラスネーム「cls」を探して非表示にする
if( objs[i].className == "cls" ) { objs[i].style.display = "none" ; }
}
}
function cng(id) { // メニューを消したり表示したりする
if( !document.getElementsByTagName ) { return false; }// DOMのサポートチェック
var obj = document.getElementById(id); // メニューのオブジェクトを取得
if( obj.style.display == "block" ) { obj.style.display="none" ; } else { obj.style.display = "block" ; }// 表示←→非表示の処理
}
function url(q) { alert(q) }
</script>
</head>
<body onload="ini();">
<div class="tab" onclick="cng('メインメニュー１のID')">▼メインメニュー１</div>
<div class="cls" id="メインメニュー１のID">
◆<a href="#" onclick="cng('サブメニュー１のID')">サブメニュー１</a><br>
<div class="cls" id="サブメニュー１のID">
├<a href="#" onclick="url('URL1-1')">サブサブメニュー１－１</a><br>
├<a href="#" onclick="url('URL1-2')">サブサブメニュー１－２</a><br>
└<a href="#" onclick="url('URL1-3')">サブサブメニュー１－３</a><br>
</div>
◆<a href="#" onclick="cng('サブメニュー２のID')">サブメニュー２</a><br>
<div class="cls" id="サブメニュー２のID">
├<a href="#" onclick="url('URL2-1')">サブサブメニュー２－１</a><br>
├<a href="#" onclick="url('URL2-2')">サブサブメニュー２－２</a><br>
└<a href="#" onclick="url('URL2-3')">サブサブメニュー２－３</a><br>
</div>
◆<a href="#" onclick="cng('サブメニュー３のID')">サブメニュー３</a><br>
<div class="cls" id="サブメニュー３のID">
├<a href="#" onclick="url('URL3-1')">サブサブメニュー３－１</a><br>
├<a href="#" onclick="url('URL3-2')">サブサブメニュー３－２</a><br>
└<a href="#" onclick="url('URL3-3')">サブサブメニュー３－３</a><br>
</div>
</div>
<div class="tab" onclick="cng('メインメニュー２のID')">▼メインメニュー２</div>
<div class="cls" id="メインメニュー２のID">
・<a href="#" onclick="url('URL1')">サブメニュー１</a><br>
・<a href="#" onclick="url('URL2')">サブメニュー２</a><br>
・<a href="#" onclick="url('URL3')">サブメニュー３</a><br>
</div>
</body>
</html>
サムネル表示 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>サムネル(thumbnail)表示</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<script>
imFile = ["z10.JPG","z20.JPG","z30.JPG","z40.JPG","z50.JPG","z60.JPG","z70.JPG","z80.JPG"] ;
imMax = imFile.length ;
document.write("<div align = 'center'>") ;
document.write("<img src = 'pic/" + imFile[0] + "' name='pic' width=800><br><br>") ;
for(var i = 0 ; i < imMax ; i++ ) {
document.write("<img src = 'pic/" + imFile[i] + "' width=96 height = 72 onclick = 'picDraw(this)'>") ;
}
document.write("</div>") ;
function picDraw(obj) { document.pic.src=obj.src ; }
</script>
</body>
</html>
画像ファイル読込 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>画像ファイル読込</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<input type="file" onChange="filer(this.files, 'canvas1')"><br>
<canvas id="canvas1"></canvas>
<script>
function filer(files, cvs) {
var canvas = document.getElementById(cvs); //canvasの定義
var ctx = canvas.getContext('2d');
var reader = new FileReader(); //ローカルファイルの処理
reader.onload = function(event) { //ローカルファイルを読込後処理
var img = new Image(); //画像ファイルの処理
img.onload = function() { //画像ファイル読込後の処理
canvas.width = img.naturalWidth; //naturalWidthは画像の元のサイズ
canvas.height = img.naturalHeight; //canvas.widthはcanvasのサイズ
ctx.drawImage(img, 0, 0); //画像をcanvasに表示
}
img.src = event.target.result; //画像を読み込む
}
reader.readAsDataURL(files[0]); //ローカルファイルを読み込む
}
</script>
</body>
</html>
画像ファイルのドラッグ＆ドロップ 戻る
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ドラッグ＆ドロップ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript">
</script>
</head>
<body>
<div id="target" style="border: solid 5px #ccc; padding:2em; text-align:center;">
ここに画像ファイルをドロップします。
</div>
<canvas id="cvs"></canvas>
<script>
<!--
var target = document.getElementById('target'); //ドロップエリアの指定
target.addEventListener('dragover', function (e) {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
});
target.addEventListener('drop', function (e) {
e.stopPropagation();
e.preventDefault();
var canvas = document.getElementById("cvs"); //canvasの定義
var ctx = canvas.getContext('2d');
const reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.onload = function() { //画像ファイル読込後の処理
canvas.width = img.naturalWidth; //naturalWidthは画像の元のサイズ
canvas.height = img.naturalHeight; //canvas.widthはcanvasのサイズ
ctx.drawImage(img, 0, 0); //画像をcanvasに表示
}
img.src = e.target.result; //画像を読み込む
}
reader.readAsDataURL(e.dataTransfer.files[0]);
});
-->
</script>
</body>
</html>