読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

個人勉強用ブログだっす。

HTML5の要素と属性 - HTML5新規共通属性

HTML5は既存HTMLの殆どの要素は残していて、かつ新規属性を追加している。

HTML5新規属性

  • contentEditable属性

    • trueの場合、要素内の内容編集可能
    • 継承性を持っている
  • designMode属性

    • グローバルcontentEditableである
    • onの場合、ページ全体が編集可能
  • hidden属性

    • true,falseで表示、非表示を制御する
  • spellcheck属性

    • すペールチェックを行う
    • <input.../>, <textarea.../>などの属性
    • 属性値はtrue,false

contentEditable属性サンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> contentEditable</title>
</head>
<body>
<!-- contentEditable="true"の要素は編集可能 -->
<div contentEditable="true" style="width:500px;border:1px solid black">
親DIV要素
<!-- 親要素が編集可能なので、編集可能 -->
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
    <td>1-1 編集可能</td>
    <td>1-2 編集可能</td>
</tr>
<tr>
    <td>2-1 編集可能</td>
    <td>2-2 編集可能</td>
</tr>
</table>
</div>
<hr/>
ダブルく後に編集可能
<table id="target" 
    ondblclick="this.contentEditable=true;"
    style="width:420px;border-collapse:collapse" border="1">
<tr>
    <td>Java</td>
    <td>Ruby</td>
</tr>
<tr>
    <td>C/C++</td>
    <td>Python</td>
</tr>
</table>
</body>
</html>

f:id:liguofeng29:20160117150136g:plain


designMode属性サンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC" />
   <title> designMode要素 </title>
</head>
<body ondblclick="document.designMode='on';">
<div>ダブルクリックでページ全体が編集可能</div>
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
    <td>1-1</td>
    <td>1-2</td>
</tr>
<tr>
    <td>2-1</td>
    <td>2-2</td>
</tr>
</table>
</body>
</html>

f:id:liguofeng29:20160117150430g:plain


hiddenサンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> hiddenハヤ </title>
</head>
<body>
<div id="target" hidden="true" style="height:80px">
テキストテキストテキスト
</div>
<button onclick="var target=document.getElementById('target');
   target.hidden=!target.hidden;">テキスト表示</button>
</body>
</html>

f:id:liguofeng29:20160117150703g:plain


spellcheckサンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC" />
   <title> spellcheck属性 </title>
</head>
<body>
<!-- すペールチェックを行う -->
<textarea spelllcheck="true" rows="3" cols="40">
</textarea>
</body>
</html>

f:id:liguofeng29:20160117151134g:plain