JavaScript/HTML５おぼえがき

｜JavaScript｜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>

任意のURLを読み込んで表示する(iframe)　　　戻る

Webページ内に任意のURLを読み込んでコンテンツを表示する場合、iframeのタグを使います。その時のフレームの高さを正しく設定する必要があります。
コンテンツの初期表示時や、表示後のウインドウサイズ変更があった場合（マウスでサイズ変更した場合、スマートフォンで画面の向きを変更した場合など）にも
正しいフレームの高さを再設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iframe</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
ウインドウサイズを手動で変更して、確認して下さい。
<iframe id="bottom" height="100%" width="100%" src="https://tomari.org/rmenuy.html"></iframe>
<br>-------- END ----------------
<script>
// iframe要素を取得.
var iframe = document.getElementById('bottom');
// iframe内のwindow要素にアクセスし、
// コンテンツが読み終わった際に呼び出されるイベントをリッスンする。
iframe.contentWindow.addEventListener('DOMContentLoaded', function () {
  // iframe内のbodyの高さを取得して、設定する。
  iframe.style.height = iframe.contentDocument.body.clientHeight + 'px';
});
//　ウィンドウのサイズ変更が発生した場合は、iframeの高さを再設定する。
window.onresize = function () {
  iframe.style.height = iframe.contentDocument.body.clientHeight + 'px';
}
</script>
</body>
</html>

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜