Lesson4: とにかく作ってみよう!


 それでは、これからひたすらホームページを作っていきます。
 それにあたり、まずは文字を表示するところからいきましょう!

 前回のレッスンで習った基本構造を書き写します。
 そして、<body>と</body>の間に以下の文章を書き写してみます。
 やりかたは、テキストエリアの中をドラッグで選択し、右クリック→コピーをして、HTMLの指定の箇所に右クリック→貼り付けをするだけです。
 (文章は青空文庫HPより 芥川龍之介/羅生門 の冒頭部分からお借りしました。)




↓ものぐさな方はこれをまるまるコピーして.htmlとして保存するとそのままHTMLが使えます。

 こんな感じです。
 ではそのままブラウザで表示してみましょう。前回言ったとおりのやりかたで。ファイル名はなんでもよいです。


 どうですか?改行のないただの文字の羅列になってしまったかと思います。
 それでは、打ち込んだ文字の改行ごとに下の文字を入れてみましょう。




 このBRタグは、単独で使うものです。前のページ(Lesson3)でやったタグは<>〜</>の中に記述しないと効果が発揮されないものでした。
 BRタグは文章を改行させるためだけにあるタグです(もちろん小文字でもよいです)。
 タグをつけると以下のようになります。




 とりあえず原文どおりに改行タグを入れてみましょう。
 そしてブラウザで表示してみます。



 こうなりました。まだ少し見づらいですが、見事に改行されました。
 長い文章を書くとき、この改行タグを入れないとこうなってしまいます。
 それから、一行が長すぎて画面端までいってしまうと自動で改行されてしまうので、そこも注意してください。


段落分けして文章を見やすくしてみよう


 テキストを表示する際、通常は左寄せ表示になります。
 これを中央、右に表示させたいときはどうすればいいのでしょうか?
 そんなときは、まずこのタグを使います。




 このPタグは、段落をあらわします。<p>〜<p>で囲まれた文章は段落として表示されます。
 まずは<p>〜</p>だけで適当に囲んでみましょう。




 場所は適当でいいのですが、私は改行ごとのかたまりで囲んでみました。
 ブラウザで表示してみましょう。




 文章がひとつのブロックになっています。
 それでは、文字の位置を変えてみましょう。
 最初の<p>タグを以下のタグに置き換えてみましょう。



 次の<p>タグにはこのタグを。



 その次にはこっちのタグを。



 終わったら保存して、ブラウザで表示してみます。




 少しわかりにくいですが、文字の位置が変わっています。
 これを使えば、文字だろうが画像だろうが表示位置はかえられます。
 ただし、</p>で閉じるのを忘れないように。


背景が寂しい…?


 そういえば、白い背景だとなんだか物足りなくありませんか?
 背景を変える方法はちゃんとあります。
 今回はシンプルに背景の色だけを変える方法です。

 前のページでやった<body>タグを見てください。
 そのタグのbodyの後ろに半角スペースを入れて、以下のタグを入れてみましょう。




 これを入れてからブラウザで表示してみると…




 これだけで背景色を変えることができます。
 ””で囲んだ文字列は、カラーコードといい、256色あるWin,Mac共通の色を表します。(ウェブセーフカラーといいます)
 カラーコード表を用意したので、参考までにどうぞ。


まとめ


 これにて基本的な文字のタグは終わりです。
 これ以外の装飾はLesson6:文字を装飾してみよう!でやりたいと思います。


→ Lesson5へ