HTMLタグでホームページ作成(SEO対策) そのF 文章、画像を左揃え、中央揃え、右揃えしてみよう。

文章、画像を右揃え、中央揃え、左揃えにして、
ホームページを見やすくしよう。

画像を挿入して、面白いホームページになった。

今度は文章を左揃え、中央揃え、左揃えにしてを見やすくしてみる。

sample8.html

<HTML>
<HEAD>
<TITLE>
ホームページの作成方法
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">社長になりたい日記</H1>
<H2 ALIGN="CENTER">社長を目指すため汗みず働く平社員の物語</H2>
<P ALIGN="RIGHT">;更新日 2009.3.15</P>
<HR>
<P>3月10日</P>
<P>
今日は会社であった。最近、<BIG><BIG>定時上がり</BIG></BIG>ではあるが、仕事が詰まっており、苦しんでいる
。<BR>
しかし、家に持ち帰って<S>サービス残業する気はない。</S><BR>
会社は会社。自宅は自宅。<BR><BR>
<SMALL>建前はそうなんだけどね。。</SMALL>
</P>
<HR>
<P>
3月11日
</P>
<P>
今日も会社。<STRONG>早く週末にならないかな。</STRONG><BR>
今週はどこいこうかな。<BR>
残念ながら、<B>家計</B>が<I>財政難</I>で<U>遠出</U>は無理だけど、考えてみるか。<BR>
</P>
<HR>
<P>
3月13日
</P>
<P>
今日は金曜日。定時の日だ。といっても、最近は残業禁止だ。<BR>
<DIV ALIGN="LEFT">
<IMG SRC="yuuhi.jpg" ALT="夕日" WIDTH="320" HEIGHT="240" BORDER="1"><BR>
</DIV>
何気に携帯で撮ってみた。<BR>
夜遅くの残業もなくなってしまったなぁ〜。<BR>
</P>
</BODY>
</HTML>

左揃え、中央揃え、右揃えは、見出し、段落毎に設定できる。

<H1 ALIGN="CENTER">〜<H1>のALIGN="CENTER"で中央揃えができる。
<P ALIGN="RIGHT">〜<P>のALIGN="RIGHT"で右揃え。
<DIV ALIGN="LEFT">〜<DIV>のALIGN="LEFT"で左揃え。

何も指定しない場合は左揃えとなっている。

段落毎の設定であるが、途中画像のみを中央揃え、右揃えにしたい場合は<DIV>を使用する。

<DIV ALIGN="LEFT">
<IMG SRC="yuuhi.jpg" ALT="夕日" WIDTH="320" HEIGHT="240" BORDER="1">
</DIV>

<P>を使用すると、上下に1行空白ができてしまうが、<DIV>なら空白ができない。


サンプルソースをダウンロードできます。

以上で文章、画像の右揃え、中央揃え、左揃え完了。

文章に表を挿入をしてみよう。


実践!ホームページ作成TOP