■ ヒントだよ！HTML & CSS ■
■ HTML
・body内タグ6
- <label 属性="属性値">～</label>
入力コントロールんいおける項目名を表す。属性:グローバル属性、for(id属性値を指定する)。
- <select 属性="属性値">～</select>
プルダウンメニューを表す。
属性:グローバル属性、autocomplete(on(初期値/off)、fom/multiple、name、required/size(表示行数)。
- <option 属性="属性値">～</option>
選択肢を表す。属性:グローバル属性、label、selected、value。
例:<select name="abc12">
<option value="ABC">ABC</option>
<option value="DEF" selected>DEF</option>
</select>
- <optgroup 属性="属性値">～</optgroup>
選択肢のクループを表す。属性:グローバル属性、disabled、label。
例:<select name="abc12">
<optgroup label="1 group">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
</optgroup>
<optgroup label="2 group">
<option value="HIJ">HIJ</option>
<option value="KLM">KLM</option>
</optgroup>
</select>
- <textarea 属性="属性値">～</textarea>
複数行にわたるテキスト入力蘭を設置する。
属性:グローバル属性、autocomplete(on/off、col(幅(初期:20))、dirname、disabled、form、maxlength、miniength、name、placeholder、readonly、required、row、wrap、rows(高さ（初期:2))。
例1:<textarea name="inp59" col="40" rows="3"></textarea>
例2:<textarea name="inp59" col="40" rows="3">入力してください</textarea><br>
- <output 属性="属性値">～</output>
計算結果を表します。属性:グローバル属性、for、form、name。
例:JavaScriptと組み合わせないと計算結果の表示にならないみたいです。
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
2つの整数の和を計算します。<br>
<input name="a" id="a" type="number"> + <input name="b" id="b" type="number"> =
<output name="o" id="o" for="a b"> 計算結果の表示。</output>
</form>
- <progress 属性="属性値">～</progress>
進歩状況を表す。属性:グローバル属性、vale、max。
例:進歩状況<progress max="100" value="25">25%</progress>
進歩状況
※ブラウザがprogressに対応していないと、「進歩状況 25%」と表示されるようです。
- <meter 属性="属性値">～</meter>
特定の範囲にある数値を表す。属性:グローバル属性、value、min、max、low、high、optimum。
例1:地域a:<meter value="70" min="0" max="100">70%</meter>
地域a:70%
例2:地域a:<meter value="70" min="0" max="100" high="50">70%</meter>
地域a:70%
例3:地域c:<meter value="25" min="0" max="100" low="30">25%</meter>
地域c:25%
※ブラウザがmeterに対応していない場合、「地域c:25%」と表示されます。
- <details 属性="属性値">～</details>
操作可能なウィジットを表す。属性:グローバル属性、open。
- <summary 属性="属性値">～</summary>
ウィジット内の項目の要約や説明分文を表す。属性:グローバル属性。
- HTML記述
-
<details open="open">
<summary>メニュー</summary>
<details>
<summary>HTML</summary>
<ul>
<li><a href="/html/tag.html">タグ</a></li>
<li><a href="/html/info.html">基礎</a></li>
<li><a href="/html/link.html">リンク集</a></li>
</ul>
</details>
<details>
<summary>CSS</summary>
<ul>
<li><a href="/css/property.html">リファレンス</a></li>
<li><a href="/css/info.html">基礎</a></li>
<li><a href="/css/link.html">ンク集</a></li>
</ul>
</details>
</details>
- 実際の例(三角形当たりをクリックして、メニューを展開・縮小してください)
-
メニュー
HTML
CSS
→ポインターの形状を汎変化させて操作できることを明示する。
<details open="open"><details>では、メニューが伸び縮みして表示のデザインが崩れるのが嫌な場合、自分は次のようにしています。
・・<b>メニュー</b><br>
・<b>メニュー</b><br>
・・<select class="setw" name="set3" onChange="location.href=value;">
<option value="#">HTML</option>
<option value="/html/tag.html">タグ</option>
<option value="/html/info.html">基礎</option>
<option value="/html/link.html">リンク集</option>
</select><br>
・・<select class="setw" name="set3" onChange="location.href=value;">
<option value="#">CSS</option>
<option value="/css/property.html">各CSS</option>
<option value="/css/info.html">基礎</option>
<option value="/css/link.html">リンク集</option>
<option value="/css/link.html">ンク集</option>
</select>
※.setw {width: 100px;}
・メニュー
・・
・・
- <dialog 属性="属性値">～</dialog>
ダイアログを表示する。属性:グローバル属性、open。
例1:<dialog open="open">ああああ</dialog>
例2:<dialog id="dialog">
ダイアログ表<br>
<button type="button" onclick="document.getElementById('dialog').close();">閉じる</button>
</dialog>
<button type="button" onclick="document.getElementById('dialog').show();">ダイアログを表示</button>
- <canvas 属性="属性値">～</canvas>
グラフィック描画領域を提供する。属性:グローバル属性、width、height。
例:
<canvas width="100" height="100" class="tbb">
<a href="greenbox.html">正方形が表示されない場合は、こちらのページをご覧ください</a>
</canvas>
- <template 属性="属性値">～</template>
スクリプトが利用するHTMLの断片を定義する。属性:グローバル属性。
- <slote 属性="属性値">～</slote>
shadowツリーとして埋め込む。属性:グローバル属性、name。
© KinutaHandicraft
