HTMLでは、ただ文字を表示させるだけではなく、文字を太くしたり色をつけたりする事ができます。

文字を強調したい時にも使え、ホームページを華やかに出来る技術ですので、是非覚えておきましょう。

Advertisement

1.文字を太字で表示する

文章内で特定の文字を強調したい場合などは、太字を使う事ができます。
文字を太くする時には、<strong>か<b>を使います。

見た目の変化としては、strongタグもbタグも差異はなく同様の太字として見えますが、厳密な違いとしては、strongタグは重要なワードを強調する意味合いがあり、bタグは純粋に文字を太くする場合に使用します。

ホームページ上での見え方としては変化はないので、好みで使い分けても良いとは思いますが、違いがある事は覚えておいて下さい。

実際にstrongタグとbタグと使用すると下記のようになります。

ソースコード

<strong>strongタグ</strong>

<b>bタグ</b>

ブラウザ

strongタグ

bタグ

見え方自体は全く変わりませんね。

単純に文字を目立たせたいという目的で使用するならbタグで問題ないと思います。


太字以外にも文字を装飾するタグは多様にありますので、まとめておきます。

タグ ブラウザ表示
<b> 太字
<strong> 強調太字
<i> oblique(斜体)
<em> emphasis-oblique(強調斜体)

<u> 下線
<s> 削除線

※ブラウザによっては使用できない場合があります。

2.文字の色を変化させる

HTMLで文字の色を変化させるには、いくつかの方法があります。

基本的にはスタイルシートで指定するのが良いのですが、スタイルシートの扱いは少々複雑ですので、スタイルシートの項目で専門的に説明します。

このステップでは、<font>を使います。

fontタグで文字の色を変化させるには、coler属性を指定しますが、「属性」という言葉は、ここで初めて出てきました。
属性とは指定する事によって、タグに様々な意味を持たせる事ができるものであります。

例えば、文字に色をつける場合は、<font color="値">という書き方になります。
fontタグにcolor(文字色を変化させる)の属性を与え、値に色を指定する事で色が変化しするのです。

タグによって扱える属性が変わってきますので、詳しくはタグ辞典をご覧下さい。

上記にもある様に、文字の色を変化させるには、<font color="値">となりますが、「値」で色の指定を行います。
色の指定は「red」、「blue」、「green」の様な定められた"ネーム"として指定する方法と、「#FF0000」の様に色コードを指定する方法があります。
これはスタイルシートの項目でも解説しますが、詳しくは色コード表をご覧下さい。

下図でソースコードとブラウザに表示される文字を見比べてみましょう。

ソースコード

image15

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>色の指定</title>
</head>

<body>
<p><font color="red">赤色</font>です。</p>
<p><font color="blue">青色</font>です。</p>
<p><font color="green">緑色</font>です。</p>
</body>
<html>

ブラウザ

image16

fontタグに囲んだ部分だけ色が変わっているのがわかりますね。

ほかにも、fontタグでは様々な扱い方があります。
例えば特定の文字サイズを変える場合に<font size="値">で、値に1~7の数字を指定してサイズを変更させる方法もあります。

fontタグは、任意の文字を変化させるために使用するタグだと覚えておきましょう。

3.リストを作る

HTMLでは、文字を並べてリスト作る事も可能です。

リストの表示方法は大まかに2種類存在し、単純に列挙させるだけならば、<ul>と<li>を使い、番号つきのリストならば、<ol>と<li> を使います。

実際にソースコードとブラウザを比べると下図の様になります。

ソースコード

image21

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>リスト</title>
</head>
<body>
<b>リストです。</b>
 <ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
 </ul>
<b>番号付きリストです。</b>
 <ol>
  <li>番号リスト1</li>
  <li>番号リスト2</li>
  <li>番号リスト3</li>
 </ol>
</body>
<html>

ブラウザ

image23

赤枠内青枠内のソースコードが、ブラウザ上では、この様に表示されます。

ulタグでは自動的に「・」が付き、olタグでは自動で数値が振られますので、用途によって使い分けて下さい。

属性を指定することによって、リストの文頭に存在する「・」や数字を取ったり他の画像に差し替えたりする事もできます。

例えば、<ul style="list-style: none;">と記載すればulタグの「・」は表示されなくなります。(olタグの場合、<ol style="list-style: none;">)
これは、ulタグのスタイルにlist-style属性を指定して、値をnoneにしているという意味であります。(つまり、ulタグのリストスタイルを無効化するという意味)

さらに、縦並びのリストを横並びにする方法は、liタグを<li style="float: left;">と記載する事で可能です。
これも上記と同様に、liタグのスタイルにfloat属性を指定して、値をleftにしています。(これは、他の要素の左側に回り込めという記述)

此処で style="値" の様な記述法が出てきましたが、これは、style属性を使ってタグ内にスタイルシートを作っているのです。
スタイルシートとは、タグの属性をまとめて記述するための入れ子の様なものです。
ここから、タグ内にスタイルシートを指定する手法は多く出てきます。

このあたりも別項目の「スタイルシート」のページ内、3.タグに直接スタイルシートを書き込むで説明しますので、先に軽く読んでおくと理解しやすいかもしれません。

4.文字を動かす

HTMLでは、自動で文字を動かす事もできます

文字を動かすためには、<marquee>を使いますが、marqueeタグに属性を追加することにより、動きを変化させる事ができます。

ソースコードと実際の動きを比べてみましょう。

ソースコード

<marquee>通常</marquee>

<marquee direction="right">右</marquee>

<marquee behavior="alternate">折り返し</marquee>

ブラウザ

通常

折り返し

<marquee>は右から左、<marquee direction="right">は左から右、<marquee behavior="alternate">は折り返しで動いているはずです。
※ブラウザの種類によっては動いていないかもしれません。

ほかにも、属性と値を指定することで、様々な動きを指定する事ができます。

しかし、marqueeタグは、ブラウザによっては上手く動作しない事もありますので、多用は控えた方が無難かもしれません。

5.HTMLで特殊文字を使用する

HTMLでは、特定の文字を利用するときには、決められた記入方法に従わなければなりません。

例えば、タグに使われている<p>を文字としてブラウザに表示させたい場合、ソースコードに<p>と書きこむだけではHTMLが「<」と「>」をタグとして認識してしまうので、ブラウザには表示されま せん。

HTMLでは一部の特殊文字をソースコードではなく文字として認識させるために”エスケープ”(特殊文字を文字のまま表示させる記述)させなければなりません。

エスケープが必要な特殊文字を下記にまとめてみました。

ブラウザ表示 ソースコード表示
空白 &nbsp;
& &amp;
< &lt;
> &gt;
" &quot;

つまりは、<p>と表示したい場合は、&lt;p&gt;とソースコードに書き込まなければならないのです。

ほかにも、通常の書き込み方ではブラウザに表示されない特殊文字がありますので気をつけて下さい。

それでは、次のリンクの項目に進んで下さい。

Big-Sea All rights reserved.2010-2013
当サイト内の文章、画像など、すべての無断使用、転載を禁じます。