2.本文を書いていく



ホームページ作りの基礎の基礎は前回やったので、次はレイアウトをします。
とりあえずは文章の書き方の続きです。

 2-1,<br>って?

<br>は文章を書いていく上で使用するタグです(すでに勉強しましたがもう一度おさらい)。
テキストエディタで編集していくときの改行は、改行したいところでEnterを押しますが、ホームページ上では改行して表示されません。
例えば↓
あいうえお、かきくけこ、さしすせそ、ここでエンターキーを押します→ 今書いている部分はメモ帳では一段下の行にありますが表示では改行されてません。
では、ホームページじょうでは、どうやって改行しているのでしょうか?
それの答えが<br>タグです。このタグを改行したい所に表記すると→<br>
このように好きなところで改行されます。(※初期設定でウィンドウの端まで行くと改行されます)
次は段落の形成についてですが、段落は使用しなくても問題ありません。使いたいときにだけ使用してください。

 2-2,<p>〜</p>は段落です

<p>〜</p>でまとめたところが一段落となり、その前後の行が一行空白になります。
では次は見出しにする文字の大きさを変えましょう。

 2-3,<h(1〜6のどれか)>って?

<hO>〜</hO>タグは見出しに使います。Oの中には1〜6の数字が入ります。1が一番大きな見出しで6が一番小さな見出しです
<h1>

この大きさ

</h1><h2>

これ

</h2><h3>

これ

</h3><h4>

これ

</h4><h5>
これ
</h5><h6>
これ
</h6>
です
次は一般的な文字の大きさの変え方を勉強します。見出しではなく、普通に文字を大きくしたいときに使いましょう。
なぜ見出しのときと表記するタグが違うのかというと、コンピューターには<h○>で指定したタグとの違いを判断できるからです。
それにより、ロボット型の検索エンジンなどで使用されているソフトに影響を与えることが出来ます。(検索エンジンに載る時に有利になったりする)

 2-4,<font>って?

<font>〜</font>タグを使ってフォントの大きさや色などを変えることが出来ます。
大きさを変えるには、<font size="1〜7で1が一番小さい">〜</font>と、するだけです。
<font size="1">あああ</font>        <font size="7">あああ</font>
という風になります。では、次は文字の色を変えてみましょう。文字の色の変え方もこの<font>〜</font>タグを使います


2-4-1,


色を変えるには<font color="色の番号や色の名前">〜</font>です。
色の番号はRGB(R=red、G=grean、B=blueの略=赤緑黄)でRが何番、Gが何番、Bが何番と指定します。この番号は普段使っている10進法(1〜9までが一桁)ではなく16進法(1〜9,A,B,C,D,E,Fが一桁)を使います。
16進法は1〜9、a〜fを使って一桁で15まで表します。10進法から16進法への計算はWindows付属の電卓を使うと簡単に出来ます。
実際に思い通りの色の番号を知るにはカラーパレットなどを開いてRGBともに256までの数字(10進法)を16進法にして二桁ずつ表し#000000(黒)と並べます。(この場合R=00,G=00,B=00) (色の番号の組合わせは、00,33,66,9,cc,ffで作ると良い)
2通りの書き方↓。右の場合は色の名前を知っていなければいけないのでオススメできない。
<font color="#ff0000">#を最初に書いて色番    </font><font color="red">redとかgreanとかblueとか</font>
文字の大きさの変更とあわせて使うと<font size="1" color="#0000ff">小さい青だよ、属性の間は半角スペース</font>こんな感じになります。
後は<i>斜体</i><b>太字</b><strike>抹消線</strike><u>下線</u> 混ぜ合わせなど他にも色々あります
こんなのとか
余談ですが、このような→<>特殊な文字をホームページ上に書くには、&lt;(<) &gt;(>)と実際には違う文字を書きます。他にも©は&copy;、™は&tradeと書く。

 2-5,左端からばっか書きたくない

普通に文章を書いていくと左端から順に書かれていきますが、ワープロソフトの中央揃えみたいにセンタリングされた状態で書くこともできます。
何種類かあるのですが、一番良く使われる書き方を紹介します。(divという要素のタグ)
<div>タグを使って指定する場合は、<div align="center">〜</div>とします。center以外にleftでもrightでもOK
また要素名をぬかして<center>〜</center>などでも出来ますがなるべく使用しない方がいいそうです。
<div align="center">あいうえお</div>
また改行をしたり、表に対しての使用も有効です。↓
<div align="center">
<font color="blue">a<br>
b<br>
c<br>
</div>

 2-6,Hyper linkを使う

Hyper linkとは、これです→TOP ・・クリックすると、どっかへ飛ぶリンクです
書き方は簡単で、<a href="ここにアドレス">〜</a>で書いたアドレスにとばせます。
ここで書くアドレスは普通のURL(絶対的)でもいいのですが、同じサイト(同じフォルダ)にあるならoooo.html、
1つ下のディレクトリにあるなら/一つ下のフォルダ名/oooo.html、
2つ下のディレクトリにあるなら/一つ下のフォルダ名/二つ下のフォルダ名/oooo.htmlと表すことが出来ます。
この表記の仕方だと、もし自分のホームページのアドレスが変わったときでも、相対的な表し方なのでリンクのアドレスを変更しないですみます。
相対と絶対とは?
相対ハイパーリンクは現在開いているページからのアドレスを示します。

例えば・・http://www.aiueo.ne.jp/indexというサイトに<a href="2.html>と書くと→http://www.aiueo.ne.jp/2.htmlとなります。

これが相対的な書き方です。こうしていれば、http://www.aiueo.ne.jp/indexというアドレスが他のアドレスに変わってしまっても2.htmlにアクセスできます。

もし、絶対ハイパーリンクだと、http://www.aiueo.ne.jp/indexから移動するときに、
<http://www.aiueo.ne.jp/2.html>と書きますが、http://www.aiueo.ne.jp/といるアドレスが変わってしまったらhttp://www.aiueo.ne.jp/2.html>にアクセスしてもなにもありません。

ですから、アドレスを書き換えるという作業をしなければいけなくなってしまいます。

以上の点から相対的に書いておいた方が後々楽になるのではないでしょうか?
上記の方法でリンク先を決めます。また、.gifなど(他には.jpeg.bmpなど)の拡張子の画像へリンクするとその画像が見られます。↓

<a href="break.gif">ここを押すと画像</a>

また、.zip(圧縮)などの拡張子へのリンクは、そのパスのところに置いてあるファイルをDLします。
Hyper linkは画像をリンクに使うことも出来ます。<a href="#top"><img src="break.gif"></a>→  
(<a href="#top">とはそのページのトップにとばすタグです)
以上が文章を書いていく上で必要な知識だと思います。他にも紹介しきれないことがありますが、実践していく上で学んでください。
次は画像の貼り方について勉強していきます。次を終わらせればある程度のホームページを作れるようになると思います。


GET HOMEPAGE 講座へ戻る      3.背景や画像の使い方へ

Copyright © 2004-2005 BREAKDOWN. All rights reserved.

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送