スタイルシート（CSS）の基礎知識

ここでは、「スタイルシート（CSS）の基礎知識」に関する記事を紹介しています。

スタイルシート（CSS）の基礎知識

［ 2006/05/30(火) ］

通常のHTMLタグでは表示しにくいものをスタイルシートを用いて表現します。

◆スタイルシート（CSS）の指定方法
スタイルシートには、「インライン要素」（前後で改行されない）と、「ブロック要素」（前後で改行される）があります。

　※代表的なタグ　<SPAN> <DIV>

◆全ページのタグにスタイルを指定するには
全ページのタグにスタイルを指定するには、<HEAD>～</HEAD>の間に以下のように表記します。

<HTML>
<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

◆エレメントの属性を一度に指定する
セミコロン（ ; ）で区切って、エレメントに対して複数の属性値を指定することができます。最後の属性値のセミコロンは省略可能
　※記載例；　H3 {color : red ; background : yellow ; font-weight : bold}

◆クラス指定をする
タグ名に関係なくクラス名を指定することでスタイルを指定する事ができます。
　※記載例；
.size30 { width : 30%; color : #008800; background-color : #ccffff; border : 1px solid #5555AA }

<H1 class="size30">これはsize30クラスです。</H1>
<P class="size30">これもsize30クラスです。</P>

◆定義済みクラスの指定をする
A要素とP要素にはいくつかの定義済みクラスを指定することができます。定義済みクラスはピリオド( . )ではなくコロン( : )で指定します。

A:link { color:green; }　　　　/* 通常のリンクの状態 */
A:visited { color:blue; }　　　/* 読み込み済みリンクの状態 */
A:active { color:pink; }　　　/* クリックされた瞬間のリンクの状態 */
A:hover { color:red; }　　　　/* マウスをその上に乗せた時のスタイル IEのみ */
P:first-line { color:red; }　　/* 最初の1行を赤い字に指定する */
P:first-letter { font-size:20px; }　　/* 最初の1文字を20pxに指定する */
/* first-lineと、first-letterは、IE3.0, NN4.0では正常に表示されません */

◆スタイルシートを外部ファイルで定義する
スタイルシートの定義部分を外部ファイルとして読み込む事ができます。

<HEAD>
<TITLE>Style Sheet Test</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.css.com/style.css">
</HEAD>

スタイルシート（CSS） | トラックバック：3 | コメント：1 | Page Top↑

≪ブログに挑戦してみよう！（中高年のためのパソコン講座） | ホーム | ダイナミックHTML≫

この記事へのコメント

スタイルシート（CSS）

スタイルシート（CSS）に関する情報を紹介しています

2006/05/23(火) 18:04 | URL | CSS #ntCWGXuI[ 編集]

コメントを投稿する