|
|||
| || トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || |
|
reference
 リファレンスの見方
  スタイルシートの書き方
ヘッダ情報
ページ全体
見出し
文字（テキスト）
リスト
テーブル
画像・イメージ
リンク
レイアウト
フォーム
フレーム
リファレンス一覧
|
レイアウト
このリファレンスの見方については「リファレンスの見方」をお読みください。
要素・属性・属性値
「要素」とは、
<img> や <p> 〜 </p> などタグ全体のことを要素といいます。
要素には属性が必ず付くものとつけなくてもよいものがあります。 「属性」とは要素につける付加情報のようなものです。 「属性値」とは「属性」に付ける「値」、例えば
ブロックレベル要素ブロックレベル要素とは
<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 { <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 { <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 { <p>左寄せ</p> もしくは<div>左寄せ</div> 縦方向の上寄せ、下寄せ、中央は「リファレンス−テーブル」を参照してください。
水平線・区切り線
水平線・区切り線を引くには
<hr> を使います。
線の幅や開始位置を指定することもできます。
【HTMLタグ】
<hr>
スタイルシートを使うと、線のデザインを変更することができます。
【スタイルシート インライン】
<hr style="border-style: dotted;
【スタイルシートヘッダ、外部ファイル】
hr { <hr>
線の種類は次の9種類があります。
dotted（点線）、 ブロックごとに枠線をつける<div>を使えば、ブロック（段落）に枠をつけることができます。
赤い点線で囲んでみました。
<div style="border: 1px dashed #FF0000;">赤い点線で囲んでみました。</div>
div { <div>赤い点線で囲んでみました。 </div> スクロールバーを表示しない
スクロールバーを表示しないようにするには、<body> タグに scroll 属性を指定します。
【HTMLタグ】
<body scroll=no> スクロールバーの色を変える
スクロールバーの色を変えるには、スタイルシートをヘッダもしくは外部ファイルに書きます。
【スタイルシートヘッダ、外部ファイル】
body { テーブルにスクロールバーをつける<div> を使ってテーブル全体を囲めば、テーブルにスクロールバーをつけることができます。
【スタイルシート インライン】
<div style="height:60px; width:400px; overflow-y:scroll;">
【スタイルシートヘッダ、外部ファイル】
div { <div> <table border="1" width="400"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> |
