Shift_JISという文字コードを用いて変換したにも関わらず、別の文字コードで表示しようとすれば、当然正しく表示されないので注意が必要です。日本ではShift_JISが標準的なコードなので上のような設定で問題ないと思います。
■ページを飾り立てる
おまたせしました。いよいよページを飾り立てていきます。
●背景画像
HTMLの習得１で作成したindex.htmlを見て・・・
なんかシンプル過ぎますよね。まずは背景画像なんかを入れてみましょう。
 back01.png |
 back02.png |
とりあえず背景画像サンプルを２つ用意しました。
上の２つの画像のどちらか好きなほうを「右クリック → 名前を付けて画像を保存」を選び、保存する場所を以前作成した「myhomepageフォルダの中のimageフォルダ」を指定して保存をしてください。
※素材提供サイトさんを利用すればもっといろいろな素材が手に入ると思いますので、探してみてください。
そしたら、index.htmlをテキストエディタで開きます。「index.htmlファイルを右クリック → プログラムから開く → Notepad等のテキストエディタを選択する」
bodyタグに以下の属性を付け加えます。
|
<body> ↓ <body background ="image/back01"> |
赤い方の背景画像を選んだなら、画像ファイル名はback01となります。見て気がついたかもしれませんが、画像ファイルのパスは相対パスで指定しています。
表示するとこのようになります。
たったこれだけでだいぶ見栄えが良くなりましたね。
●背景色と文字の色
bodyタグの属性には、他にもいろいろあります。
bgcolor="#000000"
背景の色を指定します。デフォルト（初期設定）では白です。
上の場合は黒を指定しています。
text="#FFFFFF"
文字の色を指定します。デフォルトでは黒です。
上の場合は白を指定しています。
もし背景を黒に指定した場合、「文字も黒」では文字が見えなくなってしまいます。
なので背景として選んだ画像や色に応じて文字の色も、見やすいように変えていく必要があります。
背景色を黒、文字の色を白にした場合こうなります。
背景を白っぽくするか、黒っぽくするかはお好みでどうぞ。
さて、この#000000やら#FFFFFFはいったい何なんだと思っている人もいるでしょう。
これはカラーコードと言い、６つ並んだ１６進数で色を表現する方法です。
一目で色とカラーコードの対応がわかる「カラーコード表」などを参考にしてみてください。
参照：カラーコードの鉄人
※ホームページ作成ツールなどには、好きな色を選んでそれをカラーコードに変換する機能などがあります。
●段落と改行
HTMLのソースは、改行や、スペースは反映されないので
<html> <head> <title>タイトル</title> </head> <body> ようこそ</body> </html> |
段落の指定や改行をしたい場合は、それ用のタグを使う必要があります。
<p>～</p>：段落を示すタグ。</p>の後ろは一行改行されます。
<div align="○○">～</p>：align属性は配置の指定。
○○を「left」にすれば左寄せにできます。
同様に「right」で右寄せ。「center」で中央揃えが指定できます。
<br>：改行の指定ができます。
<font size="○○" color="○○">～</font>：
文字の色やサイズ、書体の設定ができます。
size：文字サイズ －６～＋６まで
color：カラーコードで文字色の指定
<b>～</b>：文字を太字にすることができます。文章の一部を強調したいときなどに便利です。
<u>～</u>：下線を入れることができます。太字と同じく文を強調できます。
<pre>～</pre>：改行、space、tabを反映するようになります。
改行をたくさん入れようがスペースを入れようが、表示結果は変わりませんが、preタグで囲まれた範囲ではそれが反映されるようになります。
<hr size="2" width="100" align="left">：区切り線。
sizeで太さ widthで長さ（％で指定可能画面に合わせて長さが変わります）
alignで位置が指定できます。leftなら左詰め、rightなら右詰め、centerなら中央揃えです。
cororで色を指定することも可能です。
では実際に上のタグを使ってみましょう。こんな↓感じになります。
<p>ようこそ</p>
<hr size="1" width="80%" align="left">
<div align="center">ようこそ</div>
<hr size="1" width="80%" align="left">
よう<br>こそ
<hr size="1" width="80%" align="left">
<font size="+2" color="#ff0000">ようこそ</font>
<hr size="1" width="80%" align="left">
<pre>
よ
う
こ
そ</pre>
|
|
■画像の貼り付け
今度は画像を貼り付けるタグです。
<img>というタグを使って、背景画像を設定するのと同じような感じでできます。
<img src="○○.jpg" height="○○" width="○○">
src：画像のファイルのパス
height：画像の縦幅
width：画像の横幅
※画像の縦幅・横幅は、「画像ファイルを右クリック → プロパティ」で見ることが出来ます。
■ハイパーリンクの挿入
いよいよWebページの真髄たる「ハイパーリンク」の登場です。
<a href="○○">～</a>
href：ジャンプ先のファイルパス
また、新しく窓を開いて表示したい場合はtarget属性で指定することができます。
<a href="～～" target="_blank" > </a>
href="http://www.yahoo.co.jp" と書けばYahooのページに飛びます。
href="next.html"のように書けば、自身のWebページ内の別のページに飛ぶことが出来ます。
<a>～</a>タグで囲まれた部分が文字なら、文字にハイパーリンクが貼られます。
<a href="http://www.yahoo.co.jp" target="_blank">Yahooに飛びます。</a>
↓
Yahooに飛びます。
囲まれた部分が画像なら、画像にハイパーリンクが貼られます。
<a href="http://www.yahoo.co.jp" target="_blank"><img src="homepage/image/link.PNG" width="125" height="50"></a>
↓
補足：
画像にリンクが張られていると、周りに枠が表示されてしまうので、border="0"という属性をimgタグに付け加えると消すことができます。
↓
■配置を揃える
これらのタグを駆使してWebページを作成していくと突き当たる問題。
それが「思うように配置がそろわないこと」です。
そこで、tableタグを使うと、思い通りに配置をそろえる事が出来ます
<table height="40%" width="40%" border="1" cellspacing="1">
<tr><td>１－１</td><td>１－２</td></tr>
<tr><td>２－１</td><td>２－２</td></tr>
</table>
↓
| １－１ | １－２ |
| ２－１ | ２－２ |
heightで高さ、widthで横幅を設定するのは今までどおり。
borderで外枠の太さ cellspacingで内枠の太さを設定できます。
borderやcellspacing属性を抜かせば、枠を無くすこともできます。
なんかゴチャゴチャしてますが、単純な構造をしています。
図で表しますとこんな感じです。
| <tr> <tr> |
|
</tr> </tr> |
<tr>が行を、<td>がセルを定義しています。
以上のことを踏まえて完成したページのサンプルはこんな感じです。
TOPページに戻る
Copyright (c) 2006 Akihisa Minagawa. All rights reserved.