トップ Web関連 CSS関連 CSSの引用・ソースコードなどの表示と特殊文字入力

引用・ソースコードなど表示と特殊文字入力

引用・転載であるを表示

  • <blockquote>~<blockquote>は引用・転載であることを表す。
  • XHTML 1.0 Strict記述の場合、<blockquote>タグの直下にはインライン要素は置けないので<p>などを使用する。
  • <q>は改行などを伴わない短い文章の引用に使用。
  • <q>ではIE以外のブラウザでは「"」が前後に付けられる。
  • <cite>は出典や著作者名の明記に付ける。

サンプルです

これは引用です。

<blockquote cite="http://www.arcaid.jp">
  <p>これは引用です。</p>
</blockquote>

これは引用元(出典・参照先)のサンプル

<p>これは<cite>引用元(出典・参照先)</cite>のサンプル</p>

これは短文引用(インライン)のサンプル

<p>これは<q>短文引用(インライン)</q>のサンプル</p>

ソースコードを表示

プログラムのソース等を掲載する場合には以下のような形に表示し、またコンテンツ作成時には以下のように指定している。

  • <BLOCKQUOTE>~</BLOCKQUOTE>は引用・転載であることを表す。
  • XHTML 1.0 Strict記述の場合、<blockquote>タグの直下にはインライン要素は置けないので<p>などを使用する。
  • フォント指定にはCSSのfont-familyプロパティにて指定をおこなう。
  • 指定がない場合にはブラウザのデフォルトフォントが使用される。

サンプルソースです

ABCDE abcde 12345 ABCDE abcde 12345 ABCDE abcde 12345 ABCDE abcde 12345 ABCDE abcde 12345 ABCDE abcde 12345 ABCDE abcde 12345 ABCDE abcde 12345 基本的に折り返して表示する事に。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
012345678901234567890123456789
あいうえおアイウエオぁぃぅぇぉァィゥェォ亜伊鵜得尾
PROCEDURE Example_42;
VAR
	i,j,numtxt : INTEGER;
	h : HANDLE;
	textStore: DYNARRAY[] OF STRING;
BEGIN
	ALLOCATE textStore[1..numtxt];
	h:=FSActLayer;
	WHILE (h >> NIL) DO BEGIN
		IF (GetType(h) = 10) THEN BEGIN
			textStore[j]:=GetText(h);
			Message('Array element ',i,' contains ', textStore[i]);Message('Array element ',i,' contains ', textStore[i]);Message('Array element ',i,' contains ', textStore[i]);
		END;
		h:=NextSObj(h);
	END;
	ALLOCATE textStore[1..numtxt+2];
	・
	・
	・
END;
Run(Example_42);

ソース表示用のCSSを表示

pre{
	background					:#fafafa;
	border						:dashed 2px #ccc;
	line-height					:140%;
	margin						:5px 0px 5px 0px;
	padding						:0.99em;
	overflow-x					:auto;			/* IEは5から。それ以外はCSS3から word-wrapを継承*/
	overflow-y					:auto;			/* IEは5から。それ以外はCSS3から word-wrapを継承*/
}
code{
	font-family : "Osaka-等幅",Osaka-mono,"MS PGothic","MS ゴシック",Courier,"Courier New", monospace;
	letter-spacing				: 0px;			/* 文字間をフォントサイズの 0em 分に指定 */
	font-size					: 93%;			/* 12pt */
	color						: #006600;
}

コード表示用ソース

<pre><code><!--
-->・・・ソースコード表示
</code></pre>

これは変数・引数のサンプル

<p>これは<var>変数・引数</var>のサンプル</p>

特殊文字入力が必要な訳

このページのようにHTMLタグをそのまま記載したいときなど、<や>をそのまま書いてしまうとタグとして解釈されてしまい問題が起きる。そんな時にはHTMLにおいて特殊文字の文字参照を使用する事で表示可能となる。
文字参照にはと文字実体参照と数値文字参照との二種があり、数値文字参照には10進法と16進法の2種類がある。

  • 文字実体参照
    • 文字実体参照(character entity references)
    • 数値文字参照 (Numeric character reference) 10進表記
    • 数値文字参照 (Numeric character reference) 16進表記
使用頻度の高い特殊文字(必ず小文字で記述する)
文字 文字表記 10進表記 16進表記 内容
"<" &lt; &#60; &#x3C; HTMLタグと認識されてしまう可能性がある
">" &gt; &#62; &#x3E; HTMLタグと認識されてしまう可能性がある
""" &quot; &#34; &#x22; タグの属性値と解釈される可能性がある
"&" &amp; &#38; &#x26; アンパサンドは文字参照と解釈される可能性がある
" " &nbsp; &#160; &#xA0; 一般的にブラウザは空白文字を詰めてしまうため

その他の丸数字やローマ数字などはHTMLクイックリファレンスさんの所などを参照してください。

またakiyan.comさんの所の変換機能も大変便利です。(感謝)


投票数:8 平均点:10.00
前
CSSの文字要素の表示
カテゴリートップ
CSS関連
次
CSSのリストの表示

新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ

ライブラリ