皆さん、ご無沙汰しております。TH69です。
やっと新しい生活にも慣れてきて、少し余裕が出てきました(笑)。
あまり間隔が開いてもいけないので、ここらで再開しようと思います。
では、第5回を始めましょう。
前回は文字と背景に色を付けたんですが、どうだったでしょうか?
『こんな事が簡単にできるなんて…』と驚かれた方も多いと思います。
ホームページなんて、それほど難しいものではない事を分かっていただけたでしょうか。
文字と背景に色がついて、グッとページらしくなったんですが、何か物足りないですよね。
そう…、文字の大きさがすべて同じで、しかも左の端のほうに表示されていますね。
今回は、文字の表示される位置を変えてみましょう。
では、いつものように[homepage]フォルダにある[index.html]ファイルを開いて、
そのソースを表示させて下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
私のホームページ
ようこそ!私のホームページへ
このページはただいま製作中です。
またのお越しをお待ちしております。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のようになっていますね。
この中で、自分で変更した文字や背景の色はそのままでもかまいません。
では、『ようこそ!私のホームページへ
』の前に『』、
後ろに『』と記入してみて下さい。
『ようこそ!私のホームページへ
』のようになりますね。
そして、いつものように上書き保存して更新して下さい。
さて、どうなったでしょうか?
『ようこそ!私のホームページへ』が中央に寄ってきていませんか?
中央に来ていればOKです。
もし来ていなければ、どこか間違っていますので、もう一度やってみて下さい。
次に『ようこそ!私のホームページへ
』の『』を削除して、
『このページはただいま製作中です。
』の後ろに『』を付けてみましょう。
(面倒臭かったら『ようこそ!私のホームページへ
』の『』を
[切り取り]して『このページはただいま製作中です。
』の後ろに貼り付けてもかまいません)
すると
『ようこそ!私のホームページへ
このページはただいま製作中です。
』になりますね。
そして上書き保存して更新してみましょう。
どうなりましたか?
『ようこそ!私のホームページへ』に続いて『このページはただいま製作中です。』も
中央に寄ってきていないでしょうか。
もうお分かりと思いますが、[○○○]は、
その間にある文字などを中央に表示させる記号なのです。
中央だから「センター(center)」と覚えると簡単ですね。
それでは最後にこのページ全体を中央に寄せてみましょう。
もし分かるなら自分で考えてやってみて下さいね。
どうですか? できましたか?
やり方は
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
私のホームページ
ようこそ!私のホームページへ
このページはただいま製作中です。
またのお越しをお待ちしております。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のように、
の次(下)にを、の前(上)にを記入すれば、
ページ全体を中央に寄せる事ができます。
では、中央に寄せた文字を左に寄せるにはどうしたらいいのでしょう?
やり方はいくつかあるのですが、一番簡単なのは
そこだけ[○○○]から外すというものです。
通常何も指定がないと、ブラウザは左詰めで文字を表示しようとします。
だから[○○○]から外してやると左に寄せる事ができるのです。
例えば
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
私のホームページ
ようこそ!私のホームページへ
このページはただいま製作中です。
またのお越しをお待ちしております。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
のように記入してやると、
『このページはただいま製作中です。』だけが左側に表示されます。
では、右側に文字を表示させたい時は、どうすればいいのでしょうか?
どうするのだろうと期待してくださった方には、申し訳ないのですが
今はお教え致しません。
多分、右側に文字を表示する事はあまりないと思いますし、
やり方がちょっとややこしいので、もう少し先にお教えしようと思います。
それからあと1つ、
[
]は[改行]とお教えしたんですが、別の使い方(というか応用)ができるんです。
試しに
『ようこそ!私のホームページへ
』の『
』の後ろに、もう1つ『
』を付けて、
『ようこそ!私のホームページへ
』のように記入してみてください。
どうなりましたか?
『ようこそ!私のホームページへ』と『このページはただいま製作中です。』の間に
1行分のスペースが空いたと思います。
このように『
』は、改行して、さらに行と行の間を空けるという使い方もできるんです。
あまりやらないですが
『
』
などとやると、その分だけのスペースが空きます(笑)
では『
』を使って、簡単なページのレイアウトをしてみましょう。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
私のホームページ
ようこそ!私のホームページへ
このページはただいま製作中です。
またのお越しをお待ちしております。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
こんな感じでどうでしょうか?
かなりページらしくなってきたと思いませんか?
では、次回は今まで敢えて説明を避けてきた『HTML』について
簡単にお話したいと思います。
それでは、また第6回でお会いしましょう。