セマンティックWEB

セマンティックWEB

意味を持たせたWEBページ
それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする
徐々にセマンティックなページである事を前提としたブラウザ操作やデータ交換機能が普及してきている。
SEO上も効果あり

一覧

セクションタグ

各セクションは単体で意味を持つ
よって<h>タグによる見出しを表示させるのが望ましい

タグ 目的
article ページにおいて単独で意味をなす部分。1Pに1つ
aside 補足情報
nav ナビゲーション・リンクを表す
section 章、節

構造タグ

タグ 目的
header ヘッダー。<head>タグとは別。
footer フッター

SGML/XML/HTML/XHTML/HTML5

SGML

Standard Generalized Markup Language
文書用マークアップ言語(メタ言語)
任意の意味を持つタグ名を付けられる。タグはDTDに定義する。
DTDに基づいて記述する事で異種のコンピュータでも文書の論理構造を再現できる
SGMLを元に機能をWEBに限定した仕様がHTML、XML

DTD

Document Type Definition
文書型定義
マークアップ言語における構成要素、親子関係、属性等を規定
文書中、または外部ファイルに記述する
HTMLではDOCTYPE宣言で外部DTDを指定する

XML

Extensible Markup Language
SGMLを元に拡張した仕様
SGML同様、DTDにタグを定義する

HTML

HyperText Markup Language
ハイパーテキストを記述するためのマークアップ言語
SGMLを元に拡張した仕様
XMLと違いDTDは独自に変更できず、DOCTYPE宣言において、W3Cで規定済みのものの中から選択して使用する

例 HTML4.01

1) Transitional(移行型) ※非推奨要素、非推奨族制:〇、フレーム:×
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

2) Strict(厳密型) ※非推奨要素、非推奨族制:×、フレーム:×
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

3) Frameset(フレーム設定型) ※フレーム:〇
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML

XHTMLとは

Extensible HyperText Markup Language
XMLとの互換性を持つHTML
HTMLを使って書かれたXML。

XHTMLのメリット

・厳密に構造化されるのでSEO的に有利に解析される。
 (htmlでも終了タグを省略したりせず、見出しタグ等を的確に使用して厳密に構造化した場合は効果は同じ)
・携帯電話で閲覧した場合に正確に描画される。
・RSSアプリを利用できる

XHTML文法

・タグは全て小文字に
・属性値は""(ダブルコーテーション)で囲む
 <DIV Class=test> ⇒ <div class="test">
・終了タグは省略不可
・終了タグのないタグの「/」は省略不可
 <li>~ ⇒ <li>~</li>
 <input ~> ⇒ <input ~ />
・<font>タグ、<b>タグ使用不可
 <font color="red"> ⇒ <span style="color: red;">
 <font bgcolor="red"> ⇒ <span style="background-color: red;">
 <b> ⇒ <strong>
・XML宣言 / DOCTYPE宣言
 <?xml version="1.0" encording="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
・<html>タグ
 <html> ⇒ <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">

以上はHTML4.0時代のXHTML。
HTML5に対応したXHTML5

HTML5

html4.01の後継仕様
html5にはDTDはない。外部DTDの参照もしない。
仕様はブラウザに組み込み済み。タグの独自変更もできない

フォーマット

<!DCTYPE html>
<html>
<head>
  <title>~</title>
</head>
<body>~</body>
</html>

XHTML5

XHTML仕様を満たしたhtml5

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
  <title>~</title>
</head>
<body>~</body>
</html>

html/JS/jQueryイベント一覧

一覧

onclick="" クリック時 多くの要素
ondblclick="" ダブルクリック時 多くの要素
onmousedown="" マウスのボタンが押し下げられた時 多くの要素
onmouseup="" マウスのボタンが放された時 多くの要素
onmouseover="" マウスカーソルが乗った時 多くの要素
onmousemove="" マウスカーソルが移動時 多くの要素
onmouseout="" マウスカーソルが離れた時 多くの要素
onkeypress="" キーが押されて放された時 多くの要素
onkeydown="" キーが押し下げられた時 多くの要素
onkeyup="" キーが放された時 多くの要素
onload="" ロード完了時 body要素、frameset要素
onunload="" 他のページに移動して現在のページが消える時 body要素、frameset要素
onfocus="" フォーカス時 a要素、area要素、button要素、input要素、label要素、select要素、textarea要素
onblur="" フォーカス喪失時 a要素、area要素、button要素、input要素、label要素、select要素、textarea要素
onsubmit="" フォーム送信時 form要素
onreset="" フォームリセット時 form要素
onselect="" 入力欄のテキスト選択時 input要素、textarea要素
onchange="" フォーカス喪失時、値が変化していた時 input要素、select要素、textarea要素
onContextmenu="" 右クリックメニュー表示時 document要素、body要素、他多くの要素

<a>タグ

onClick
リンクテキストをクリックした時

onClick
<a href="#" id="mylink1">onClick</a><br/>


<script type="text/javascript">
  document.getElementById(‘mylink1’).onclick = function(){
    window.alert("onClick");
  };
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時

onMouseOver
<a href="#" id="mylink2">onMouseOver</a><br/>


<script type="text/javascript">
  document.getElementById(‘mylink2’).onmouseover = function(){
    window.alert("onMouseOver");
  };
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時

onMouseOut
<a href="#" id="mylink3">onMouseOut</a><br/>


<script type="text/javascript">
  document.getElementById(‘mylink3’).onmouseout = function(){
    window.alert("onMouseOut");
  };
</script>

onClick
リンクテキストをクリックした時

onClick
<a href="#" id="mylink1">onClick</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink1").click(function(){
      window.alert("onClick");
    });
  });
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時

onMouseOver
<a href="#" id="mylink2">onMouseOver</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink2").mouseover(function(){
      window.alert("onMouseOver");
    });
  });
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時

onMouseOut
<a href="#" id="mylink3">onMouseOut</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink2").mouseOut(function(){
      window.alert("onMouseOut");
    });
  });
</script>

onClick
リンクテキストをクリックした時

onClick

<a href="#" id="mylink1" onClick="fnOnClick()">onClick</a><br/>
<script type="text/javascript">
  function fnOnClick(){
    window.alert("onClick");
  }
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時

onMouseOver

<a href="#" id="mylink2" onMouseOver="fnOnMouseOver()">onMouseOver</a><br/>
<script type="text/javascript">
  function fnOnMouseOver(){
    window.alert("onMouseOver");
  }
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時

onMouseOut

<a href="#" id="mylink3" onMouseOut="fnOnMouseOut()">onMouseOut</a><br/>
<script type="text/javascript">
  function fnOnMouseOut(){
    window.alert("onMouseOut");
  }
</script>

<img>タグ

onAbort
画像の読み込みが中止された時


<img id=”myimg1″ src=”~.gif” /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg1").onabort = function(){
    window.alert("onAbort");
  }
</script>

onError
画像ファイルが見つからない時


<img id="myimg2" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg2").onerror = function(){
    window.alert("onError");
  }
</script>

onLoad
画像の読み込みが完了した時


<img id=”myimg3″ src=”~.gif” /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg3").onload = function(){
    window.alert("onLoad");
  }
</script>

onAbort
画像の読み込みが中止された時:無し

onError
画像の読み込みが中止された時


<img id="myimg2" src="~.gif" /><br/>


<script type="text/javascript">
  $(function(){
    $("#myimg2").error(function(){
      //省略
      //window.alert("onError");
    });
  });
</script>

onLoad
画像の読み込みが完了した時


<img id="myimg3" src="~.gif" /><br/>


<script type="text/javascript">
  $(function(){
    $("#myimg3").load(function(){
      //省略
      //window.alert("onLoad");
    });
  });
</script>

onAbort
画像の読み込みが中止された時


<img id="myimg1" onAbort="fnOnAbort()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnAbort(){
    window.alert("onAbort");
  }
</script>

onError
画像ファイルが見つからない時


<img id="myimg2" onError="fnOnError()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnError(){
    window.alert("onError");
  }
</script>

onLoad
画像の読み込みが完了した時


<img id="myimg3" onLoad="fnOnLoad()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnLoad(){
    window.alert("onLoad");
  }
</script>

windowオブジェクト,<body>タグ,<frameset>タグ

<body id=”mybody”>
 ~
</body>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  window.onblur = function() {
    //window.alert("onBlur");
  };
  document.getElementById("mybody").onblur = function() {
    //window.alert("onBlur");
  };
</script>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  window.onerror= function() {
    //window.alert("onError");
  };
  document.getElementById("mybody").onerror= function() {
    //window.alert("onError");
  };
</script>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  window.onfocus= function() {
    //window.alert("onFocus");
  };
  document.getElementById("mybody").onfocus= function() {
    //window.alert("onFocus");
  };
</script>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  window.onload= function() {
    //window.alert("onLoad");
  };
  document.getElementById("mybody").onload= function() {
    //window.alert("onLoad");
  };
</script>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  window.onunload= function() {
    //window.alert("onUnload");
  };
  document.getElementById("mybody").onunload= function() {
    //window.alert("onUnload");
  };
</script>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  $(function(){
    $(window).blur(function(){
      //省略
      //window.alert("onBlur");
    });
  });
</script>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  $(function(){
    $(window).error(function(){
      //省略
      //window.alert("onError");
    });
  });
</script>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  $(function(){
    $(window).focus(function(){
      //省略
      //window.alert("onFocus");
    });
  });
</script>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  $(function(){
    $(window).load(function(){
      //省略
      //window.alert("onLoad");
    });
  });
</script>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  $(function(){
    $(window).unload(function(){
      //省略
      //window.alert("onUnload");
    });
  });
</script>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  function fnOnBlur(){
    window.alert("onBlur");
  }
</script>

<body id="mybody" onBlur="fnOnBlur()">
 ~
</body>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  function fnOnError(){
    window.alert("onError");
  }
</script>

<body id="mybody" onError="fnOnError()">
 ~
</body>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  function fnOnFocus(){
    window.alert("onFocus");
  }
</script>

<body id="mybody" onFocus="fnOnFocus()">
 ~
</body>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  function fnOnLoad(){
    window.alert("onLoad");
  }
</script>

<body id="mybody" onLoad="fnOnLoad()">
 ~
</body>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  function fnOnUnload(){
    window.alert("onUnload");
  }
</script>

<body id="mybody" onUnload="fnOnUnload()">
 ~
</body>

<form>タグ

onReset
フォームがリセットされる直前に発生



<form id="myform1">
  <input type="text" /><br/>
  <input type="Reset" value="Reset" />
</form>
<script type="text/javascript">
  document.getElementById("myform").onreset = function(){
    window.alert("onReset");
  }
</script>

onSubmit
フォームがサブミットされる直前に発生


<form id="myform2">
  <input type="Submit" value="Submit" />
</form>
<script type="text/javascript">
  document.getElementById("myform").onSubmit = function(){
    window.alert("onSubmit");
  }
</script>

onReset
フォームがリセットされる直前に発生



<form id="myform3">
  <input type="text" /><br/>
  <input type="reset" id="myreset" value="reset" /><br/>
</form>

<script type="text/javascript">
  $(function(){
    //「reset」イベントは無い(多分)ので「click」イベントで代用
    $("#myreset").click(function(){
      window.alert("onReset");
    });
  });
</script>

onSubmit
フォームがサブミットされる直前に発生


<form id="myform4">
  <input type="submit" value="submit" /><br/>
</form>

<script type="text/javascript">
  $(function(){
    $("#myform").submit(function(){
      window.alert("onSubmit");
    });
  });
</script>

onReset
フォームがリセットされる直前に発生



<script type="text/javascript">
  function fnReset(){
    window.alert("onReset");
  }
</script>

<form onReset="fnReset()">
  <input type="Reset" value="Reset" />
</form>

onSubmit
フォームがサブミットされる直前に発生



<script type="text/javascript">
  function fnSubmit(){
    window.alert("onSubmit");
  }
</script>

<form onSubmit="fnSubmit()">
  <input type="submit" value="submit" />
</form>

<input type="text">,<input type="password">(<form>タグ内)

onBlur
フォーカスを失う時




<input type="text" id="mytext1" value="onblur"/>
<script type="text/javascript">
  document.getElementById("mytext1").onblur = function() {
    //window.alert("onBlur");
  };
</script>

onChange
テキストが変更され、フォーカスを失った時




<input type="text" id="mytext2" value="onchange"/>
<script type="text/javascript">
  document.getElementById("mytext2").onchange = function() {
    //window.alert("onChange");
  };
</script>

onFocus
フォーカスを得た時




<input type="text" id="mytext3" value="onfocus"/>
<script type="text/javascript">
  document.getElementById("mytext3").onfocus = function() {
    //window.alert("onFocus");
  };
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生




<input type="text" id="mytext4" value="onselect"/>
<script type="text/javascript">
  document.getElementById("mytext4").onselect = function() {
    //window.alert("onSelect");
  };
</script>

onBlur
フォーカスを失う時


<input type="text" id="mytext1" />



<script type="text/javascript">
  $(function(){
    $("#mytext1").blur(function(){
      window.alert("onBlur");
    });
  });
</script>

onChange
テキストが変更され、フォーカスを失った時


<input type="text" id="mytext2" />

<script type="text/javascript">
  $(function(){
    $("#mytext2").change(function(){
      window.alert("onChange");
    });
  });
</script>

onFocus
フォーカスを得た時


<input type="text" id="mytext3" />



<script type="text/javascript">
  $(function(){
    $("#mytext3").focus(function(){
      window.alert("onFocus");
    });
  });
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生


<input type="text" id="mytext4" />

<script type="text/javascript">
  $(function(){
    $("#mytext4").select(function(){
      window.alert("onSelect");
    });
  });
</script>

onBlur
フォーカスを失う時


<input type="text" id="mytext1" onBlur="fnOnBlur()" value="onBlur"/><br/>

<script type="text/javascript">
  function fnOnBlur(){
    window.alert("onblur");
  }
</script>

onChange
テキストが変更され、フォーカスを失った時


<input type="text" id="mytext3" onChange="fnOnChange()" value="onChange"/><br/>

<script type="text/javascript">
  function fnOnChange(){
    window.alert("onChange");
  }
</script>

onFocus
フォーカスを得た時


<input type="text" id="mytext2" onFocus="fnOnFocus()" value="onFocus"/><br/>

<script type="text/javascript">
  function fnOnFocus(){
    window.alert("onFocus");
  }
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生


<input type="text" id="mytext4" onSelect="fnOnSelect()" value="onSelect"/><br/>

<script type="text/javascript">
  function fnOnSelect(){
    window.alert("onSelect");
  }
</script>

<input type="button">,<input type="submit">,<input type="reset">(<form>タグ内)

onClick
クリックしたとき発生


<input type="button" id="mybutton3" /><br/>
<button id="mybutton4"></button><br/>

<script type="text/javascript">
  document.getElementById("mybutton3").onclick = function() {
    window.alert("onClick");
  };
  document.getElementById("mybutton4").onclick = function() {
    window.alert("onClick");
  };
</script>

<input id="htmlButton" type="button" value="htmlButton" />

<script type="text/javascript">
 $(function(){
  $("#htmlButton").click (function(){
    window.alert('click');
  });
  または
  $("#htmlButton").on("click", function(){
    window.alert(‘click’);
  });

 });
</script>

onClick
クリックしたとき発生

onClick=“fnOnClick()” />

<input type="button" id="mybutton1" onClick="fnOnClick()" /><br/>
<button id="mybutton2" onClick="fnOnClick()"></button><br/>

<script type="text/javascript">
  function fnOnClick(){
    windows.alert("onClick");
  ]
</script>

<input type="radio">


<input type="radio" id="rdoMan" name="gender" checked="checked" value="man" />
<label for="rdoMan">MAN</label><br/>
<input type="radio" id="rdoWoman" name="gender" value="woman" />
<label for="rdoWoman">WOMAN</label><br/>

<script type="text/javascript">
  $(function(){
    changeイベント
    $("input[name='gender']:radio").change(function(){
      window.alert('checked');
    });

    clickイベント
    $('input[name="~"]:radio').on('click', function () {
      let value = $(this).val();
    });
    
  });
</script>

index:0(=man)の要素を選択
$("input[name='gender']:eq('0')").attr("checked", true);

value:manの要素を選択
$("input[name='gender']").val(["man"]);

要素全体を未選択
$("input[name='gender']").attr("checked", false);

<select>

$(‘#optTime’).on('change',function(){
window.alert(‘changed’);
});

<checkbox>




<input type="checkbox" id="check1" name="check" value="1" ><label for="check1" data-type="typeA">1</label>
<input type="checkbox" id="check2" name="check" value="2" ><label for="check2" data-type="typeA">2</label>
<input type="checkbox" id="check3" name="check" value="3" ><label for="check3" data-type="typeB">3</label>
<input type="checkbox" id="check4" name="check" value="4" ><label for="check4" data-type="typeB">4</label>

<script>
$(function ($) {
 $('input[name="check"]').on('change', function(e, param) {
  チェック状態(true/false)
  let checked = $(this).prop('checked');
  value値
  let value = $(this).val();
  data-type値
  let type = $(this).data("type");
  $('input[name="check"]').each(function() {
   if ($(this).data("type")==type){
    $(this).prop('checked', checked); //true/false
   }
  })
 });
});
</script>

HTML 属性一覧

一覧

要素 属性
汎用 style <div style="~">
class <div class="~">
id <div id="~">
name <div name="~">
title <div title="~">
text
html
font size <font size="5">
color <font color="#0000ff">
input value <input type="text" value="aaaa">
type <input type="text" >
readonly <input type="text" readonly="readonly" >
maxlength <input type="text" maxlength="5" >
disabled <input type="text" disabled="disabled" >
form method <form method="POST">
target <form target="_blank" >
action <form action="maxlength.html" >
a href <a href="URL" >
target <a target="_blank">
img src <img src="~" />
alt <img alt="aaa" />
width <img width="20px" />
height <img height="20px" />
border <img border="0" />
table
tr
th
td
width <table width="300">
height <table height="300">
colspan <td colspan="3">
rowspan <td rowspan="3">
frame scrolling <frame scrolling="auto">

基本構造

meta

指定のURLへリダイレクト(http-equv)

<meta http-equv="refresh" content="0; URL="http://office-yone.com">

モバイル用表示属性(viewport)

CSS レスポンシブ/ビューポート」参照

text、html属性

text属性

操作対象

<div id="myDiv">操作対象</div>
<script>
  $(function(){
    var divNm = $("#myDiv").text();
    // ⇒ divNm : "操作対象"
    
    $("#myDiv").text("新しい文字");
  });
</script>

html属性
操作対象
<span id="mySpan">操作対象</span>
<script>
  $(function(){
    var htmlNm = $("#mySpan").html();
    // ⇒ htmlNm : "操作対象"
    
    $("#mySpan").html("新しい文字");
  });
</script>


<label id="myLabel_label">○○○</label&gt

○○○

<div id="myDiv_label">○○○</div>

○○○
<span id="mySpan_label">○○○</span>

○○○

<article id="myArticle_label">○○○</article>

opacity属性(透明度)

CSS opacity属性」参照

リンク

a

米良太事務所
指定のURLを開く
<a href="https://office-yone.com/">米良太事務所</a>
新しいウィンドウで開く
<a href="https://office-yone.com/" target="_blank">米良太事務所</a>
ブックマークへ移動
<a href="~#bookmark">TOPへ</a>
同一ページのトップへ移動
<a href="#">TOPへ</a>

メディア

canvas

CSS <canvas>」参照

img

<img border="0" src="../images/img001.gif" width="128px" height="128px" alt="~" >

テーブル

table

 A   B   C   D 
 B 
 C 
 D 

<table>
 <tr>
  <th>A</th>
  <th>B</th>
  <th>C</th>
  <th>D</th>
 </tr>
 <tr>
  <th>B</th>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <th>C</th>
  <td></td>
  <td rowspan="2" colspan="2"></td>
 </tr>
 <tr>
  <th>D</th>
  <td></td>
 </tr>
</table>

リスト

ul、ol、li

UL = UnorderdList
OL = OrderdList
LI = ListItem

  • style="list-style-type: disc"
  • style="list-style-type: square"
  • style="list-style-type: lower-alpha"
  • style="list-style-type: upper-alpha"
  • style="list-style-type: none"
  • style="list-style-type: decimal"
  • style="list-style-type: decimal-leading-zero"

<ul style="list-style-type: none">
 <li>style="list-style-type: none"</li>
</ul>

<ul style="list-style-type: disc">
 <li>style="list-style-type: disc"</li>
</ul>

<ul style="list-style-type: square">
 <li>style="list-style-type: square"</li>
</ul>

<ul style="list-style-type: decimal">
 <li>style="list-style-type: decimal"</li>
</ul>

<ul style="list-style-type: decimal-leading-zero">
 <li>style="list-style-type: decimal-leading-zero"</li>
</ul>

<ul style="list-style-type: lower-alpha">
 <li>style="list-style-type: lower-alpha"</li>
</ul>

<ul style="list-style-type: upper-alpha">
 <li>style="list-style-type: upper-alpha"</li>
</ul>

フォーム(入力系)

label

対象タグ

<label for="mytext" accesskey="n">名前:</label>
<input type="text" id="mytext" value="aaa" />
[Alt]キー + accesskey でforで指定したidを選択状態に

text


<input type="text" id="mytext" value="aaa" />


<input type="text" id="mytext" value="aaa" size="50" />
50文字分の横幅(フォントに依存) → Width指定推奨

value属性



<input type="text" id="objText1" value="aaa" />

<script type="text/javascript">
  var myText = document.getElementById("objText1");
  myText.value = 'AAA';
  
  var contents = myText.value;
  ⇒ contents : AAA
</script>


<input type="text" id="objText1" value="aaa" />

<script type="text/javascript">
  $(function(){
    //value属性設定
    $('#objText1').val('AAA');
    
    //value属性値の取得
    var contents= $('objText1').val();
    ⇒ contents : AAA
  });
</script>

button


<input type="button" id="mybutton" value="aaa" />


<button id="mybutton" value="aaa" ></button>

submit


<input type="submit" id="mysubmit" value="aaa" />

form

パラメータを渡す為のオブジェクト
form内のsubmit押下によって実行される。
<form name="myForm" action="#" method="POST">
  <input type="text" name="box1" /><br/>
  <input type="text" name="box2" /><br/>
  <input type="text" name="box3" /><br/>
  <input type="submit" value="検索" /><br/><br/>
</form>
送信先プログラムのURIを指定する
action="http://~.html"
action="#"
送信の際の転送方法(HTTPメソッド)を指定する
method="POST"
method="GET"
スクリプト言語などから参照できるよう名前を指定する
name="frmTest"
フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定する
target="flmTest"

checkbox

項目名1
項目名2
項目名3

<input type="checkbox" id="mycheck1" value="aaa" checked="checked" />項目名1
<input type="checkbox" id="mycheck2" value="bbb" />項目名2
<input type="checkbox" id="mycheck3" value="ccc" />項目名3

baseball
basketball
soccer

<input type="checkbox" name="sports" id="chkbaseball" value="baseball" checked="checked" />
baseball<br/>
<input type="checkbox" name="sports" id="chkbasketball" value="basketball" checked="checked" />
basketball<br/>
<input type="checkbox" name="sports" id="chksoccer" value="soccer" />
soccer<br/>

val
text
<script type="text/javascript">
  //Loopさせる
  $(':checkbox[name="sports"]:checked').each(function(index, checkbox) {
    var sportsValue = $(checkbox).val();
    //⇒ sportsValue : baseball
    //⇒ sportsValue : basketball
    
    var sportsText = $(checkbox).text();
    //⇒ sportsText : baseball
    //⇒ sportsText : basketball
  });
</script>

prop
var isChecked = $("#chkbaseball").prop('checked');
//⇒ isChecked : true
var isChecked = $("#chksoccer").prop('checked');
//⇒ isChecked : false

radiobutton

項目名1
項目名2
項目名3
<input type="radio" name="myradio" value="aaa" checked="checked" />
<input type="radio" name="myradio" value="bbb" />
<input type="radio" name="myradio" value="ccc" />

checked

<input type="radio" id="rdoMan1" name="gender1" value="man" checked="checked" />
<label for="rdoMan1">MAN<label><br/>
<input type="radio" id="rdoWoman1" name="gender1" value="woman" />
<label for="rdoWoman1">WOMAN</label><br/>


<script type="text/javascript">
  $(function(){
    var isChecked = $("#rdoMan1").prop('checked');
    //⇒ isChecked : true

    var isChecked = $("#rdoWoman1").prop('checked');
    //⇒ isChecked : false
  });
</script>

value



<input type="radio" id="rdoMan2" name="gender2" value="man" checked="checked" />
<label for="rdoMan2">MAN</label><br/>
<input type="radio" id="rdoWoman2" name="gender2" value="woman" />
<label for="rdoWoman2">WOMAN</label><br/>


<script type="text/javascript">
  $(function(){
    var value = $("#rdoMan2").val();
    //⇒ value : man
    
    var strGender = $("#rdoWoman2").val();
    //⇒ value : woman
    
    //選択されているradioの文字を取得
    var value = $(":radio[name='gender2']:checked").val();
    //⇒ value : man
  });
</script>

text

<input type="radio" id="rdoMan3" name="gender3" value="rdoMan3" checked="checked" />
<label for="rdoMan3">MAN</label><br/>
<input type="radio" id="rdoWoman3" name="gender3" value="rdoWoman3" />
<label for="rdoWoman3">WOMAN</label><br/>


<script type="text/javascript">
  $(function(){
    var value = $("#rdoMan3").val();
    //⇒ value : rdoMan3
    
    //forはradioのidを指定。radioにおいてはvalueとidを一致させておく前提
    var text = $('label[for=' + value + ']').text();
    //⇒ text : MEN
  });
</script>

prop



<input type="radio" id="rdoMan4" name="gender4" checked="checked" />
<label for="rdoMan4">MAN</label><br/>
<input type="radio" id="rdoWoman4" name="gender4" />
<label for="rdoWoman4">WOMAN</label><br/>


<script type="text/javascript">
  $(function(){
    $("#rdoWoman4").prop('checked' , true);
  });
</script>

select

コンボボックス

<select>
  <option value="aaa">項目名1>/option>
  <option value="bbb">項目名2>/option>
  <option value="ccc">項目名3>/option>
</select>

リストボックス

<select size="3">
  <option value="aaa">項目名1>/option>
  <option value="bbb">項目名2>/option>
  <option value="ccc">項目名3>/option>
</select>

textarea


<textarea rows="4" cols="40">aaa</textarea>

その他

style属性

<input type="text" id="objText2" value="aaa" />

<script type="text/javascript">
  var myText = document.getElementById("objText2");
  myText.style.color = "red";
  
  var color = myText.style.color;
  ⇒ color : red
</script>

「-」を含む属性を扱う場合
<style>
  (セレクタ) { background-color: black; }
</style>

document.getElementById(~).style.backgroundColor = "black";
// 「-」を無くし、「-」の次の文字を大文字にする


<input type="text" id="objText2" value="aaa" />

<script type="text/javascript">
  $(function(){
    //style属性設定
    $('#objText2').css('color', 'red');
    
    //style属性値の取得
    var col = $('objText2').css('color');
    ⇒ col : rgb(255,0,0)
  });
</script>

CSS Style属性一覧」参照

attr (prop)

属性の設定
var myImg = document.getElementById(“myImg”);
myImg.src = "b.jpg"

属性値の取得
var img_url = myImg.src;

属性の設定
$("img").attr("src","b.jpg");
$("img").attr("src":"b.jpg" , "alt":"b" , "width":"80")

属性値の取得
var img_url =$("img").attr("src");

propでも同様
$("img").prop("src","b.jpg");
var img_url =$("img").prop("src");

HTML5フォーマット

最小限

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
</body>
</html>

jQuery/jQuery-ui

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <!--jQuery-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <!--jQuery-ui-->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <title></title>
</head>
<body>
</body>
</html>

HTML タグ一覧

基本構造

要素 レベル
<html> ルート要素
<head> ヘッダ
<body> 本体
<title> タイトル
<meta> メタ情報
<div> B 範囲指定(ブロックレベル)
<span> I 範囲指定(インラインレベル)
<h1>~<h6> 見出し
<address> 製作者情報
テキスト

要素 レベル
<p> B 段落
<br> I 改行
<em> I 強調
<strong> 取消
<del> 追加
<ins> 略語(全般)
<abbr> I 略語(頭字語)
<dfn> I 定義
<blockquote> 引用(ブロックレベル)
<q> I 引用(インライン)
<cite> I 引用元
<sup> I 上付き文字
<sub> I 下付き文字
<pre> B 整形済
<code> I ソースコード
<var> I 変数
<samp> I サンプル
<bdo> I 方向
テキスト装飾

要素 レベル
<font> I サイズ/色/種類
<basefont> 基準サイズ
<big> I 大きめ
<small> I 小さめ
<b> I 太字
<i> I イタリック体
<s> I 取消
<strike> 取消
<u> I 下線
<tt> I 等幅
レイアウト

要素 レベル
<center> 中央寄せ
<hr> B 水平線
リンク

<a> I アンカー
<base> 基準URI
<link> 関係
メディア

要素 レベル
<img> I 画像
<map> I イメージマップ
<area> イメージマップ領域
<object> I オブジェクト
<applet> I Javaアプレット
<param> パラメータ
テーブル

列グループ

要素 レベル
<table> B
<caption> タイトル
<thead> ヘッダ区域
<tfoot> フッタ区域
<tbody> 本体区域
<colgroup>
<col>
<tr>
<td> セル
<th> 見出しセル
リスト

要素 レベル
<ul> B リスト(順序無)
<ol> B リスト(順序有)
<li> リスト項目
<dl> B リスト(定義型)
<dt> 定義用語
<dd> 用語説明
<dir> B ディレクトリリスト
<menu> B メニューリスト
フレーム

要素 レベル
<frameset> ウィンドウ分割
<frame> フレーム
<noframes> B 代替内容
<iframe> I インラインフレーム
フォーム

要素 レベル
<form> B フォーム
<input> I 入力
type="text" I
type="password" I
type="radio" I
type="checkbox" I
type="hidden" I
type="file" I
type="date" I
type="time" I
type="month" I
type="week" I
type="number" I
type="color" I
type="range" I
type="search" I
type="tel" I
type="url" I
type="email" I
<textarea> I 複数行テキスト
<select> I セレクトボックス
<option> 選択肢
<optgroup> グループ化選択肢
<button> I ボタン
<label> I ラベル
<fieldset> B グループ化フォーム
<legend> グループ化ラベル
セマンティック

要素 レベル
<article>
<aside>
<nav>
<section>
<header>
<footer>
その他

要素 レベル
<style> スタイルシート
<script> I スクリプト
<noscript> B 代替内容

HTML 重要用語

要素/属性

htmlタグ

<div>

html要素

<div>~</div>

html属性/html属性値

html属性="html属性値"
<div class="~">~</div>

CSS属性/CSS属性値

(CSSプロパティ/CSSプロパティ値)
.test {
 CSS属性: CSS属性値
 text-align: center;
}

スタイルシート用スクリプト言語

LESS

Leaner CSS
lean:効率的な
スタイルシート用スクリプト言語
(「CSSメタ言語」と呼ばれる)
JavaScriptで動作
ページを読み込む度にクライアントサイドでLessからCSSに変換する(若干速度が遅くなる)
←→SASS

SASS

(サス)
Syntactically Awesome Style Sheets
Syntax:構文規則
Awesome:驚きの
→構文として凄いCSS
スタイルシート用スクリプト言語
(「CSSメタ言語」と呼ばれる)
CSSをプログラムで操作する技術
CSSに変数を埋め込み、コンパイルする事でCSSを生成する
Rubyでコンパイルされる
←→LESS

仕様

SGML

SGML」参照

XML

XML」参照

HTML

HTML」参照

XHTML

XHTML」参照

HTML5

HTML5」参照

レンダリング

マークアップ言語等で記述されたテキストから、コンピュータで画像・映像・音声等を生成する事
=HTML文書を解釈してブラウザにレイアウトされた文書等を出力する事

レンダリングモード

標準モード:W3C標準準拠
互換モード:ブラウザの独自解釈

DOCTYPE宣言がないHTMLの場合、互換モードでレンダリングされる