1.見出し <hn> ~文字列~ </hn>
HTMLの指定
|
画面表示
|
<H1>見出しサンプル Head1</H1> <H2>見出しサンプル Head2</H2> <H3>見出しサンプル Head3</H3> <H4>見出しサンプル Head4</H4> <H5>見出しサンプル Head5</H5> <H6>見出しサンプル Head6</H6> <H2 style="text-align:left">見出し(Head2 left)</H2> <H3 style="text-align:center">見出し(Head3 center)</H3> <H4 style="text-align:rght">見出し(Head4 right)</H4> |
見出しサンプル Head1見出しサンプル Head2見出しサンプル Head3見出しサンプル Head4見出しサンプル Head5見出しサンプル Head6見出し(Head2 left)見出し(Head3 center)見出し(Head4 right) |
2.段落 <p> ~段落の文字列~ </p>
HTMLの指定
|
画面表示
|
<p> ここには、比較的長い文章を入れることができます。これが段落になります。段落のことを英語でParagraphといいます。HTMLではPタグを使用します。 </p> <p>ここは次の段落です。</p> |
ここには、比較的長い文章を入れることができます。これが段落になります。段落のことを英語でParagraphといいます。HTMLではPタグを使用します。 ここは次の段落です。
|
3.文字の大きさ
HTMLの指定
|
画面表示
|
<span style="font-size:200%">文字の大きさ(200%)</span> <span style="font-size:70%">文字の大きさ(70%)</span> <span style="font-size:100%">文字の大きさ(100%)</span> <span style="font-size:1.5em">文字の大きさ(1.5em)</span> <span style="font-size:40px">文字の大きさ(40px)</span> |
文字の大きさ(200%) 文字の大きさ(70%) 文字の大きさ(100%) 文字の大きさ(1.5em) 文字の大きさ(40px) |
%(パーセント) → 標準サイズに対する百分率 em(エム) → 1emはその時点における標準的な文字サイズ px(ピクセル) → 解像度の単位(ドット) |
4.文字の色
HTMLの指定
|
画面表示
|
<span style="color:red">文字の色を変えます</span> <span style="color:blue">文字の色を変えます</span> <span style="color:#f6f">文字の色を変えます</span> <span style="color:maroon ; font-size:150%">文字の色とサイズを変えます</span> |
文字の色を変えます
文字の色を変えます 文字の色を変えます 文字の色とサイズを変えます |
5.ページの背景
◇ページ全体に背景を付けたい場合は、bodyタグで以下のように指定する。 ・背景なし(無地) → <body> のみ ・背景(単色)の場合 → <body style="background-color:色名" > (例) <body style="background-color:lightyellow" > ・壁紙(画像)の場合 → <body style="background-image:url(画像ファイル名)" > (例) <body style="background-image:url(sakura.gif)" > ※HTMLファイルと同じフォルダに画像ファイルを保存しておくこと |
6.いろいろな文字飾り
HTMLの指定
|
画面表示
|
<b>文字飾り 太文字(Bold)</b> <i>文字飾り 斜体(Italic)</i> <u>文字飾り 下線(Underline)</u> <s>文字飾り 取り消し線(Strike through)</s> 文字飾り <sup>上付き文字(Super script)</sup> 文字飾り <sub>下付き文字(Sub script)</sub> |
文字飾り 太文字(Bold) 文字飾り 斜体(Italic) 文字飾り 下線(Underline) 文字飾り 取り消し線(Strike through) 文字飾り 上付き文字(Super script) 文字飾り 下付き文字(Sub script) |
7.水平線(horizon) <hr> ※size、noshade、width、align属性:HTML5では廃止
HTMLの指定
|
画面表示
|
<hr> <hr size="5"> <hr size="5" noshade> <hr width="50%" align="center"> |
(指定なし)
(SIZE=5の場合) (SIZE=5 影なしの場合 ) (長さ50%でセンタリングした場合) |
8.ブロック要素の生成 <div> ~文字列~ </div>
HTMLの指定
|
画面表示
|
<div id="mainContent"> div要素自体は、特定の意味を持ちませんが、コンテンツをグループ化してブロック要素を生成します。CSSと組み合わせてデザインを適用するときなどに利用します。 </div> |
div要素自体は、特定の意味を持ちませんが、コンテンツをグループ化してブロック要素を生成します。CSSと組み合わせてデザインを適用するときなどに利用します。 |
9.整形済みテキスト <pre> ~文字列~ </pre>
HTMLの指定
|
画面表示
|
<pre> 見たままを表示できます。 Z Z Z Z Z ZZZZZZZ </pre> |
見たままを表示できます。 Z Z Z Z Z ZZZZZZZ |