文字の入力（見出し、文字の強調など）： STEP3 【 HTMLファイルにHTMLタグを入力しよう】

ホームページ作成の基礎から、HTMLタグやスタイルシート、JavaScriptを使ったHP作成方法、アクセスアップの秘訣を紹介。

ホームページ入門

初めてのホームページ

作成に必要なもの

レンタルサーバ選び

HPを作ってみよう

拡張子の表示

フォルダ、ファイル作成

HTMLタグの入力

HTMLタグについて

基礎部分の入力

タイトルの入力

背景の設定方法

文章の入力

改行をする

平行線を引く

中央揃えの方法

画像を張る

サイト内リンク

他サイトへのリンク

FTPの使い方

完成までの流れ

気をつけたいこと

　文字の入力（見出し、文字の強調など）

ホームページに文字を入力してみよう！


	いよいよですね。次にホームページの中身の部分、つまり文字を入力してホームページ上に表示させてみましょう。と言ってもそんなに難しい事ではありません。ただホームページに表示させたい文字を書いていけば良いだけの話しなんですが、それだけでは単調でつまらないホームページですよね？文字に色々と変化をさせるということが大事になってきます。そこで実際に使うかどうかは後にして、色々と文字に関するタグを試してみましょう。

文字の入力

まずは基本となる文字の入力をしましょう。まずは下記をご覧ください。

<html>
<head>
<title>体験ホームページ</title>
</head>
<body bgcolor="#fffeee">
表示させたい文字をここに入力する。
</body>
</html>

上の赤い部分で書かれた場所に、表示させたい文字などを入力することでホームページ上に表示されることになります。「基礎部分の入力」でも説明しましたが、「<body> ～ </body>」内に入力した文字がホームページ上に表示されます。タグについては、そのタグの効果が反映されるということになります。

それではいよいよ文字の入力に移りましょう。

<html>
<head>
<title>体験ホームページ</title>
</head>
<body bgcolor="#fffeee">
体験ホームページ
</body>
</html>

上のように「<body> ～ </body>」内に「体験ホームページ」と入力してください。
入力が終わったら、「上書き保存」をしてWebブラウザの「更新ボタン」をクリックしてください。するとホームページ内に「体験ホームページ」と表示されたと思います。

上の絵のように表示されましたか？まずはこれを使って色々と文字の練習を行っていきたいと思います。（他の文字でも問題ありません）

見出しの設定

見出しとは、文章やホームページの内容を一目で把握できるように付ける題名やタイトルのことです。それでは「体験ホームページ」を見出しにしてみましょう。

<html>
<head>
<title>体験ホームページ</title>
</head>
<body bgcolor="#fffeee">
<h1>～<h6>体験ホームページ</h1>～</h6>
</body>
</html>

HTMLタグ【見出しの設定・使い分け】

上の赤い部分が見出しに設定するためのタグになります。少し気になったと思いますが、上のままを入力しても見出しとして設定されません。
見出しは６つに分かれており、「h1」が最上位の見出しとして認識され、数字が大きくなるにつれて下位の見出しになります。基本的に最上位の「h1」はページ内に一つ、つまりタイトルなどに設定し、以下順にページ内の重要な題名に使います。

それでは見出しを設定してみましょう。「h1～h6」で自分のお好みのタグを選んで入力してみてください。（「h1」が変化の度合いが大きいのでわかり易いと思います）
入力が終わったら「上書き保存」をし、Webブラウザを更新してみてください。

上の絵は「<h1>」で設定した時のですが、このように変化がしたら見出しの設定は完了です。全てのタグを試した方はわかると思いますが、「<h*>」をしようすることで見た目上は文字が大きく表示されます。そしてコンピュータは「h*」で見出しとして設定している部分を、重要な部分として認識します。

文字の強調（太字、より強い強調など）

次に文字の強調（強く訴えたい文字・文章）ですが、強調といっても様々な方法があります。そこで、主に使われている強調の方法を紹介させて頂きます。
主に使われる強調方法は２つあります。

<html> <head> <title>体験ホームページ</title> </head> <body bgcolor="#fffeee"> <b>体験ホームページ</b> </body> </html>	<html> <head> <title>体験ホームページ</title> </head> <body bgcolor="#fffeee"> <strong>体験ホームページ</strong> </body> </html>

上記の二つは見た目上はほとんど同じで、文字が太字として表示されます。
しかし、この二つはコンピュータが認識する際には違った捉え方をします。
「<b>」の方は、見た目も同じく通常の太字として扱われます。そして、もう一つの強調タグ「<strong>」の方は、<b>を使用した時より強い強調太字（コンピュータはこちらの方が強い強調）として認識されます。
見た目上はどちらも変わらないため、より強い強調である「<strong>」がよく使われていますが、ここで一つ注意があります。これを使い過ぎると、検索エンジンによっては強調部分が多すぎるため、好ましくないと判断される場合があります。
通常は「<b>」を使用し、より強く強調したい部分のみ「<strong>」を使用しましょう。

それでは入力に移りましょう。まずは、先ほど入力した「<h*>」タグ部分を消してください。そして、消した部分に上記のように入力してみてください。
（二つのタグを順番に試して違いがあるかを見てみると良いと思います）

上のように文字が太字になれば完了となります。どちらも見た目は変わりありませんよね？なるべく「<b>」の方のタグを使うようにしましょう。

文字の大きさを変更する

それでは次に、文字の大きさを変えて表示させてみましょう。

<html>
<head>
<title>体験ホームページ</title>
</head>
<body bgcolor="#fffeee">
<font size="*">体験ホームページ</font>
</body>
</html>

HTMLタグ【文字の大きさを変更する】

上の赤い部分が文字の変更を指定するためのタグになります。「*」の部分に変更させたい大きさを半角英数字で指定することで、文字の大きさが変わります。
（指定するための詳しい方法はタグ下にある「詳細へ」をごらんください）

上の絵はサイズを「6」で指定した場合ですが、このようになれば文字の大きさの変更は完了です。見た目上では「見出し」や「文字の強調」などと同じような表示もできるため、無理に他のタグを使わずに、この「<font size="*">」を利用する方が良いかもしれません。（じゃあ教えるなよ！というのは無しの方向で(焦)。）

文字の色を設定する

次に文字の色の変更をしてみましょう。色の指定については「背景の設定」と同じで、英単語で指定する方法と#（シャープ）を含めた16進数で指定する方法の二通りあります。

<html>
<head>
<title>体験ホームページ</title>
</head>
<body bgcolor="#fffeee">
<font color="色の指定">体験ホームページ</font>
</body>
</html>

HTMLタグ【文字の大きさを変更する】

上の赤い部分が色を指定するためのタグとなります。「色の指定」と書かれた部分に自分の好みの色を指定することで文字の色が変更されます。

上の絵は青（#0000ff）で指定した場合ですが、文字の色が上のように変更されれば文字の色の変更は完了です。（色々と色を変えて試してみてください）

文字の変更：応用編（太字 + 色の変更など）

それでは、文字の入力シリーズ(？)の最後となりましたが、最後に今まで覚えた方法の複合、つまりいくつかのタグを一緒に使用してみましょう。あまり難しく考える必要はなく、覚えた通りに使用すれば良いだけです。

<html>
<head>
<title>体験ホームページ</title>
</head>
<body bgcolor="#fffeee">
<font size="*" color="*"><b>体験ホームページ</b></font>
</body>
</html>

上の赤い部分のように、タグを連続して入力することで効果を複合して表示させることもできます。ただし、「<font>」タグのような属性を必要とする場合には、属性間に半角スペースを入れて区切って入力してください。区切って入力しないと、どちらの効果も得られない場合があるので注意が必要です。

上の絵は文字の大きさ、色、太字を複合して指定した時の例ですが、この他にも見出しとして設定した文字の色を変更したりすることもできます。
色々と組み合わせて練習してみてください。
これで「文字の入力」は終了です。次の「改行をする」に進みましょう。

ページの上へ

前のページ

トップページ

改行をする

Copyright (C) 2007 ホームページ作成講座 All Rights Reserved.