HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード
HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)

HTMLタグボードトップ >> ゼロから始めるホームページ作成講座 >> 実際に作ってみよう >> 文字に変化を与える
お問い合わせはこちら サイトマップはこちら

実際に作ってみようメニュー
1.初期設定をする
2.ファイルの新規作成
3.背景を設定する
4.文字に変化を与える
5.表を作成する
6.画像を挿入する
7.リンクを指定する
8.ファイルを保存する

文字に変化を与える [タグ編]

[ ソフトで編集 ] [ 直接タグで編集 ]

文字を変化させるタグ

文字を変更させるタグは以下のようなタグがあります。これらを組み合わせて文字を変化させてみましょう。


使用タグ 意味合い 変化例 書き方の例
<b> 太字 太字 <b>太字</b>
<strong> 論理強調 論理強調 <strong>論理強調</strong>
<i> 斜体 斜体 <i>斜体</i>
<u> 下線 下線 <u>下線</u>
<font color=""> 文字色 赤色の文字 <font color="#ff0000">赤色の文字</font>
<font size=""> 文字サイズ 一つ小さい文字 <font size="-1">一つ小さい文字</font>
<font face=""> フォントの指定 Arial <font face="Arial">Arial</font>
※これらのタグは「HTMLタグ辞典」で紹介しています。

操作手順

デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。
起動したら、以下の文字を入力するか、コピーして貼付(コピー&ペースト)をする。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta
http-equiv="Content-Style-Type" content="text/css">
<title>文字に変化を与える</title>
</head>
<body>


<!--文字を変化させる例-->
文字を強調するなら<b>太字</b><strong>強調</strong>を使おう。<i>斜体</i><u>下線</u>はあまり使われないけどね。<font color="#00cc00">文字の色</font>を変えると<b><font color="#ff00ff">メリハリ</font></b>がついてイイかもしれない。ちょっと自信ないときは<font size="-2">小さくしても</font>いいかも。
<!--ここまで-->

</body>
</html>

記述説明

上で紹介したタグを単独で使用したり、または組み合わせて使います。特に文字の色を変化させたいときは<font>というタグに「color」という属性をつけ、「""」の中で色を指定することで変えられます。また、文字の大きさの変更は「size」という属性をつけます。「""」の中に「-2〜+2」のように5段階で標準からの相対的な大きさで指定するか「1〜5」という表記の仕方もOKです。これらの属性を組み合わせることも可能で、「<font color="#00cc00" size="4"></font>」とすることもできます。


サンプル

上記の例は実際には以下のように表示されます。


文字を強調するなら太字強調を使おう。斜体下線はあまり使われないけどね。文字の色を変えるとメリハリがついてイイかもしれない。ちょっと自信ないときは小さくしてもいいかも。

☆ココがポイント!

実際に表示される部分は「<body></body>」内に書かれた内容です。


画面のトップへ戻る

こんな時どうする?

文字を装飾するタグの書き方


HTMLタグ辞典
フォントタグ


こんな時どうする?

色の見本が欲しい


カラーチャート (紹介サイトへ)

Web Safeカラー 216色 - TAG <index>



<< 前のページ 1 2 3 4 5 6 7 8 次のページ >>

画面のトップへ戻る

ゼロから始めるホームページ作成講座のトップへ

必要なものを揃えよう
伝えたい情報を考えよう
仕組みを理解しよう
実際に作ってみよう
作ったファイルを公開しよう
製作にあたり注意すべきこと
練習問題にチャレンジ!

訪問者優位のWEBデザインTipsのトップへ

インターネットで小遣い稼ぎのトップへ

今すぐ使える!便利ツールのトップへ