超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

要素・属性・属性値 ブロックレベル要素 インライン要素
センタリング 右寄せ 左寄せ
水平線・区切り線 ブロックごとに枠線をつける スクロールバーを表示しない
スクロールバーの色を変える テーブルにスクロールバーをつける  

レイアウト

このリファレンスの見方については「リファレンスの見方」をお読みください。

要素・属性・属性値

「要素」とは、 <img> や <p> 〜 </p> などタグ全体のことを要素といいます。
要素には属性が必ず付くものとつけなくてもよいものがあります。

「属性」とは要素につける付加情報のようなものです。
属性と属性の間は、必ず半角スペースで区切ります。

「属性値」とは「属性」に付ける「値」、例えば <img src="imege.jpg" width="79" height="85"> などの数字の部分を属性値と言います。

要素と属性

ブロックレベル要素

ブロックレベル要素とは
<h1>〜 <h6> <p> <div> <table> <dl> <ul> <ol> <form>
<address> <blockquote> <hr> <pre>
などがあり、ひとかたまりとして区切られる文章を構成する要素のことを言います。
ブロックレベル要素は最後に改行が自動的に入ります。

りんご

<h4 style="color:FFFFFF; background-color:#FF0000;">りんご</h4>
このように文字だけでなく段落全体に属性が適用されます。

インライン要素

インライン要素とは
<img> <br> <span> <a>などをインライン要素といいます。
例えば 
りんごが赤く色づきました。
りんごが<span style="background-color:#FF0000;">赤く</span>色づきました。
ブロックレベル要素のように自動的に改行は入らないので、このように文章の一部のスタイルを変更することができます。

センタリング

文字や画像をセンタリング(中央揃え)するには  「center」を使います。
センタリング
【HTMLタグ】

<center>センタリング</center>

もしくは

<p align="center">センタリング</p>

もしくは

<div align="center">センタリング</div>

【スタイルシート インライン】

<p style="text-align: center;>センタリング</p>

もしくは

<div style="text-align: center;>センタリング</div>

【スタイルシートヘッダ、外部ファイル】

p {
text-align: center;
}
div {
text-align: center;
}


<p>センタリング</p>

<div>センタリング</div>

右寄せ

文字や画像を「右寄せ」するには  「right」を使います。

右寄せ

【HTMLタグ】

<p align="right">右寄せ</p>

もしくは

<div align="right">右寄せ</div>

【スタイルシート インライン】

<p style="text-align: right;>右寄せ</p>

もしくは

<div style="text-align: right;>右寄せ</div>

【スタイルシートヘッダ、外部ファイル】

p {
text-align: right;
}
div {
text-align: right;
}


<p>右寄せ</p>

もしくは

<div>右寄せ</div>

左寄せ

文字や画像を「左寄せ」するには  「left」を使います。
通常何も指定しなければ左寄せになりますが、センタリングされている範囲で、強制的に左寄せをする場合などに使用することがあります。

左寄せ

【HTMLタグ】

<p align="left">左寄せ</p>

もしくは

<div align="left">左寄せ</div>

【スタイルシート インライン】

<p style="text-align: left;>左寄せ</p>

もしくは

<div style="text-align: left;>左寄せ</div>

【スタイルシートヘッダ、外部ファイル】

p {
text-align: left;
}
div {
text-align: left;
}


<p>左寄せ</p>

もしくは

<div>左寄せ</div>

縦方向の上寄せ、下寄せ、中央は「リファレンス−テーブル」を参照してください。

水平線・区切り線

水平線・区切り線を引くには  <hr> を使います。

線の幅や開始位置を指定することもできます。





【HTMLタグ】

<hr>
<hr width="200" align="left">
<hr width="200" align="center">
<hr width="200" align="right">

スタイルシートを使うと、線のデザインを変更することができます。

【スタイルシート インライン】

<hr style="border-style: dotted; color: #666666; background-color: #999999;">

【スタイルシートヘッダ、外部ファイル】

hr {
color: #666666;    ← 線の色(IE用)
background-color: #999999;    ← 線の色(NN用)
height: 1px;    ← 線の太さ
border: 1px;    ← 枠の太さ
border-style: dotted;    ← 線の種類
}


<hr>
線の種類は次の9種類があります。
dotted(点線)、dashed(荒い点線)、solid(実線)、double(二重線)、groove(谷線)、ridge(山線)、 inset(内線)、outset(外線)、inherit(継承)

ブロックごとに枠線をつける

<div>を使えば、ブロック(段落)に枠をつけることができます。
赤い点線で囲んでみました。
<div style="border: 1px dashed #FF0000;">赤い点線で囲んでみました。</div>

div {
color: #FF0000;     ← 線の色(IE用)
background-color: #FF0000;    ← 線の色(IE用)
border: 1px   ← 線の太さ
border-style: dotted;     ← 線の色(IE用)
}


<div>赤い点線で囲んでみました。 </div>

スクロールバーを表示しない

スクロールバーを表示しないようにするには、<body> タグに scroll 属性を指定します。
【HTMLタグ】

<body scroll=no>

スクロールバーの色を変える

スクロールバーの色を変えるには、スタイルシートをヘッダもしくは外部ファイルに書きます。
【スタイルシートヘッダ、外部ファイル】

body {
scrollbar-base-color: #ffccff;
}

テーブルにスクロールバーをつける

<div> を使ってテーブル全体を囲めば、テーブルにスクロールバーをつけることができます。
   
   
   
   
【スタイルシート インライン】

<div style="height:60px; width:400px; overflow-y:scroll;">
<table border="1" width="400">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>

【スタイルシートヘッダ、外部ファイル】

div {
height: 60px;
width: 400px;
overflow-y:scroll;"
}


<div>
<table border="1" width="400">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
▲このページのトップに戻るTop