html5第3回

html5第3回

引き続きhtml5のタグについて学習する。

引用

<blockquote url="">文字列</blockquote>

引用部をくくる。urlは必須でない。

整形済テキスト表示

<pre>文字列<pre>

整形済テキストの表示。コードを表示するときなど。

強調

<em>文字列</em>

文脈として強調したい箇所をくくる。

重要

<strong>文字列</strong>

ページとして重要な語句をくくる。見出しと同じワードを入れると良いとされる。

注目

<mark>文字列</mark>

閲覧者に注目させたい箇所をくくる。自動で背景色が黄色になる。

日時

<time>文字列</time>

日時を示す。

<time datetime=" 2014-11-11">11/11</time>

読み仮名

<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

読み仮名。rpはruby未対応ブラウザ(firefoxや古いブラウザ)に対し意味を持つ(この場合()内にrt内の文字列を表示させられる)。

新規ページを開く際の指定

<a target="値">

1度廃止されたtergetが復活。新規ページを開く際の指定に用いる。値は下記のとおり。

• _self 現在のウィンドウでリンク先を開く
• _parent 現在のウィンドウの親ウィンドウでリンクを開く
• _top 現在のウィンドウの最上位階層のウィンドウでリンクを開く
• _blank 新しいタブやウィンドウでリンクを開く

英単語の改行箇所指定

aaaaa<wbr>aaaaa

長い英単語を入力する場合に改行可能箇所を指定する。テキスト表示部位のwidthが狭い場合など、長い英単語を表示させるとbox外や画面外にはみ出してしまう。こうした際にこのタグを使うのだが、日本語の2バイト文字は1文字ずつ自動改行なので滅多に使わない。

関連性のある図やコードの指定

<figure id="">図やコードなど</figure>

本文が参照するような密接な関係性を持つ図やソースコードをくくる。
直接関連付けすることは出来ないので、意味のある図がある、という解釈をさせる機能を持つ。
使用例

<figure id="">
<img src="" alt="">
<figcaption>図の説明</figcaption>
</figure>

音声ファイル

<audio controls><source src=""></audio>

音声ファイルをhtmlで直接扱えるようになった。audioタグにsrc=""を記述できるが、1つしか書けない。ブラウザによって再生できるファイルが異なるので、で複数のファイルを指定する。また、audioが再生できない場合のメッセージをpタグで記述する。

<audio controls>
<source src="xxx.mp3">
<source src="xxx.ogg">
<p>audio未対応です</p>
</audio>

動画ファイル

<video controls><source src=""></video>

videoもaudioと同様。

<video controls>
<source src="xxx.mp4">
<source src="xxx.webm">
</video>

キャンバス

<canvas id=""></canvas>

javascriptと併用し、画像ファイルなしで描画できる。下記の例では線画と黒塗りの2つのboxが描かれる。

<script type="text/javascript">
window.onload=function(){
  var canvas=document.getElementById('cv1');
  var ct=canvas.getContext('2d');
  ct.fillRect(20,20,120,80);
  ct.strokeRect(60,60,120,100);
}
</script>
<canvas id="cv1" width="300" height="300"></canvas>

今回はここまでとする。