「ホームページ作成」メニューへ戻る 「タグの使用法と使用例」メニューへ戻る



　配置関係のタグ

ホームページ作成の部屋−タグの使用法と使用例
　オブジェクトの表示位置を決めたり，区切り線を入れたりする要素（タグ）を集めました。
1．<center>センタリングする
2．<div>配置（左寄せ／右寄せ）する
3．<hr>横罫線を引く
4．<p>段落を設ける

記：2002-8-18


　1． センタリングする

　<center>⇔</center>　　　廃止予定　　　ブロック要素
このページのトップへ
　オブジェクトを画面の左右中央に表示させるための要素です。
　（画面の左右中央に表示させることはセンタリングといいます。）

　<center>の代わりに，スタイルシートで，
インライン要素については text-align:center を，
ブロック要素については margin:auto を使用することが推奨されています。



　2． 配置の要素

　<div>⇔</div>　　ブロック要素
このページのトップへ
　オブジェクトや他の要素を配置するための要素です。
　主にスタイルシートで汎用ブロック要素として使用します。

　　（汎用インライン要素は <span> です）


　右寄せ／左寄せする

　<div align="☆">⇔</div>　　　廃止予定　
　☆にピクセル数を入れて指定します。

　オブジェクトを画面の左に寄せたり，右に寄せたりするために使用します。
　 　
☆＝left ： 左寄せする（デフォルト）
☆＝center ： センタリングする （ <center>⇔</center>と同じ ）
☆＝right ： 右寄せする

　<div align>の代わりに，スタイルシートで，
　インライン要素については text-align:left や text-align:rightを，
　ブロック要素については margin-left:0px や margin-right:0px を使用することが推奨されています。



　<center>と<div align>の使用例

<center>
中央に表示
  <div align="left">
左寄せ
  </div>
  <div align="right">
右寄せ
  </div>
再び中央に表示
</center>

↓スタイルシートを使用した例 
<head>

  <style type="text/css">

  <!--
    .ctr {text-align:center}
    .lft {text-align:left}
    .rgt {text-align:right}
       /* クラス名 ctr，lft，rgt には適当な名前を付ける */
    -->
  </style>
  <title>
    タグ辞典
  </title>
</head>
<body>
<div class="ctr">
中央に表示
  <div class="lft">
左寄せ
  </div>
  <div class="rgt">
右寄せ
  </div>
再び中央に表示
</div>
</body>



　3． 横罫線を引く
　<hr>　　ブロック要素
このページのトップへ
　横罫線（Horizontal Rules）を引くための要素です。

　属性を指定しない場合は，幅 2 ピクセル程度で影が付いたような線が，親要素が確保している幅いっぱいに表示されます。
　デフォルトで左右の中央に表示されます。

　罫線の太さや長さ，位置などを指定する属性は廃止の予定になっています。それらの指定が必要なときは，スタイルシートやテーブル <table> を使って表示することができます。

　線の太さを指定する

　<hr size="☆">　　　廃止予定　
　☆にピクセル数を入れて指定します。

　線の長さを指定する

　<hr width="☆">　　　廃止予定　
　☆にはピクセル数，または%を付けて割合で指定します。

　線の位置を指定する

　<hr align="☆">　　　廃止予定　
　 　
☆＝left ： 左寄せする
☆＝center ： センタリングする （ デフォルト ）
☆＝right ： 右寄せする

　影を付けない線で表示する

　<hr noshade>　　　廃止予定　
　太さ2ピクセルほどの灰色の線で表示します。

　Operaというブラウザでは noshade 属性を指定しても無視されます。
　<hr>の使用例

<hr>

<hr size="6" align="left" width="50%">

<hr noshade width="450">

<hr noshade width="450" size="1">

<hr noshade width="450" size="20">



↓スタイルシートを使用した例
<head>
  <style type="text/css">
    <!--
    #hr1 {width:80%; height:5px}  /* 幅80%，高さ5ピクセル */

    /* ↓幅50%，高さ2ピクセル，緑色，左寄せ */
    #hr2 {width:50%; height:2px; background:red;
       border-width:0px; margin-left:0px}
       /* CSSの規格に忠実．Netscape 6〜7が対応 */

    #hr3 {width:50%; height:2px; color:red; text-align:left}
       /* IEに対応 */

    #hr4 {width:50%; height:2px; background:red; text-align:left;
        border-width:0px; margin-left:0px; color:red}
       /* IE，NN 両方に対応 */

       /* ID名 hr1〜hr4 には適当な名前を付ける */
    -->
  </style>
  <title>
    タグ辞典
  </title>
</head>
<body>
<hr id="hr1">　　　幅80% 高さ5ピクセル

↓幅50%，高さ2ピクセル，緑色，左寄せ
<hr id="hr2">　　CSSの規格に忠実．Netscape 6〜7が対応

<hr id="hr3">　　IEに対応

<hr id="hr4">　　IEとNN6〜7に対応
</body>


↓テーブルを使用した例
　　幅80%，高さ3ピクセルの黄色を高さ1ピクセルの水色でサンドイッチ，中央
　　　NN4以下では表示されません。NN4以下で表示させる方法についてはここを参考にしてください。

<table align="center" bgcolor="#0099ff" width="80%"
border="0" cellpadding="0" cellspacing="0">
   <tr><td height="1"></td></tr>
</table>

<table align="center" bgcolor="#ffff00" width="80%"
border="0" cellpadding="0" cellspacing="0">
   <tr><td height="3"></td></tr>
</table>

<table align="center" bgcolor="#0099ff" width="80%"
border="0" cellpadding="0" cellspacing="0">
   <tr><td height="1"></td></tr>
</table>



解説
　スタイルシートを使う利点
(1) 最初にスタイルさえ定義しておけば，実際に使うときには簡単な記述で済む。
(2) スタイルの定義を変えるだけで，個々のスタイルを一斉に変えることができる。
(3) カラー表示を始め，変化に富んだ罫線をデザインすることができる。

　スタイルシートを使う欠点
(1) HTMLより複雑で，解説書などを見ながら作っても，なかなか思うように表現できないことが多い。
(2) ブラウザによってスタイルシートの対応がまちまちなので，多くのブラウザで同じように表現させることが難しい。

　テーブルを使う方法について
　テーブルをレイアウトだけのために使うのはHTML本来の意図から外れていますが，実用性は高いです。
(1) 変化に富んだ罫線をデザインすることができる。
(2) スタイルシートに比べてブラウザを選ばない。



　4． 段落を設ける
　<p>⇔</p>　　ブロック要素
このページのトップへ
　<p>から</p>までをひとつの段落とみなし，表示するとき段落の前後に空白行が設けられます。
　段落の中には画像やテーブルなどを置くこともできます。

　<p>の使用例

ソース 
ということが研究されています。
<p>
　詳しい研究内容につきましては<br>
次の機会に報告することにして，<br>
概要について説明します。
</p>
　次の図が，実験装置の概略図です。

Webページの表示
ということが研究されています。

　詳しい研究内容につきましては
次の機会に報告することにして，
概要について説明します。

　次の図が，実験装置の概略図です。


　段落の位置を指定する

<p align="☆">　　　廃止予定　
　 　
☆＝left ： 左寄せする （ デフォルト ）
☆＝center ： センタリングする
☆＝right ： 右寄せする
　<p align>の代わりに，スタイルシートで，
　インライン要素については text-align:left や text-align:rightを，
　ブロック要素については margin-left:0px や margin-right:0px を使用することが推奨されています。
　使用例については<div align>のところを参考にしてください。

　<p align>で位置を指定した例

<p align="center"> を使用し場合
ソース 
ということが研究されています。
<p align="center">
　詳しい研究内容につきましては<br>
次の機会に報告することにして，<br>
概要について説明します。
</p>
　次の図が，実験装置の概略図です。

Webページの表示
ということが研究されています。

　詳しい研究内容につきましては
次の機会に報告することにして，
概要について説明します。

　次の図が，実験装置の概略図です。
<p align="right"> を使用し場合
ソース 
ということが研究されています。
<p align="right">
　詳しい研究内容につきましては<br>
次の機会に報告することにして，<br>
概要について説明します。
</p>
　次の図が，実験装置の概略図です。

Webページの表示
ということが研究されています。

　詳しい研究内容につきましては
次の機会に報告することにして，
概要について説明します。

　次の図が，実験装置の概略図です。




このページのトップへ