ホームページ作成応援サイト

入門!ホームページNAVI

文章の設定

文章の位置を設定するタグとして最もよく使われるのは、text-alignとvertical-alignの二つです。text-alignは文章を左寄りに書くか、右寄りに書くか、または中央に書くか(インデント)が指定することができます。

p.a1 {
   text-align;left(左揃え);
   text-align;right(右揃え);
   text-align;center(中央);
   }

次にvertical-alignですが、これは縦位置を指定するタグになります。

p.a1 {
   vertical-align;top(上端揃え);
   vertical-align;middle(中央揃え);
   vertical-align;bottom(下端揃え);

   vertical-align;super(上付き文字);
   vertical-align;sub(下付き文字);
   }

vertical-alignというのは、何かひとつの基準に対して縦方向の位置を調節するタぐの事です(例:文字と画像(マーク)、文字とテーブルなど?)。なので、題(h2)とマークに対して指定すると効果が出ます。middleはベースラインの上0.5ex(ex=小文字xの高さの相対値、0.5=xの高さの半分)に中央線をそろえます。baselineはベースラインに底辺をあわせます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
<title>Wakabagari(若葉狩り)</title>
<link rel="stylesheet"type="text/css" href="stylee.css" media="all">
</head>
<body>
<img src="sho1.gif" alt="wakabagari" width="280" height="50">
|<a href="">HOME</a>|<a href="">PROGRAMING</a>|<a href="">TRAVEL</a>|<a href="">DISEASE</a>|<a href="">BBS</a>|
<h1>Wakabagari</h1>
<img src="fuukei1.jpg" alt="風景写真" width="500" height="180">
<h2><img src="point.gif" alt="" class="mark">意味</h2>
<p class="a1">
若葉狩りというのは紅葉狩りの若葉バージョンの事です。つまり、若葉を見に行くみたいなのです。ただ、本来の意味は別のところにあります。それは何かというと、みなさんは自動車につける若葉マークを知っていますか?あれって初心者がつけていますよね?
ここまでくればわかるでしょう。すべてにおいて初心者なので、HPにくること=若葉狩りにくることみたいになるでしょう?ここがこのサイト名の意味なのです。<br />
&lt;/p&gt;<br />
&lt;h2&gt;目的&lt;/h2&gt;<br />
&lt;p&gt;<br />
目的はというと、特にありませんが、あえていえば、紅葉マークをつけることでしょうね。自動車だってはじめは若葉マークだけど
1年後にマークははずれ、高齢者になると紅葉マークにななります。それと一緒ですね。
<p class="a2">
<address>Copyright(C)2008 Wakabagari all rights reserved.</address>
</body>
</html>

ここまでの状態ではマークは下揃えで表示されているため、cssファイルのほうでvertical-alignタグを使用して縦位置を調整します。

h2 img {
    vertical-align:middle;
    }

h2とimgの間にはクラスではないので”ドット”は入らず半角スペースで区切ってください。


Favorite

神田にある美容室
http://www.azest-az.com/

最終更新日:2017/1/27

コピーライト