ａ－ｂｓ

わかるＨＰ講座

あくまで、管理人自己流です。反論などはメールでお願いします。目標は"専業主婦でも簡単にわかるホームページ講座"です。何もわからないという方大歓迎です！

■本格的に作りましょう

前回で<title>～</title>の説明をしました。
<title>～</title>はＨＰ作成上なくてはならないものです。
もし、<body>～</body>内でどんなすごいことをかいても<title>～</title>がなかったり、つづりを間違ったりしてるとなにも表示されないのです。
なので、これから<body>～</body>内についてやりますが"表示されない"なんてことが起こったらまず<title>～</title>をあやしんで下さい。

■文字を実際に表示してみる■
いよいよ、画面に表示ですね！最初はちょっとした物を作って次から本格的にいきましょう。
手順
メモ帳を開く。(もう大丈夫ですよね？"忘れた！"ってかたはここを参照してください。
そして下の表をみてまた直接打って入力してください。
青いところは自分で変更ＯＫです。赤い説明は新しいものです。

メモ帳に書くこと	説明
<html> <head> <title>タイトル名</title> </head> <body> こんにちは、みなさん </body> </html>	ＨＰ内容の始まり画面には表示しない内容の始まり｝タイトル画面には表示しない内容の終わり実際に画面に表示する内容の始まり｝表示する文字実際に画面表示する内容の終わりＨＰ内容の終わり

さっき書いたのと違うところは"こんにちは、みなさん"ってのが増えただけですね。
文字の内容はもちろん変更可能です。ここで、少し不思議に思いませんか？
自分はＨＴＭＬを覚え始めてまだ３ヶ月です。なので疑問点などはかなり覚えてるつもりです。
自分が思った疑問点は"英語のタグばかりなのにそのまま日本語で書いて大丈夫か？"です。
だって、ずっと<body>だったり<title>などをやってきたのに、画面に文字を表示するのが<body>～</body>の間に表示したい文字を書き込むだけだからです。
でも、実際それだけでいいのです。つまり、文章だけを並べるＨＰを作りたいのならここで終了してかまいません。
しかし、それでは"文字の色変え"も"改行"もできません。それだといやでしょ？

では、実際保存して確認してみてください。
こちらと同じなら成功です。

■おまけの話■
さっき自分の疑問について話しましたが、みなさんはこんなことを思ったことはありませんか？
"htmlって表(上にあるやつ)に記されてるとおりに書かなくてはいけないのか？"
それは違います。自分は最初これでかなり悩みました。つまり、こういうことです。
html(ソース)を書くと

ソース１

ソース２

２つの違いは"ソースが改行されてるかされてないか"だけです。
これはどっちもおんなじ風に表示されます。
しかし、あとで手直しするならだんぜんソース１の方がわかりやすいですよね？
自分の場合はわかりやすいために改行してるだけなのです。
ほかの方はもっとわかりやすい方法で記入してる人もいます。個人のやりやすさでかえればいいわけです。
ここで、またしても余談ですがこんな疑問をもちませんか？(またかよ！とかいわない)
それは"じゃあ文字を改行したときはどうなるの？"です。
答えはこうなります。

ソース１

ソース２

<html>
<head>
<title>～</title>
</head>
<body>
女の子には、やさしくしなくちゃ。
</body>
</html>

<html>
<head>
<title>～</title>
</head>
<body>
女の子には、
やさしくしなくちゃ。
</body>
</html>

結果、どちらも同じ風に"改行されずに"表示されます。
では、改行するにはどうするのか？それは、タグ提供の文字講座にまとめておきます。

■背景を変える■
今まで書いたのは全部後ろが真っ白でした。それじゃあ味気ないですよね？
ここでは背景色を変えてみましょう。今回は少し難しくなりますよ。
それでは、メモ帳を開いて下の表を説明＆その下の文を読みながら記入してみてください。
青いところは自分で変更ＯＫです。赤い説明は新しいものです。

メモ帳に書くこと	説明
<html> <head> <title>タイトル名</title> </head> <body bgcolor="pink"> こんにちは、みなさん </body> </html>	ＨＰ内容の始まり画面には表示しない内容の始まり｝タイトル画面には表示しない内容の終わり実際に画面に表示する内容の始まり(背景色;ピンク) ｝表示する文字実際に画面表示する内容の終わりＨＰ内容の終わり

こんにちは、みなさんとかの文字は別に必要はないです。
ここでかわったのは<body>が<body bgcolor="pink">に変わったということです。
むしろ、<body>にbgcolor="pink"がくっついたと考えたほうがいいかもしれません。
なぜこいつは<body>内に直接入れなきゃいけないのか？
これは自分なりの解釈ですが<body>は画面全体を表示するので、画面全体の背景を変えるからそこにくっつけるのです。
bgcolor=""は背景色は="～"ですよ。という意味でpinkは色のピンクです！
つまり、背景色はピンクですよ。という意味ですね。ここで注意です。
色の名前は必ず半角英数で記入してください。赤なら"red"黒なら"black"です。
じゃあ、色を英語に直せない場合、名前は知らないけどあんな色が作りたい。そのときはどうするのか？
そんなときはコードで記入します。
ハァ？って感じですね。でも、すごく便利なので例をあげて説明します。

↑のような色を作りたい場合、bgcolor="#ff6347"と記入します。
ますますハァ？って感じになりますね。つまり、コードってのはbgcolor="#XXXXXX"(Xは1～9,a～f)のことをいうのです。
そのコード表をまとめておいたので、カラー表を参考にしてください。

では、実際保存して確認してみてください(やっと)。
こちらと同じなら成功です。

ここで失敗する間違いの例として、
１ <titel>～</titel>つづりミス
２ <title>～<title>/ がぬけてる
３ <body color="">colorの前にbgが必要
４ <bodybgcolor="">bodyとbgcolor=""の間を離す
この４つがあります。表示されない人は確認してみてください。

これで大体のことが理解できたと思います(できなかったらゴメンナサイ)
このあとはひらきましょうに行くのではなくタグ提供でタグをいろいろ使って練習してみてください。

なんとなくわかったら投票よろしくお願いします。

来るたびに投票してもらえるとよりうれしい…(ぉぃ

Gポイントポイ活　 Amazon Yahoo 楽天
無料ホームページ楽天モバイル[UNLIMITが今なら1円] 海外格安航空券海外旅行保険が無料！