HTML辞典 pre要素、div要素の解説

整形済みテキストを表すpre(プレ・フォーマッテッド)タグ、見出しや段落をまとめる<div>タグ、段落の区切りを示す<hr>タグの使用方法について掲載

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

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

要素カテゴリーコンテンツモデル
pre要素
  • パルパブルコンテンツ
  • フローコンテンツ
フレージングコンテンツ
div要素フローコンテンツ
hr要素フローコンテンツ

グローバル属性

HTML共通で指定できるグローバル属性について

div要素

ブロックレベル要素

書式・概要

<div>~</div>

div要素はフローコンテンツをまとめます。div要素自体は特別な意味を持ちません。範囲にふさわしいタグがないときに使うブロックレベルのようです。

デザイン上の目的で部分的にスタイルシートを適用したりJavaScriptで操作したりするのによく用いられます。

基本的な使用方法

実装例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>div要素サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <main>
         <div>
             <h1>激レア翼竜カード</h1>
             <p>世界崩壊後に入手可能な激レアの翼竜カード!</p>
         </div>
         <div>
             <h1>激レア恐竜カード</h1>
             <p>世界崩壊後に入手可能な激レアの恐竜カード!</p>
         </div>
      </main>
  </body>
</html>

実行結果

chromeブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera

pre要素

ブロックレベル要素

書式・概要

<pre>~</pre>

pre要素は整形済みテキストのブロックを表します。整形済みテキストとは空白文字や改行などで整形しているテキストです。通常のテキストはブラウザでは、以下のルールで表示されます。

  • タブ文字は半角スペース1つとして扱われる
  • 改行コードは半角スペース1つとして扱われる
  • テキストが表示領域の横幅に達すると、そこで折り返して表示される。

<pre>~</pre>タグで囲まれたテキストは、上記ルールがすべて無効になります。入力された内容がそのまま画面上に表示されます。

pre要素の要素内容は、ブラウザの設定によりますが、一般に等幅フォントで表示されます。

また、「<」「>」「&」は特殊文字として認識されてしまうので、「&lt;」、「&gt;」、「&amp;」を使って記述します。

基本的な使用方法

実装例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>pre要素のサンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <h1>pre要素のサンプル</h1>
      <pre>
           <html lnag="ja">
               <head>
               
               </head>
                   <meta charset="uft-8">
               <body>
                   function reset(){
                       ・
                       ・
                       ・
                   }
               </body>
           </html>
      </pre>
  </body>
</html>

実行結果

chromeブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera

hr要素

書式・概要

<hr>

hr要素は、その位置で主題が変わるときに使用します。セクションの内部の段落と段落の間で使用します。このタグが定義された当初は、<hr>は罫線(horizontal rule)を表示させるための要素でした。そのための互換を考慮して現在の一般的なブラウザでは横罫線が表示されます。

基本的な使用方法

実装例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>hr要素サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <main>
         <section>
             <p>世界崩壊後に入手可能な激レアの翼竜カード!</p>
             <hr>
             <p>世界崩壊後に入手可能な激レアの恐竜カード!</p>
         </section>
      </main>
  </body>
</html>

実行結果

chromeブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera