未知の苦HTML解道 つまず紀行! <ホームページ作成支援>














改行



段落









 HOME >> 実践HTML >> ブロックレベル要素1 >> 抜粋・引用

HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素(ハイパーリンク)"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む(マークアップにより書き表す)文書構造になっています。


■ブロックレベル要素とは・・・?

ひとつのブロック(まとまり)から構成される要素の名称です。
ブロックレベル要素の前後は、要素特性により、段落または改行されます。


ブロックレベル要素群(abc順)

<address> <blockquote> <center> <div> <dl> <fieldset> <form> <h1〜h6> <hr> <noframes> <noscript> <ol> <p> <pre> <table> <ul>

 ★ 抜粋・引用 <blockquote>タグ >> 定義上cite属性が必要
 ★ blockquote は 「Block-quote」=ブロック引用文の意

抜粋・引用は<bloclquote>タグで記述します。
<blockquote>タグで挟まれた箇所は、要素特性により、上下共に一行分の空白が挿入され、左右は、字下げ(インデント)になります。

例えば、当サイトのprコメントを<blockquote>タグで挟むと、次のようになります。

HTMLのイロハも知らず、ウェブ素材提供サイト様のテンプレートをDLしては改造、破壊を繰り返し、修復不能は日常茶飯事・・・心機一転。 万年初心者脱却紀行。

<bloclquote>タグは、定義上[cite属性] を書き加えます。
タグとその属性をまとめると、次のようになります。

要素名と属性の間に半角スペース必須

 |←←←←←←←←←←← 要 素 →→→→→→→→→→| 
  ↓要素名   ↓cite属性    ↓要素内容  
 <blockquote cite="引用元url">未知の苦</blockquote>
        |←←属  性→→|  
          |←←値→→|

blockquoteタグは、ブロック引用要素と呼ばれています。要素名称からも判るように"抜粋・引用"したドキュメントを示す要素です。

HTML定義HTML4.0は、blockquoteタグに、"抜粋・引用"元(出典元)などの所在を示す[cite属性]の記述を定義しています。

ただし、[cite属性]を記述しても、IEやネスケなどのブラウザで見たとき、画面上に引用元は、表示されません。

画面上に引用元を示すためには、フレーズ要素のCITE要素を使って記述する方法が考えられます。

※要素特性により「斜体字」 >> cite要素

HTMLのイロハも知らず、ウェブ素材提供サイト様のテンプレートをDLしては改造、破壊を繰り返し、修復不能は日常茶飯事・・・心機一転。 万年初心者脱却紀行。

™未知の苦HTML解道サイトPRから引用

■ソース表示

<blockquote cite="http://www14.plala.or.jp/hrm/">
HTMLのイロハも知らず、ウェブ素材提供サイト様のテンプレートをdlしては改造、破壊を繰り返し、修復不能は日常茶飯事・・・心機一転。 万年初心者脱却紀行。
<p align="right">
<cite>™未知の苦HTML解道サイトprから引用</cite>
</p>
</blockquote>

 純粋なテキストの字下げは[text^indent属性]

段落目的、あるいは字下げ(インデント)を目的に、blockquoteタグの利用は、blockquote要素の定義から逸脱していると、諸先輩方が警鐘しています。

段落させ、尚且つ、字下げする場合は、p要素+[text-indent属性]を設定します。

行頭から字下げする幅(長さ)は[数値単位(pt、px、emまたは%)]で指定します。

下記の文頭と「™未知の苦HTML解道サイトPRから引用」の箇所が[text-indent属性]を記述した一例です。

HTMLのイロハも知らず、ウェブ素材提供サイト様のテンプレートを DLしては改造、破壊を繰り返し、修復不能は日常茶飯事
・・・心機一転、 万年初心者脱却紀行。

™未知の苦HTML解道サイトPRから引用

■ソース表示

<p style="text-indent:10pt;">
HTMLのイロハも知らず、ウェブ素材提供サイト様のテンプレートを DLしては改造、破壊を繰り返し、修復不能は日常茶飯事
<br>・・・心機一転、万年初心者脱却紀行。
<p>
<p style="text-indent:120pt;">
<cite>™未知の苦HTML解道サイトPRから引用 </cite>
</p>


■ブロックレベル要素とインラインレベル要素

The Web KANZAKI様 TOP | やや詳しい目次 |
 インターネットやコンピュータの話 | HTMLの説明  >>
 簡単なHTMLの説明 | 2文書の骨格となる基本要素 >>
 文書の骨格をかたちづくる基本要素 | ブロックとインライン
 >> ブロックレベル要素とインライン要素



  実用ツール

HTML文法検証
HTML文書の文法チェックと採点

CSS文法検証
W3C CSS 検証サービス

IT用語辞典
IT用語検索
<< Back | ホーム | ▲Page Top | Next テキスト整形 pre
Base template by WEBMAGIC  Copyright © 未知の苦HTML解道, all right reserved, since 2004. 8.25