コーディング

本気で学ぶ！HTML入門#08

【HTML入門】blockquote要素、pre要素、div要素の使い方

HTML#08

「HTML入門」8回目ですね。今回もテキスト関連のブロックレベル要素を学習していきます。今回は、p要素や見出しの要素と比べると使用頻度は低い3つの要素を一気に行きます。その3つとは、「<blockquote>（引用文）」、「<pre>整形済テキスト」、「<div>（グループ化）」の3つです。

今回、演習は用意してないので「こんな要素があるんだ」とさらっと見ておいて下さい。そして、これらの要素を使う必要が出てきた時に、再びこのページを見てもらえればと思います。

目次

  1. 引用を表すblockquote要素
  2. 整形済みテキストを表すpre要素
  3. 要素をグループ化するdiv要素
  4. まとめ

引用を表すblockquote要素

blockquote要素は、<blockquote> 〜 </blockquote> で、囲まれた範囲が引用文であることを表す要素です。

概要
blockquote要素（ブロッククォート）は、<blockquote> 〜 </blockquote>で囲まれた範囲が引用文であることを示す。
コンテンツ・カテゴリ
コンテンツ・モデル
フロー・コンテンツ
配置できる場所
フロー・コンテンツが配置できる場所
ブロックレベル要素・インライン要素
ブロックレベル要素

要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。

HTML入門#05

【HTML入門】要素のカテゴリは配置のルールを示す

  • date_range

　もし、引用文が文章の一部のみなら、インライン要素のq要素を使用しましょう、

属性

blockquote要素は、グローバル属性以外に以下の属性も使えます。

cite
引用元を示す属性。属性値は以下のようになります。

  • WEBページが引用元の場合：そのページのURL
  • 書籍が引用元の場合：その書籍のISBNコード

属性については下記の記事を御覧ください。

HTML入門#2

【HTML入門】HTMLの属性ってなに？属性の役割と書き方

  • date_range

サンプル

<h2>HTMLとは</h2>
<blockquote cite="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">
  <p>
    HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。
  </p>
</blockquote>
<p>Wikipediaより引用</p>

表示例

See the Pen mEbXgm by Qlio (@qlio) on CodePen.23853

整形済みテキストを表すpre要素

pre要素は、<pre> 〜 </pre> で、囲まれた範囲がすでに整形済みのテキストであることを表す要素です。主に、「HTTML・CSS」、「プログラムコード」、「アスキーアート」などに使われています。

概要
pre要素は、Preformatted Textの略で、<pre> 〜 </pre>で囲まれた範囲が整形済みテキストであることを示し、「半角スペース」や「改行」などは入力した状態まま「等幅フォント」で表示される。
コンテンツ・カテゴリ
フロー・コンテンツ
コンテンツ・モデル
フレージング・コンテンツ
配置できる場所
フロー・コンテンツが配置できる場所
ブロックレベル要素・インライン要素
ブロックレベル要素

要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。

HTML入門#05

【HTML入門】要素のカテゴリは配置のルールを示す

  • date_range

属性

pre要素は、グローバル属性が使えます。

昔は、1行あたりの文字数を指定する目的で以下の属性もありました。

width
1行あたりの文字数を指定する属性。属性値には横幅の文字数を数値で指定。

が、HTML4.01では「非推奨」、HTML5では「廃止」の属性になっています。横幅の設定は視覚的な表現ですので、CSS（WEBサイトの視覚的表現を行なう言語）で設定しましょう。

属性については下記の記事を御覧ください。

HTML入門#2

【HTML入門】HTMLの属性ってなに？属性の役割と書き方

  • date_range

注意点

pre要素に限ったことではありませんが、HTMLのソースコードに「<」や「 >」などの記号をそのまま入力するとHTMLのタグと見なされ正しく表示されません。HTMLに記号は入力する際は「実体参照」を行いましょう。

実体参照
HTMLのソースコードに直接記述できない記号を表示するために用いられる手法のこと。具体的にはその記号を表す&からはじまる特定の文字列をソースコードに記述する。
[主な実体参照]

  • <：&lt;
  • >：&gt;
  • &：&amp;
  • "：&quot;
  • ©：&copy;

サンプル

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;ここにタイトル&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;ここに文章&lt;p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

表示例

See the Pen KMPQYG by Qlio (@qlio) on CodePen.23853

要素をグループ化するdiv要素

div要素は、<div> 〜 </div> の要素をグループ化する要素です。複数の要素をまとめる時に使います。HTML単体ではあまり使用しませんが、CSS（WEBサイトの視覚的表現を行なう言語）でレイアウトする際にとても使います。

概要
div要素は、Divisionの略で、<div> 〜 </div>で囲まれた複数の要素をグループ化する。文書構造的な意味を持たない汎用ブロックレベル要素。
コンテンツ・カテゴリ
フロー・コンテンツ
コンテンツ・モデル
フロー・コンテンツ
配置できる場所
フロー・コンテンツが配置できる場所
ブロックレベル要素・インライン要素
ブロックレベル要素

要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。

HTML入門#05

【HTML入門】要素のカテゴリは配置のルールを示す

  • date_range

属性

div要素は、グローバル属性が使えます。

なお、昔は上記のグローバル属性以外に「align属性（アライン属性）」という属性を用いて、文章を中央揃えにしたり、右揃えにしたりしていました。

が、HTML4.01では「非推奨」、HTML5では「廃止」の属性になっています。横幅の設定は視覚的な表現ですので、CSS（WEBサイトの視覚的表現を行なう言語）で設定しましょう。

属性については下記の記事を御覧ください。

HTML入門#2

【HTML入門】HTMLの属性ってなに？属性の役割と書き方

  • date_range

サンプル

<div class="item">
  <h2>商品名A</h2>
  <p>商品の説明文</p>
</div>
<div class="item">
  <h2>商品名B</h2>
  <p>商品の説明文</p>
</div>

表示例

See the Pen VjZXwm by Qlio (@qlio) on CodePen.23853

まとめ

今回は、p要素や見出しの要素と比べると使用頻度は少ないテキスト関連のブロックレベル要素を紹介しました。

blockquote要素やpre要素は利用する場面が決まっているので、必要に応じて使用して下さい。div要素はHTMLのみではあまり使いません。CSS（WEBサイトの視覚的表現を行う言語）と絡めて使うことが多いので、その時また見てください。

次回からは、テキスト関連のインライン要素見ていきましょう。まずは、改行からですかね。

HTML入門#09

【HTML入門】改行は<br>。ただちょっと注意も必要

  • date_range