HTML辞典 p要素、blockquote要素、figure要素、figcaption要素の解説

ギフト・ポイントGet!
HTML辞典 HTML辞典
この記事は約10分で読めます。

段落を表す<p>(パラグラフ)タグ、段落単位での引用を表す<blockquote>タグの解説、写真や図表などのまとまりを表す<figure>タグ、図表や写真などにキャプションを付与する<figcaption>タグの使用方法を掲載

HTML5

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素 カテゴリー コンテンツモデル
p要素
  • エンベッディッドコンテンツ
  • フレージングコンテンツ
  • フローコンテンツ

0個、または複数のsource要素に続いて、1つのimg要素。オプションでスクリプト支援要素

(script要素及びtemplate要素)

blockquote要素
  • セクショニングルート
  • パルパブルコンテンツ
  • フローコンテンツ

フローコンテンツ

figure要素
  • セクショニングルート
  • パルパブルコンテンツ
  • フローコンテンツ
  • フローコンテンツ
  • 最初または最後の子要素としてfigcaption要素を記述可能
figcaption要素 なし

フローコンテンツ

グローバル属性(共通)

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey(アクセスキー)

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

内容
offまたはnone自動的な大文字化は指定しない
onまたはsentences最初の文字を大文字化する
words各語の最初の文字を大文字化する
charactersすべての文字を大文字化する

class(クラス)

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable(コンテント・エディタブル)

要素の内容が閲覧者による編集可能かどうか指定します。

内容
trueまたは、空閲覧者による編集可能。
false閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir(ディレクショナリティ)

要素の内容の書字方向(文字を書き進める方向)を指定します。

内容
ltrテキストを左から右へ書き進める。「Left to Righ」の略
rtl要素は編集不可。「Right to Left」の略
autoユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

内容
テキストを左から右へ書き進める。「Left to Righ」の略
autoユーザーエージェントによって自動的に書字方向を決める

hidden(ヒドゥン)

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

id(アイディー)

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang(ランゲージ)

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例:lang=”ja”

spellcheck(スペルチェック)

要素の内容に対するスペルチェックの可否を指定します。

trueスペルチェックをします。
falseスペルチェックをしません。

style(スタイル)

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex(タブインデックス)

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title(タイトル)

要素に補足情報を加えます

translate(トランスレート)

翻訳対象にするかどうかを指定します。

内容
yes翻訳対象とする
no翻訳非対象とする

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

p要素

ブロックレベル要素

書式・概要

<p>~</p>

p要素は文書の段落を表します。段落とは文書内でひとかたまりになっている文章のことで、通常は複数の文で構成されます。印刷媒体では前後に改行や空白行をいれることによって表現されています。

段落の先頭を1文字開けたい場合は、全角スペースを設置するか、CSS「text-indent: lem」を指定します。

使用方法

p要素は、その範囲がひとつの段落(paragraph)であることを表します。一般的なブラウザでは、この要素の前後にはほぼ1行分のスペース(マージン)がとられて表示されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>P要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <p>蓮の花が咲くころには、故郷に帰郷する予定です。
     まだ、昔通ったオムライスを提供する朝日食堂は残っているででしょうか
       </p>
   <p>
        朝日食堂は、明治30年ほどに創業しました。夫婦二人で立ち上げ、地域に愛される食堂になりました。
     </p>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル p要素のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル p要素のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル p要素のedge実行サンプル

opera 実行サンプル

基本的なサンプル p要素のopera実行サンプル

blockquote要素

ブロックレベル要素

書式・概要

<blockquote 属性="属性値">引用文</blockquote>
<blockquote cite="引用元のURL">引用文</blockquote>

blockquote要素は、テキストが長い引用文であることを示します。

文章を段落などのまとまった単位で(ブロックレベル要素として)引用する場合に使用されます。cite属性を使用すると、引用したページのURLを示すこともできます。この要素は、一般的なブラウザでは左右がインデントされた状態で表示されますので、かつては左右のマージンをとる目的だけで利用されることもありました。

しかし、それではその部分全体が引用された文章であることになってしまいますので、マージンを設定した場合にはスタイルシートを使うようにしてください。

使用方法

引用文エリアは、通常インデントされます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>blockquote要素サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <section>
          <p>
           たとえば、W3Cのアクセシビリティ・ガイドライン1.0の中には次のような一説があります
          </p>
          <blockquote cite="https://waic.jp/docs/WCAG20/Overview.html">
              <p>ユーザーエージェントでは</p>
          </blockquote>
      </section>
      <section>
          <blockquote cite="urn:isbn:978-4041053324">
              <p>黒蜥蜴 江戸川乱歩ベストセレクション (5)</p>
          </blockquote>
      </section>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル blockquote要素のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル blockquote要素のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル edge要素のchrome実行サンプル

opera 実行サンプル

基本的なサンプル blockquote要素のopera実行サンプル

figure要素

書式・概要

<figure>~</figure>

figure要素は、写真、挿絵、図表、コードなどのまとまりを表します。figure要素によるまとまりは、単体で独立したものでなければなりません。

要素内容としてはフローコンテンツであればなんでもいれることができるため、画像や表のほかソースコードを掲載したい場合などに利用できます。

figcaption要素

書式・概要

<figcaption>~</figcaption>

figcaption要素は、figure要素であらわす図表にキャプション(見出しや説明文など)を付けるための要素です。<figure>~</figure>の範囲内の任意の位置に配置できます。

figure要素・figcaption要素の使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>figure要素サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <h1>京都の古都を探索</h1>
      <figure>
          <p>東寺の五重塔は天長3年(826年)に弘法大師空海が創建したと言われている。</p>
          <img src="629959_s.jpg" alt="">
          <figcaption>着物で京都の古都を歩く情景</figcaption>
      </figure>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル figure要素、figcaption要素のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル figure要素、figcaption要素のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル figure要素、figcaption要素のedge実行サンプル

opera 実行サンプル

基本的なサンプル figure要素、figcaption要素のopera実行サンプル

コメント

タイトルとURLをコピーしました