初心者だけどスタイルシート

超初心者にとって”何が解らないか解らない”

初心者だけどスタイルシート

<STYLE>スタイルシートとは

スタイルシートを使うと今までのHTMLでは表現出来なかった細かい表示設定が可能になる。
だけど対応してるブラウザーはまだバージョン4.0以上、しかもIEとNCと対応してるスタイルシートの種類もまちまちです。
ここでは両方のブラウザーに対応してるやつだけピックアップしてみます。

(1)TEXT-DECORATION:■テキストの装飾
(2)TEXT-ALIGN:□テキストの位置

TEXT-DECORATION:■

■にNONE,UNDERLINE,LINE-THROUGH
サンプルココをクリック！（クリックしないでください、うそリンクです。）
上の(例)は仮のリンクを張った表示、リンク部分は普通アンダーラインが入るけど
<A HREF="blank" STYLE="text-decoration:none">サンプル</A>ココをクリック！
で表示が消える。

(4)<STYLE TYPE="text/css">□</STYLE>*リンク部分の文字を変化させる。IE4.0以降のみ

□に変化させる内容を指定。
（例）マウスがリンク部分にかかると文字が変化。

・color:#FF0000の部分に色指定、現在は赤（#FF0000）。
・font-style:italicの部分にフォント指定、現在は斜体（italic）。
他にtext-transform:uppercase（小文字アルファベットを大文字に変化）。
サンプルココをクリック！（クリックしないでください、うそリンクです。）

↓これが上のソースです↓
<STYLE TYPE="text/css">  </STYLE> <A HREF="blank" STYLE="text-decoration:none">サンプル</A>ココをクリック！

TEXT-ALIGN:□
□にRIGHT,CENTER,LEFT

(例)はテキストを中央に配置した例だけど、スタイルシートを使わなくても他のタグ
でも出来る！？

文章がセンターに配置

一応ソースを下に書いときます。
<P STYLE="text-align:center">文章がセンターに配置</P>

(3)BACKGROUND-IMAGE:■指定した背景場所にイメージ画像を配置

BACKGROUND-IMAGE:■

■にURL(***.JIF/JPG)を指定。

(4)BACKGROUND-REPEAT:□指定したイメージ画像を繰り返し配置

BACKGROUND-REPEAT:□

□にREPEAT,REPEAT-X(縦),REPEAT-Y(横),

上（３）（４）のBACKGROUNDについての使用例です。

(5)PADDING-■:□テーブルデーターの中の位置を指定する。

PADDING-■:□

■にTOP,BOTTOM,RIGHT,LEFTを指定
□にPX（ピクセル）,CM,PT,%を指定

左から１５ピクセル、下から１５ピクセル離れてる？

従来のタグでは次の様にしか位置を指定出来ませんでしたが、
<TD ALIGN="left,right,center" VALIGN="top,bottom,middle">～～</TD>
スタイルシートでは更に細かい単位で指定出来る。

↓これが上のソースです↓
<TABLE ALIGN="center" BORDER="1">
<TR>
<TD WIDTH="360" STYLE="PADDING-LEFT:15PX;PADDING-BOTTOM:15PX">
<FONT COLOR="#FF0000">左から１５ピクセル、</FONT>
<FONT COLOR="#0000FF">下から１５ピクセル離れてる？</FONT>
</TD></TR>
</TABLE>

この他にも色々なスタイルシートが有るけど、従来のタグで可能なものとか
ＩＥ，ＮＣ，(4.0以上)の対応がまちまちのものは、省きました。
例外的にリンク文字の変化を入れたのは、IE4.*以外で見ても著しいイメージの
相違がない為です。

ファイル名| WYSIWYG型エディター| NCコンポザーの使い方| WYSIWYG型以外のエディター| テーブルタグ| メタタグ|
プレタグ| スタイルシートの活用| JAVA（スクリプト)| ダイナミックHTML| その他の注意|
イメージマップ| ファィルのアップロード| それって何！?| ご意見ご質問| HOME|