カテゴリー: HTML5

カテゴリー
caption HTML5

captionタグとは？-HTML

（例）captionタグの使用方法

See the Pen
table by linlin (@linlin098765)
on CodePen. 

<table>
<caption>
<strong>お肉</strong>
<details>
<summary>このテーブルの説明</summary>
<p>説明文補助</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこ</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>品質が素晴らしい</td><th>高級焼肉店</th><td>値段が高価、予約が必要</td></tr>
<tr><td>値段が良心的、気軽</td><th>大衆焼肉店</th><td>品質が微妙、休みの日は混む</td></tr>
</tbody>
</table>

captionタグとは？-HTML

　captionタグはtableタグのタイトル（キャプション）を表示させるタグです。
　captionタグはtableタグの子要素に記述します。

カテゴリー
HTML5 table

tableタグとは？-HTML

（例）tableタグの使用方法

See the Pen
table by linlin (@linlin098765)
on CodePen. 

<table>
<caption>
<strong>お肉</strong>
<details>
<summary>このテーブルの説明</summary>
<p>説明文補助</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこ</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>品質が素晴らしい</td><th>高級焼肉店</th><td>値段が高価、予約が必要</td></tr>
<tr><td>値段が良心的、気軽</td><th>大衆焼肉店</th><td>品質が微妙、休みの日は混む</td></tr>
</tbody>
</table>

tableタグとは？-HTML

　tableタグとは、テーブル（表）を表示させるタグです。
　基本構造として、tableタグの子要素としてtrタグで１行を表示し、trタグの子要素としてthタグとtdタグにより構成されます。
　テーブルのタイトル（キャプション）はcaptionタグによって表記します。

カテゴリー
HTML5 source

sourceタグとは？-HTML

（例）sourceタグの使用方法

See the Pen
source by linlin (@linlin098765)
on CodePen. 

<video controls autoplay>
<source src='video.mp4' type='video/mp4;'>
</video>

sourceタグとは？-HTML

　sourceタグはvideoタグとaudioタグの子要素として使用します。
　videoタグとaudioタグのsrc属性でファイルを指定するのではなく、子要素となるsourceタグのsrc属性でファイルを指定します。sourceタグは複数使用することが可能であるため、拡張子が違うファイルを複数選択することにより、ファイルの閲覧性が向上します。sourceタグが複数あろうとも再生可能なのは１つになります。

カテゴリー
audio HTML5

audioタグとは？-HTML

（例）audioタグの使用方法

See the Pen
audio by linlin (@linlin098765)
on CodePen. 

<audio src="sample.mp3" controls>
<p>audioタグをサポートしたブラウザが必要です。</p>
</audio>

audioタグとは？-HTML

　audioタグとは、音楽ファイルを再生する際に使用するタグです。
　src属性で音声ファイルを指定し、audioタグ内のメッセージは音楽ファイルが再生されない場合のテキストを記述します。

  • src属性
    音楽ファイルを指定
  • autoplay属性
    音楽ファイルを自動再生
  • preload属性
    音楽ファイルをあらかじめ読み込む
  • loop属性
    ループ再生を指定
  • controls属性
    インターフェースを表示
カテゴリー
HTML5 video

videoタグとは？-HTML

（例）videoタグの使用方法

See the Pen
video by linlin (@linlin098765)
on CodePen. 

<video>
<source src="sample.mp4">
<source src="sample.wmv">
<p>videoタグをサポートしたブラウザが必要です。</p>
</video>

videoタグとは？-HTML

　videoタグは動画を表示・再生したい場合に使用するタグです。
　src属性でURLを指定することでvideoを表示可能です。videoタグが表示されない環境の場合はvideoタグ内に文章を記述することでメッセージも表記可能です。

  • autoplay属性
    動画を自動再生させる属性
  • preload属性
    ホームページ読み込み後に即再生させる属性
  • controls属性
    動画の再生・停止・ボリュームなどコントロールできるボタンを表示させる属性
  • poster属性
    動画を表示できなかった場合の画像を表示させる属性
カテゴリー
HTML5 param

paramタグとは？-HTML

（例）paramタグの使用方法

See the Pen
object by linlin (@linlin098765)
on CodePen. 

<object data="https://www.llc-linlin.com/picture/SEO.jpg" type="image/gif" width="100" height="75">
  <param name="image" value="https://www.llc-linlin.com/picture/SEO.jpg">
</object>

paramタグとは？-HTML

　paramタグは、objectタグにてプラグインデータを表示する際にプラグインのパラメータを指定するタグです。
　paramタグはobjectタグの子要素として使用します。name属性でパラメータの名前、value属性で値を指定します。 どちらも必須属性となります。

カテゴリー
HTML5 object

objectタグとは？-HTML

（例）objectタグの使用方法

See the Pen
object by linlin (@linlin098765)
on CodePen. 

<object data="https://www.llc-linlin.com/picture/SEO.jpg" type="image/gif" width="100" height="75">
  <param name="image" value="https://www.llc-linlin.com/picture/SEO.jpg">
</object>

objectタグとは？-HTML

　objectタグは外部リソース全般を表示させることができるタグです。embedタグと違い、プラグインを必要としないタグも表示可能です。data属性で外部リソースのURLを指定します。

カテゴリー
embed HTML5

embedタグとは？-HTML

（例）embedタグの使用方法

See the Pen
embed by linlin (@linlin098765)
on CodePen.

<embed src="◯◯.swf" width="400" height="300">

embedタグとは？-HTML

　embedタグとは、外部アプリケーション（Flash、動画、音声データ等）を必要とするコンテンツを表示させるタグです。
　src属性で表示させたいコンテンツのURLを指定します。

カテゴリー
HTML5 iframe

iframeタグとは？-HTML

（例）iframeタグの使用方法

See the Pen
iframe by linlin (@linlin098765)
on CodePen. 

<iframe src="https://www.llc-linlin.com/"></iframe>

iframeタグとは？-HTML

　iframeタグは、自ホームページに別リンクのホームページ（HTMLファイル等）を挿入・表示させるタグです。
　URLを指定することで他ホームページを表示可能です。

カテゴリー
HTML5 img

imgタグとは？-HTML

（例）imgタグの使用方法

See the Pen
img by linlin (@linlin098765)
on CodePen. 

<img src="https://www.llc-linlin.com/picture/SEO.jpg" alt="SEOの画像">

imgタグとは？-HTML

　imgタグは画像を表示する際に使用するタグです。
　src属性で画像ファイルを指定します。
　alt属性で画像を表示できない場合の代替テキストが指定可能です。
　title属性で画像のキャプション情報を指定できます。
　figureタグの子要素にlegendタグとimgタグを使用すると、legendタグの内容が画像のキャプション情報となります。
　キャプション情報とは、画像のタイトルや説明を指します。。