●HTMLのサンプル例→ > №00 > №01 > №02 > №03 > №04 > №05 > №06 > №07 > №00 > END

№3.フォント・テキスト

№3.フォント・テキスト

01<big>要素は、文字を一回り大きく表示する要素です。

<big>要素は、文字を一回り大きく表示する要素です。 文字を一回り小さく表示させたい場合は、<small>要素を使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<big>~</big>

サンプルコード <p>通常の文字サイズ</p> <p><big>ひとまわり大きめの文字サイズ</big></p>
※★sample
★①011サンプル

02<small>要素は、文字を一回り小さく表示する要素です。

<small>要素は、文字を一回り小さく表示する要素です。 文字を一回り大きく表示させたい場合は、<big>要素を使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<small>~</small>

サンプルコードHTML <p>通常の文字サイズ</p> <p><small>ひとまわり小さめの文字サイズ</small></p>
※★sample
★①021サンプル

03<b>要素は、文字を太字で表示する要素です。

<b>要素は、文字を太字で表示する要素です。 文字を強調したり、目立たせることができます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<b>~</b>

サンプルコード <p>通常の文字</p> <p><b>太字</b></p>
※★sample
★①031サンプル

04<i>要素は、文字をイタリック体で表示する要素です。

<i>要素は、文字をイタリック体で表示する要素です。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<i>~</i>

サンプルコードHTML <p>通常の文字</p> <p><i>イタリック体</i></p>
※★sample
★①041サンプル

05<tt>要素は、等幅フォントで文字を表示する要素です。

<tt>要素は、等幅フォントで文字を表示する要素です。 <tt>要素を使用して、ブラウザで等幅フォントとして設定されているフォントで表示します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<tt>~</tt>

サンプルコードHTML <p>通常フォント</p> <p>abcd efgh ijkl</p> <p>等幅フォント</p> <p><tt>abcd efgh ijkl</tt></p>
※★sample
★①051サンプル

06<em>要素は、文字をイタリック体で強調して表示する要素です。

<em>要素は、文字をイタリック体で強調して表示する要素です。 さらに強調したい場合は、太字で表示する<strong>要素を使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<em>~</em>

サンプルコードHTML <p>通常の文字</p> <p><em>要素で強調</em></p>
※★sample
★①061サンプル

07<strong>要素は、文字を太字で強調して表示する要素です。

<strong>要素は、文字を太字で強調して表示する要素です。 弱い強調の場合は、イタリック体で表示する<em>要素を使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<strong>~</strong>

サンプルコードHTML <p>通常の文字</p> <p><strong>要素で強調</strong></p>
※★sample
★①071サンプル

08<h1>-<h6>要素は、見出しを表示する要素です。

<h1>-<h6>要素は、見出しを表示する要素です。 大きさの異なる見出しを表示します。<h1>要素が一番大きく表示され、<h6>要素が一番小さく表示されます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

ブロックレベル要素

※HTML

<h1>-<h6>

サンプルコードHTML <h1>見出しh1</h1> <h2>見出しh2</h2> <h3>見出しh3</h3> <h4>見出しh4</h4> <h5>見出しh5</h5> <h6>見出しh6</h6>
※★sample
★①081サンプル

09<p>要素は、段落を付ける要素です。

<p>要素は、段落を付ける要素です。 一般的なブラウザでは</p>要素で閉じた後に、1行分のスペースが入ります。 <p>要素は段落を区切る要素ですので、ただ単に改行したい場合は、<br>要素を使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

ブロックレベル要素

※HTML

<p>~</p>

サンプルコードHTML <p>段落</p> <p>改行されて余白ができます</p>
※★sample
★①091サンプル

10<br>要素は、改行をする要素です。(終了タグがない空要素です。)

<br>要素は、改行をする要素です。(終了タグがない空要素です。) HTML文書内の改行は、ブラウザ上では改行されず半角スペースで表示されます。 そのため、ブラウザ上で改行したい場合は、<br>要素を使用します。 XHTMLを宣言した場合の注意点

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<br>

サンプルコードHTML <p><br>要素は、? 文章を<br />改行します</p>
※★sample
★①101サンプル

11<address>要素は、サイトに関するお問い合わせ先や連絡先を示す要素です。

<address>要素は、サイトに関するお問い合わせ先や連絡先を示す要素です。 文字列はイタリック体で表示されます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

ブロックレベル要素

※HTML

<address>~</address>

サンプルコード HTML <address> CONTACT: <a href="mailto:tateda-yoshi0@nifty.com">tateda-yoshio@nifty.com</a> </address>
※★sample
★①111サンプル

12<del>要素は、文字に打ち消し線を表示し内容の削除を示す要素です。

<del>要素は、文字に打ち消し線を表示し内容の削除を示す要素です。 打ち消し線で削除された内容を示すことにより、何が削除されたのかを表すことができます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

※HTML

<del>~</del>

サンプルコード HTML <p>この本は、<del title="WEBデザインだけではなく">WEBデザイン</del> <ins title="コーディングを追加">WEBデザインとコーディング</ins>の専門書です。</p>
※★sample
★①121サンプル

13<ins>要素は、文字に下線を引いて追加された文字列。

<ins>要素は、文字に下線を引いて追加された文字列であることを示す要素です。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

※HTML

ins>~</ins>

サンプルコード HTML <p>予約は<del>受付中</del> <ins>締切り</ins>です。</p>
※★sample
★①131サンプル

14<abbr>要素は、略語(全般)であることを示す要素です。

<abbr>要素は、略語(全般)であることを示す要素です。 頭文字で作られた略語でなおかつ、ひとつの単語として発音されるもの(LAN等)を示す場合は、 <acronym>要素を使用します。title属性には、省略していない文字列を記述します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<abbr>~</abbr>

サンプルコード HTML <p><abbr title="Hyper Text Markup Language">HTML</abbr></p>
※★sample
★①141サンプル

15<acronym>要素は、頭文字で作られた略語

<acronym>要素は、頭文字で作られた略語でなおかつ、 ひとつの単語として発音されるもの(LAN等)を示す要素です。 略語(全般)を示す場合は、<abbr>タグを使用します。title属性には、省略していない文字列を記述します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<acronym>~</acronym>

サンプルコード HTML <p><acronym title="Local Area Network">LAN</acronym></p>
※★sample
★①151サンプル

16<dfn>要素は、定義用語であることを示す要素です。

<dfn>要素は、定義用語であることを示す要素です。 イタリック体で表示されます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<dfn>~</dfn>

サンプルコード HTML <p><dfn>定義</dfn></p>
※★sample
★①161サンプル

17<sup>要素は、上付文字を表示する要素です。

<sup>要素は、上付文字を表示する要素です。 表示される文字は、現在のフォントよりも小さいフォントで表示されます。また、下付文字を表示したい場合は、<sub>要素を使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<sup>~</sup>

サンプルコード HTML <p>100m<sup>2</sup></p>
※★sample
★①171サンプル

18<sub>要素は、下付文字を表示する要素です。

<sub>要素は、下付文字を表示する要素です。 表示される文字は、現在のフォントよりも小さいフォントで表示されます。 また、上付文字を表示したい場合は、<sup>要素を使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<sub>~</sub>

サンプルコード HTML <p>H<sub>2</sub>O</p>
※★sample
★①181サンプル

19<blockquote>要素は、引用文であることを示す要素です。

<blockquote>要素は、引用文であることを示す要素です。 左右がインデントされた状態で表示されます。<blockquote>要素は、長い文を(ブロックレベルで)引用する場合に使用します。 短い文を(インラインで)引用する場合には、<q>要素を使用し、参照先を示す場合は、<cite>要素を使用します。 また、cite属性で引用元のURLを示すことができます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

ブロックレベル要素

※HTML

<blockquote>~</blockquote>

サンプルコード HTML <blockquote> <p>国境の長いトンネルを抜けると雪国であった。<br />夜の底が白くなった。 <br />信号所に汽車が止まった。</p> </blockquote>
※★sample
★①191サンプル

20<q>要素は、引用文であることを示す要素です。

<q>要素は、引用文であることを示す要素です。 <q>要素は、短い文を(インラインで)引用する場合に使用します。 長い文を(ブロックレベルで)引用する場合には、<blockquoteq>要素を使用し、 参照先を示す場合は、<cite>要素を使用します。また、cite属性で引用元のURLを示すことができます。 <q>要素で指定した範囲の前後には、自動的に引用符が付けられます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<q>~</q>

サンプルコード HTML <p>【吾輩は猫である】は、<q>吾輩は猫である。名前はまだ無い。</q> という書き出しで始まります。</p>
※★sample
★①201サンプル

21<cite>要素は、引用元・参照先を示す要素です。

<cite>要素は、引用元・参照先を示す要素です。 文字列はイタリック体で表示します。長い文を(ブロックレベルで)引用する場合は、 <blockquote>要素を使用し、短い文を(インラインで)引用する場合には、<q>要素を使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<cite>~</cite>

サンプルコード HTML <p><cite>引用元を表示</cite></p>
※★sample
★①211サンプル

22<pre>要素は、プログラムに記述した通りの形で画面に表示する要素です。

<pre>要素は、プログラムに記述した通りの形で画面に表示する要素です。 HTML文書内のスペースや改行はブラウザ上には表示されません。しかし、<pre>要素を使用すると、 スペースや改行等が記述した通りの形でブラウザ上に表示されるため、ソースコードを表示させたい場合等に便利です。 また、ソースコードを表示させる場合には、ソースコードであることを示す<code>要素も使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

ブロックレベル要素

※HTML

<pre>~</pre>

サンプルコード HTML <pre><code> if (a<10){ count++; $sample = a; } </code></pre>
※★sample
★①221サンプル

23<code>要素は、プログラムのソースコードであることを示す要素です。

<code>要素は、プログラムのソースコードであることを示す要素です。 等幅フォントで表示されます。スペースや改行を記述したまま表示させたい場合は、<pre>要素も使用します。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<code>~</code>

サンプルコード HTML <pre><code> if (a<10){ count++; $sample = a; } </code></pre>
※★sample
★①231サンプル

24<var>要素は、変数や引数であることを示す要素です。

<var>要素は、変数や引数であることを示す要素です。 イタリック体で表示されます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<var>~</var>

サンプルコード HTML <p>変数<var>name</var>に名前が代入されます。</p>
※★sample
★①241サンプル

25<kbd>要素は、ユーザーから「入力される文字」であることを示す要素です。

<kbd>要素は、ユーザーから「入力される文字」であることを示す要素です。 等幅フォントで表示されます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<kbd>~</kbd>

サンプルコード HTML <p>テキスト入力欄に<kbd>guest</kbd>と入力してログインしてください。</p>
※★sample
★①251サンプル

26<samp>要素は、プログラムによる出力結果のサンプルであることを示す要素です。

<samp>要素は、プログラムによる出力結果のサンプルであることを示す要素です。 等幅フォントで表示されます。

strict dtd tranasitional dtd frameset dtd xhtml 1.1 xhtml basic

汎用属性:id、class、lang、title、style、dir、xml:lang

インライン要素

※HTML

<samp>~</samp>

サンプルコード HTML <p>パスワードの入力を間違えると、以下のメッセージが表示されます。<br /> <samp>Unauthorized</samp></p>
※★sample
★①261サンプル

27.XXXXXX

27.XXXXXX

※HTML


サンプルコード
※★sample
★①000サンプル