画像や文字の位置
貼付けた画像や文字は通常画面の左側から表示されます。でも中央でそろえたいとか右側から始めたい、と言うときに位置を指定する タグがいくつかあります。
中央にそろえる
画像や文字文字を中央にそろえて表示したい場合は<center>（センター）
タグを使います。使い方は簡単で中央にそろえたい画像や文字を<center>〜</center>
で囲めばいいだけです。
<center>
ココに書かれた文字を<br>
中央にそろえます。
</center>
ここは通常の位置です。
ココに書かれた文字を<br>
中央にそろえます。
</center>
ここは通常の位置です。
中央にそろえます。
『はじめましたて』
『おはようございます』
を中央にそろえて書いてみましょう。
『おはようございます』
を中央にそろえて書いてみましょう。
<center>
はじめまして<br>
おはようございます
</center>
はじめまして<br>
おはようございます
</center>
左にそろえる、右にそろえる
では次は左にそろえたり右にそろえたりするためのタグalign（アライン）を見ていきましょう。
<p align="left">左にそろえる</p>
<p align="right">右にそろえる</p>
<p align="right">右にそろえる</p>
左にそろえる
右にそろえる
左にそろえるalign="left"は通常と同じで文章に指定した時には効果がありませんが 画像に指定したときに効果が現れます。
<img src="http://lecture.oshiirecords.com/img/illust/koinu.jpg" >これは子犬の写真です。<br>名前は草といいます。
<hr>
<img src="http://lecture.oshiirecords.com/img/illust/koinu.jpg" align="left">これは子犬の写真です。<br>名前は草といいます。
<hr>
<img src="http://lecture.oshiirecords.com/img/illust/koinu.jpg" align="left">これは子犬の写真です。<br>名前は草といいます。
これは子犬の写真です。名前は草といいます。
これは子犬の写真です。名前は草といいます。
align="left"を指定するとテキストが画像の横に回り込みます。
写真の説明文などを書く場合はこちらの方がわかりやすです。
では画像の左側に文章を表示してみましょう。
画像のURLは http://lecture.oshiirecords.com/img/illust/koinu.jpg
文章は
『はじめまして
ぼくは草です。』
を改行をいれて書いてみて下さい。
画像のURLは http://lecture.oshiirecords.com/img/illust/koinu.jpg
文章は
『はじめまして
ぼくは草です。』
を改行をいれて書いてみて下さい。
<img src="http://lecture.oshiirecords.com/img/illust/koinu.jpg" align="right">
はじめまして<br>
ぼくは草です。
はじめまして<br>
ぼくは草です。
文章は画像の左側に回り込みましたか？ちょっと思った感じとは違ったはずです。
想像では↓↓↓こんな感じ
| はじめまして ぼくは草です。 |
|
上のレイアウトはこのように書いています。
<table>
<tr>
<td>はじめまして<br>ぼくは草です。</td>
<td><img src="http://lecture.oshiirecords.com/img/illust/koinu.jpg" align="right"></td>
</tr>
</table>
<tr>
<td>はじめまして<br>ぼくは草です。</td>
<td><img src="http://lecture.oshiirecords.com/img/illust/koinu.jpg" align="right"></td>
</tr>
</table>
画像や文章をホームページ上でレイアウトする場合は、いままで見てきたタグで適切なものを選んでレイアウトしていきましょう。
タグは他にもいろいろとありますが、この講座で使ったタグで十分ホームページを作る事が出来ます。
難しいタグを使うよりも、ホームページを見る人に対して見やすいホームページである事が大事です。
よりHTMLを理解するには自分のホームページを作ってみるのが一番だと思います。せっかく覚えたタグを忘れないためにもホームページを作ってみてはいかがでしょうか。