見る人に優しいウエブ作成


Directory

はじめに
CSSの利点
CSSの書式
CSSの定義
CSSの単位
継承について
CSSのプロパティ
CSS実例編 (1)
CSS実例編 (2)
CSS実例編 (3)
CSS実例編 (4)
CSS実例編 (5)


Contents

優しいウエブ作成
HTML入門
画像処理入門
ページレイアウト入門
スタイルシート入門
用語集
サポートタグ

+++ スタイルシート入門(実例編)+++

戻る
次へ

■ テキストをインデントする

テキストのインデントとは、行の左側からどれだけの距離を取って表示するかを決めるプロパティです。 通常、特に何も設定しない限りページの左から表示されますが、行頭に余白を設ける事ができます。 このコンテンツの最初のページを見て下さい。text-indentを1emに設定し行頭をインデントしてます。

記述例
H2{text-indent:3em;}

H4{text-indent:4em;}

見出し2をインデントしてます

見出し4をインデントしてます

text-indentも絶対値及び相対値での指定が可能です。



■ マージンを設ける

マージンは、その要素の枠線までの余白を設定するもので、テーブルのCELLSPACINGと同じイメージです。 その要素とは、<P>〜</P>や<DIV>〜</DIV>などの囲まれた部分に相当します。 テーブルと似た感覚で、記載文の位置を制御する事ができ、このサイトの大半の部分に適用しています。
記述ソースは、以下の通りで適用された箇所は、こんな感じのページになってます


<P CLASS="margin1">
基本的なスタイルシートの記述ルールですが、
</P>
<P CLASS="margin3">
Selector {property:value}
セレクタ{属性:値} で{ } 内は宣言と呼ばれる。
</P>


<P CLASS="margin1">には、左マージン2em <P CLASS="margin3">には4emを設けています。 marginは、margin-left、margin-right、margin-top、margin-bottomそれぞれ単体で単位は、絶対値及び相対値で指定可能です。 CSS未対応のブラウザとの見栄えの差が最も大きくなりますが、正確に記載文などの表示位置を制御できます。




Prev | Home | Next




Copyright(C) 1999-2000, ken_yuu All Right Reserved.