ホームページをみんなで作ろう

それでは今からHTMLを使ってホームページを作っていきますが、
その前に文字化け防止作業をやっておかないといけません。
どうしてそのような事を行うのか？　それは、PCのデータ読み込みに原因があります。
文字にはひらがな・漢字・カタカナ・数字・英字と様々です。
それらを表現する文字コードも色々あります。
また、現在では多言語での表現も必要になってきました。
そういった事に対応している文字コードの設定が必要になります。
そこで登場するのが『UTF-8』という文字コードです。
これは上記にある文字はもちろん、英語・ドイツ語・フランス語・中国語といった
様々な言語に対応しています。
そこでこの『UTF-8』をソース内に設定します。
HTMLのソース内のhead内に次のソースを書きます。
＜meta chsrset="utf-8"＞
これで文字化けの心配は解消です。

＜html＞
＜head＞
＜meta chsrset="utf-8"＞
＜title＞ホームページをみんなで作ろう＜/title＞
＜/head＞
＜body＞
＜h1＞ホームページをみんなで作ろう＜/h1＞
＜p＞HTMLとCSS＜/p＞
＜/body＞
＜/html＞

中見出しも付けてみよう。

＜html＞
＜head＞
＜meta chsrset="utf-8"＞
＜title＞ホームページをみんなで作ろう＜/title＞
＜/head＞
＜body＞
＜h1＞みんなでホームページを作ろう＜/h1＞
＜h2＞HTMLとCSS＜/h2＞
＜p＞HTMLとCSSはホームページを作成するための言語です。＜br　/＞
その言語のことを一般ではタグと呼びます。＜br /＞
HTMLのタグには開始タグと終了タグがあり、＜br /＞
そのタグの間に本文を挟み込む様に書いていきます。＜br /＞
＜/body＞
＜/html＞

• h1の大見出しの下にh2を使って中見出しを作ることで、文章の見え方が変わります。
• その下に本文がｐを使用して書かれる事で、さらにメリハリができます。
• 長い文章に改行をする際には、改行したい部分に＜br /＞を置く事で改行されます。
• 上記の様に書き終えたら、ブラウザで確認してみましょう。

文字に色を付けてみよう

＜html＞
＜head＞
＜meta chsrset="utf-8"＞
＜title＞ホームページをみんなで作ろう＜/title＞
＜/head＞
＜body＞
＜h1＞＜font color="red"＞ホームページをみんなで作ろう＜/font＞＜/h1＞
＜h2＞＜font color="bule"＞HTMLとCSS＜/font＞＜/h2＞
＜p＞＜b＞HTMLとCSSはホームページを作成する為の言語です。＜/b＞＜br /＞
＜ul＞＜li＞その言語のことを一般ではタグといいます。＜/li＞
＜li＞HTMLのタグには、開始タグと終了タグがあり、＜br /＞
そのタグの間に本文を挟み込む様に書いていきます。＜/li＞＜/ul＞＜/p＞
＜/body＞
＜/html＞

• 文字の色を変えるには、変えたい文字を＜font color="変えたい色"＞＜/font＞のタグで囲みます。

• 文字を強調（太字など）したい時は＜b＞＜/b＞のタグを使用します。
  （他にも＜strong＞＜/strong＞もあります。また、斜め文字で＜em＞＜/em＞タグもあります）
• 文章を箇条書きにしたい時は、＜ul＞＜/ul＞のタグで箇条書きしたい文章全体を挟み込みます。
  各項目の文章を＜li＞＜/li＞のタグで挟み込みます。
• 漢字を書いたときに振り仮名を打つ＜ruby＞＜/ruby＞タグがあります。
  ＜ruby＞振＜rp＞(＜/rp＞＜tr＞ふ＜/tr＞＜rp＞)＜/rp＞＜/ruby＞り
  ＜ruby＞仮＜rp＞(＜/rp＞＜tr＞か＜/tr＞＜rp＞)＜/rp＞名＜rp＞(＜/rp＞＜tr＞な＜/tr＞＜rp＞)＜/rp＞＜/ruby＞
  ＜ruby＞＜/ruby＞の中に＜tr＞＜/tr＞がはいり、そこに振り仮名がはいります。
  (ただし、このタグに対応していないブラウザがあるので、trの両サイドに＜rp＞括弧＜/rp＞をいれます)
  振(ふ)り仮(か)名(な)

この他にもたくさんのタグがあります。
それらは後々説明していきます。

装飾タグの紹介

文字を装飾する方法の中に、線を使うことがよくあります。
そのいくつかのタグを紹介します。

• 文字を強調する一つに下線があります。

HTMLでは、＜u＞＜/u＞の中に下線を引きたい文章を挟みこみます。

他にはリンク先の文にも下線が引かれます。

また、もう一つ下線が引かれるものがありますが、
これはスタイル的なものよりもそのタグの使用される内容重視で使います。
内容というものは挿入された文字を表すというものです。
そのタグは＜ins＞文章＜/ins＞というものです。

• 文章を間違えたときに使う取り消し線があります。

取り消し線には二通りのタグがあります。
一つは、＜ｓ＞＜/s＞の間に間違えている文章がある場合と、
もう一つは、＜strike＞＜/strike＞の間に間違えている文章がある場合です。

取り消し線の中にも、上記の下線の一番下で説明したような要素を含むものがあります。
それは削除された文字を表すというもので、やはりスタイルよりも
内容を重視して使用します。
それは＜del＞文章＜/del＞というタグです。

• 文章を強調するために、文字の後ろに色帯がはいります。

これは、ノートなどに書いた文字にマーカーで線を引くような感覚の色帯です。
書き方は＜mark＞文章＜/mark＞というタグで書きます。

HTMLではホームページの構成を成すものなので、
他の下線を使用する場合はCSSを使用したほうが
バリエーションも豊富です。

文章を書く上では、途中で文字を変えることはないでしょう。
しかし、強調したい文字や小見出しをつける場合には文字の種類を変えて
相手に伝わりやすいような配慮も考えられます。

• ページ上の文字はメイリオで、英字をMSゴシックに変えてみましょう。

文字の種類を変えるには、font faceを使用します。

上記にある文章でMSゴシックに文字種が変わっているのがおわかりでしょうか
他にも明朝やヒラギノなどにも変えることが可能です。

同じページの中で目次を表示しますが、その目次のテーマの書いているところに瞬時に移動するタグです。
その際に使用するのはリンクとほぼ同じで、目指す場所に印のタグを付けます。

• 下記のボックス内の文字をクリックすると、そのことが書いてあるところに瞬時に移動（ジャンプ）します。

例えば、目次内のｈ２のテーマにジャンプする際は＜a href="#しるし名"＞ｈ２テーマ＜/a＞と書いて、
そのテーマのあるところには＜a name="しるし名"＞（もしくは＜a id="しるし名"＞）ｈ２テーマと、
印を付けるように書いておきます。

装飾には、文章に直接するものもあれば、文章を線で囲んだり表を作ることもあります。

• 文章を実線のBOXで囲んでみましょう。

BOXをつくるにはborderやsolidといったタグを使用します。

• さらにBOXの線種を変えることができます。

上記にあるBOXは、枠の中に文字を入れるだけですが、表を作るとなると勝手が違います。
BOXを揃えて並べたり積んだりして使用します。

• 表を作る要素はtable（テーブル）といいます。

HTMLではtableタグとtrタグとtdタグがあり、それらを使って四角のセルで文字を囲みます。

文章の説明などに画像を張るのもいいです。

• ここでは背景に画像を張るのではなく、下部のBOX内にあるように
  文章の横などに画像を貼り付ける方法です。

画像を張るときや画像の背景などはimg要素を使用します。

画像を載せる。
＜img src="画像のURL/画像のファイル名"ait="画像の名前"＞
画像に枠をはめる。
＜img src="画像ファイル.jpg" border="数字"＞
画像の拡大縮小。
＜img src="画像ファイル.jpg" width="80" height="80"＞　縮小
＜img src="画像ファイル.jpg" width="550" height="100"＞　拡大
右にある画像は枠をはめています。

ページに背景をつけることで、明るい内容になったり文字が見やすくなります。

• ページ内の背景にはbody要素内にbackground要素を使用します。

背景には画像を張る方法と色付けの方法があります。

小さな画像を画面いっぱいに並べる背景。
＜body background=“画像の名前.jpg（またはURL）”＞文章＜/body＞









背景を色で表示したいとき。
＜body bgcolor=“#33ffff”＞文章＜/body＞

文章の強調で、文字の後ろに色の帯を付けるときもあります。

• h1やh2に色の帯を付けるときは、 h1やh２の要素を使用します。
• 単語にカラー背景を付けるときは、span要素を使用します。

段落の文字全体にカラーの帯を置く。
＜h2 style=“background-color:#ffff33”＞HTMLとは＜/h2＞
文字（単語）にカラーの帯を置く。
＜span style=“background=color:#ff0000”＞骨格＜/span＞

背景は、CSSを使う事で更に幅が広がります。

page top