ホームページの作り方の基本・HTMLのタグを覚えようpart2

- HTMLのタグを覚えよう♪ -

2day-１時間目〜▽･ｪ･▽ﾉ""ｺﾝﾊﾞﾝﾜﾝ♪

引き続き・・・・タグです(ーー;)

■画像を表示させるには

<p>
<img src="photo.jpg" alt="ジャンの写真">
</p>

画像には、写真などのほか、ロゴ（一番上にあるもの）や背景など、たくさんありますが、ホームページで取り扱うのは、拡張子がjpg と gif だけにしましょう。bmpや pngは表示されないこともあります。特にbmp は使用不可です。

imgなどのインライン要素と呼ばれるものは必ずブロックレベル要素の中に入れる決まりがあります。そこでp タグなどで囲む決まりになっています。
（インライン要素とブロックレベル要素については下のコーヒーブレイクを参照ください） また、img と src の間は必ず半角スペースを入れてください。alt の前にも入れておきましょう。

<img src="****"　ダブルクォーテーションで囲まれたところに、写真や画像のファイル名（正確にはパス）を入れます。ここも必ず小文字で。デジカメなんかで撮った写真はファイル名や拡張子が大文字になってる場合がありますので注意が必要です。必ず小文字に直しましょう。

alt はマウスのカーソルが画像に触れたときに表示される文字で、日本語も使えます。画像の名前などを入れます。入れなくても問題ないですが、これもseo 的に重要だったりします。また、目の不自由な方が使う音声ブラウザへの対応と言う意味でも必要です。入れない場合もalt="" としておきましょう。

また、align="left か right" というのを書き加えると、画像の左右に文字を回り込ませることもできます。 下のような感じ。

これだけだと文字と画像が近すぎるので、vspaceと hspaceを使って横と縦のマージン（間隔）を指定します。

<img src="photo.jpg" alt="ジャン" vspace="15" hspace="15">

すると、上下左右に15px ずつ余白ができます。

これで文字が見やすくなりました。ただ、align を使った場合、文字の回り込みを解除してやらなければ、どこまでも回り込んでしまうので、 終了を知らせるために、<br clear="all">　を回り込みを解除したい場所に記述します。

上の写真のhtmlソースを見るとこうなります。

<p>
<img src="jan11.jpg" alt="ジャン" align="left" vspace="15" hspace="15">
</p>
<h2>■プロフィール</h2>

<p> ジャンは今年３歳になるオスでノルウェージャンとチンチラの子供です。今だにやんちゃなところがあるけど、とってもかわいいやつです(￣∀￣*)ｲﾋｯ
</p>

<br clear="all">
<h2>■このサイトの概要</h2>

ややこしいかもしれないけど、そんなに難しくはないので、覚えてしまいましょう。画像とかはたくさん使うと思いますからね＾＾；
必ずしも文章を回り込ませる必要はないけど、ページのスクロール数が少なくて済むなどのメリットがあります。ただ、大きい画像を使う場合は、回り込みを指定しても、文字が見にくくなってしまいますので、注意してください。

ちなみに、画像を表示させるには、このhtml での指定に加えて、画像ファイル自体をhtml ファイルと同じフォルダに入れてくださいね。じゃないと、当然表示されません・・・
（※パスの概念を知ってる方は、たとえばimgというフォルダを作ってそこに画像をまとめたほうが整理されていいでしょう）

それと、重要なのが、写真、特にデジカメで撮ったものはサイズが非常に大きいです。そのまま貼り付けてもうまく表示されないばかりか、表示にものすごく時間がかかってしまいます。なので、サイズを縮小する必要があります。画像の扱いについてはこちらのページを参考にしてください。

■文字や画像のセンタリング（行揃え）

<center>
<h1>・・・・・・</h1>
</center>

center タグで囲んだ部分がセンター（まんなか）に配置されます。

本来は <div align="center">・・・・・・・・・・</div>
とするのが正しいのですが、省略して center タグだけでも問題ありません。
これも本当はスタイルシートでするのが推奨されています。

また、p タグや h1 タグに対しても指定できます。
たとえば、<h1 align="center"> のように書きます。すると、文字が中央に寄ります。値をleft やright にもできますが、設定なし（デフォルト）の状態では left （左揃え)になります。基本的に文字は左揃えが一番読みやすいと言われてます。

■文字を強調するには

<em> このように太字の斜体で表示されます </em> ただ、斜体は見にくいだけのような・・・＾＾；

<strong> さらに強い強調です </strong>

使い方としては

<p>なんとジャンに<strong>彼女が！</strong>できたそうです</p>

こうすると・・・

なんとジャンに彼女が！できたそうです　　　　　　　　＜注＞これはフィクションです＾＾；

ようは、強調したい文字を上のどちらかのタグで囲んでやればいいだけです。このタグ一見地味ですが、検索エンジンなどのSEO（豆知識参照）的には結構重要なタグです（最初は気にしなくてOKです）。一つのページには使いすぎない方がいいみたいです。むしろ一つがいいみたい。

■リストを作るには

リストを作ります。
ul タグを使います。その中のli タグがリストになります。ulをolにすると、1から順番に番号が振られます。リンクを設定すればメニューになります。

<ul>
<li>お湯を入れます</li>
<li>３分待ちます</li>
<li>できあがり〜！</li>
</ul>

ブラウザで見ると

となります

とりあえず、これだけ覚えれば、十分です。時間がないので、どんどんいきますね。

てか、この時点で2時間オーバーしていたらごめんなさい・・・ﾌﾟﾝﾌﾟﾝ(￣^￣ﾒ)＼(_ _ ;)ﾊﾝｾｲ…

でも、へんなところで切りたくないんです・・・・（汗）

先ほどコピーしたhtmlソースを見てください。 今までの説明でなんとなくわかってきましたよね？？＾＾；

ちなみに、一番上のほうにある、<img src="logo1.jpg"〜というのがあります。これは、ここに logo1.jpg の画像ファイルを表示させなさいという命令になるのですが、まだ、そのファイルがないため表示されません。なので表示させるには、その画像ファイルをindex.html ファイルと同じフォルダに入れる必要があります。以下で説明します。

■画像を保存するには

画像の保存方法です。この下にある画像を右クリックして「名前をつけて画像を保存」を選択します。名前は変えないでそのままでOKです（logo1.jpg となっているはずです）。そして、index.htmlファイルと同じフォルダに保存してください。