作ってみよう

 Step.6 フォントの位置設定 

   
 先程保存したindx.htmlをnotepadで開いたら<body></body>の上に以下のような文を入力します。
   
<html>
<head>
<title> My Web Sight </title>
</head>
ここから 

<h1 align="left">見出し:左揃え</h1>
<h3 align="center">見出し:センタリング</h3>
<h5 align="right">見出し:右揃え</h5>
ここまで ↑
<body>
</body>

</html>
 
 タグの説明

 <h1〜6 align="○○"></h1〜6>
 <h>
タグにalign属性を指定すると見出しの位置を設定
    出来ます。
       ○○には left center right の何れかを指定

 <h>タグ(見出し)にはまでを設定します。
     1はフォントサイズが一番大きく数字が大きくなるに
    つれてフォントは小さくなります。
    フォントサイズ=1>2>3>4>5>6
   
 入力出来たら保存してindex.htmlを開いてみましょう。以下のように出来ていると思います。
   

見出し:左揃え

見出し:中央揃え

見出し:右揃え

   
 段落の位置指定 段落の位置を中央に指定できます。
   
 先程保存したindx.htmlをnotepadで開いたら<body></body>の間に以下のような文を入力します。
   
<html>
<head>
<title> My Web Sight </title>
</head>
<body>
ここから ↓
<p align="left">段落の左揃え</p>
<p align="center">段落の中央揃え</p>
<p align="right">段落の右揃え</p>
<div align="left">このタグは<br>
指定した範囲をひとまとめにして<br>
位置の指定が出来ます。</div><br>
<div align="center">このタグは<br>
指定した範囲をひとまとめにして<br>
位置の指定が出来ます。</div><br>
<div align="right">このタグは<br>
指定した範囲をひとまとめにして<br>
位置の指定が出来ます。</div>
ここまで ↑
</body>

</html>
 
 タグの説明

 <p align="○○"></p>
 <p>タグに(段落)align属性を指定すると段落の位置を
 中央右揃えに指定できます。
 ○○にはleftsenterrightの何れかを入れます。


 <div align="○○"></div>
 <div>タグで囲むと、囲まれた範囲がひとまとりと
 されます。
 これにalign属性を記述すると、中のコンテンツの位置を
 指定できます。
 ○○にはleftsenterrightの何れかを入れます。





 
   
 入力出来たら保存してindex.htmlを開いてみましょう。以下のように出来ていると思います。
   

段落の左揃え

段落の中央揃え

段落の右揃え

このタグは
指定した範囲をひとまとめにして
位置の指定が出来ます。

このタグは
指定した範囲をひとまとめにして
位置の指定が出来ます。

このタグは
指定した範囲をひとまとめにして
位置の指定が出来ます。

   

これにてフォント偏終了です。

Home  Step.7