CSSとは何ですか？

C ascading S tyle S * heetsは、CSSとも呼ばれますが、Webページを表示可能にするプロセスを簡素化することを目的としたシンプルな設計言語です。

CSSは、Webページのルックアンドフィールの部分を処理します。 CSSを使用すると、テキストの色、フォントのスタイル、段落間の間隔、列のサイズとレイアウトの方法、使用する背景画像または色、レイアウト設計、さまざまなデバイスおよび画面サイズの表示のバリエーションを制御できますその他のさまざまな効果。

CSSは簡単に習得して理解できますが、HTMLドキュメントの表示を強力に制御できます。最も一般的には、CSSはマークアップ言語のHTMLまたはXHTMLと組み合わされます。

CSSの利点

* CSSは時間を節約します*-CSSを一度書くと、複数のHTMLページで同じシートを再利用できます。各HTML要素のスタイルを定義し、必要な数のWebページに適用できます。
ページの読み込みが速くなります-CSSを使用している場合、毎回HTMLタグの属性を記述する必要はありません。タグのCSSルールを1つ記述し、そのタグのすべての出現に適用します。したがって、コードが少ないほどダウンロード時間が短縮されます。
簡単なメンテナンス-グローバルな変更を行うには、スタイルを変更するだけで、すべてのWebページのすべての要素が自動的に更新されます。
* HTMLの優れたスタイル*-CSSはHTMLよりも属性の配列がはるかに広いため、HTML属性と比較して、HTMLページの外観をはるかに良くすることができます。
複数のデバイスの互換性-スタイルシートにより、コンテンツを複数のタイプのデバイス用に最適化できます。同じHTMLドキュメントを使用することにより、PDAや携帯電話などのハンドヘルドデバイスや印刷用に、異なるバージョンのWebサイトを表示できます。
グローバルWeb標準-HTML属性は非推奨になり、CSSの使用が推奨されています。したがって、すべてのHTMLページでCSSを使用して、将来のブラウザとの互換性を持たせることをお勧めします。

誰がCSSを作成および保守しますか？

CSSは、CSSワーキンググループと呼ばれるW3C内のグループによって作成および管理されます。 CSSワーキンググループは、仕様と呼ばれるドキュメントを作成します。 W3Cメンバーによって仕様が議論され、正式に承認されると、それが推奨事項になります。

W3Cは言語の実際の実装を制御できないため、これらの承認された仕様は推奨と呼ばれます。独立した企業や組織がそのソフトウェアを作成します。

注-World Wide Web Consortium、またはW3Cは、インターネットの仕組みと進化の方法について勧告を行うグループです。

CSSバージョン

カスケードスタイルシートレベル1（CSS1）は、1996年12月にW3Cから勧告として発表されました。このバージョンでは、CSS言語と、すべてのHTMLタグの単純な視覚的フォーマットモデルについて説明します。

CSS2は1998年5月にW3C勧告になり、CSS1に基づいています。このバージョンでは、メディア固有のスタイルシートのサポートが追加されます。プリンターと音声デバイス、ダウンロード可能なフォント、要素の配置とテーブル。

CSS-構文

CSSは、ブラウザによって解釈され、ドキュメント内の対応する要素に適用されるスタイルルールで構成されます。スタイルルールは3つの部分で構成されています-

セレクタ-セレクタは、スタイルが適用されるHTMLタグです。これは、<h1>や<table>などのタグです。
プロパティ-プロパティは、HTMLタグの属性の一種です。簡単に言えば、すべてのHTML属性がCSSプロパティに変換されます。 color _、 border_などになります。
値-値はプロパティに割り当てられます。たとえば、color_プロパティには、_red_または＃F1F1F1_などの値を設定できます。

次のようにCSSスタイルルールの構文を置くことができます-

selector { property: value }

構文

例-次のように表の境界を定義できます-

table{ border :1px solid #C00; }

ここで、テーブルはセレクターであり、境界線はプロパティであり、指定された値_1px solid＃C00_はそのプロパティの値です。

セレクターは、快適さに基づいてさまざまな簡単な方法で定義できます。これらのセレクターを1つずつ置きます。

タイプセレクター

これは上で見たのと同じセレクターです。繰り返しますが、すべてのレベル1の見出しに色を付けるもう1つの例-

h1 {
   color: #36CFFF;
}

ユニバーサルセレクター

特定のタイプの要素を選択するのではなく、ユニバーサルセレクターは任意の要素タイプの名前と非常に単純に一致します-

* {
   color: #000000;
}

このルールは、ドキュメント内のすべての要素のコンテンツを黒でレンダリングします。

子孫セレクター

特定の要素内にある場合にのみ、特定の要素にスタイルルールを適用するとします。次の例に示すように、スタイルルールは<ul>タグ内にある場合にのみ<em>要素に適用されます。

ul em {
   color: #000000;
}

クラスセレクター

要素のクラス属性に基づいてスタイル規則を定義できます。そのクラスを持つすべての要素は、定義されたルールに従ってフォーマットされます。

.black {
   color: #000000;
}

このルールは、ドキュメントのclass属性が_black_に設定されているすべての要素のコンテンツを黒でレンダリングします。もう少し具体的にすることができます。たとえば-

h1.black {
   color: #000000;
}

このルールは、クラス属性が_black_に設定された<h1>要素のみのコンテンツを黒でレンダリングします。

特定の要素に複数のクラスセレクターを適用できます。次の例を考慮してください-

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

IDセレクター

要素の_id_属性に基づいてスタイルルールを定義できます。その_id_を持つすべての要素は、定義されたルールに従ってフォーマットされます。

#black {
   color: #000000;
}

このルールは、ドキュメントの_id_属性が_black_に設定されているすべての要素のコンテンツを黒でレンダリングします。もう少し具体的にすることができます。たとえば-

h1#black {
   color: #000000;
}

このルールは、_id_属性が_black_に設定された<h1>要素のみのコンテンツを黒でレンダリングします。

_id_セレクターの真の力は、それらが子孫セレクターの基盤として使用される場合です、例えば-

#black h2 {
   color: #000000;
}

この例では、_id_属性が_black_に設定されたタグ内にある場合、すべてのレベル2の見出しが黒色で表示されます。

子セレクター

子孫セレクターを見てきました。セレクタにはもう1つのタイプがあり、これは子孫に非常に似ていますが、機能が異なります。次の例を考慮してください-

body > p {
   color: #000000;
}

このルールは、<body>要素の直接の子である場合、すべての段落を黒でレンダリングします。 <div>や<td＆gtのような他の要素内に置かれた他の段落は、この規則の効果を持ちません。

属性セレクター

特定の属性を持つHTML要素にスタイルを適用することもできます。以下のスタイルルールは、値が_text_のtype属性を持つすべての入力要素に一致します-

input[type = "text"] {
   color: #000000;
}

この方法の利点は、<input type = "submit"/>要素が影響を受けず、色が目的のテキストフィールドにのみ適用されることです。

属性セレクターに適用されるルールは次のとおりです。

p [lang] -_lang_属性を持つすべての段落要素を選択します。
p [lang = "fr"] -_lang_属性の値が正確に「fr」であるすべての段落要素を選択します。
p [lang〜= "fr"] -_lang_属性に単語「fr」が含まれるすべての段落要素を選択します。
p [lang | = "en"] -_lang_属性に正確に「en」または「en-」で始まる値が含まれるすべての段落要素を選択します。

複数のスタイルルール

1つの要素に対して複数のスタイルルールを定義する必要がある場合があります。次の例で定義されているように、これらのルールを定義して、複数のプロパティと対応する値を単一のブロックに結合することができます-

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

ここでは、すべてのプロパティと値のペアが*セミコロン（;）*で区切られています。それらを単一行または複数行に保持できます。読みやすくするために、それらを別々の行に保持します。

しばらくの間、上記のブロックで言及されているプロパティについて気にしないでください。これらのプロパティについては、以降の章で説明します。プロパティに関する詳細は、CSSリファレンスを参照してください。

グループ化セレクター

必要に応じて、多くのセレクターにスタイルを適用できます。次の例に示すように、セレクタをカンマで区切るだけです-

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

このスタイル定義ルールは、h1、h2、およびh3要素にも適用できます。リストの順序は関係ありません。セレクター内のすべての要素には、対応する宣言が適用されます。

以下に示すように、さまざまな_id_セレクターを組み合わせることができます-

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

CSS-包含

HTMLドキュメントにスタイルを関連付けるには、4つの方法があります。最も一般的に使用されるメソッドは、インラインCSSと外部CSSです。

埋め込みCSS-<style>要素

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

それは次の結果を生成します-

属性

Attribute

Value

Description

type

text/css

Specifies the style sheet language as a content-type (MIME type). This is required attribute.

media

screen

tty

tv

投影

ハンドヘルド

印刷する

点字

聴覚

all

Specifies the device the document will be displayed on. Default value is all. This is an optional attribute.

インラインCSS-_style_属性

HTML要素の_style_属性を使用して、スタイルルールを定義できます。これらのルールは、その要素にのみ適用されます。ここに一般的な構文があります-

<element style = "...style rules....">

属性

Attribute	Value	Description
style	style rules	The value of style attribute is a combination of style declarations separated by semicolon (;).

例

上記は、上記の構文に基づいたインラインCSSの例です-

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;">
         This is inline CSS
      </h1>
   </body>
</html>

それは次の結果を生成します-

外部CSS-<link>要素

外部スタイルシートは、*。css *拡張子を持つ独立したテキストファイルです。このテキストファイル内ですべてのスタイルルールを定義し、<link>要素を使用してこのファイルをHTMLドキュメントに含めることができます。

外部CSSファイルを含める一般的な構文は次のとおりです-

<head>
   <link type = "text/css" href = "..." media = "..."/>
</head>

属性

Attribute

Value

Description

type

text css

Specifies the style sheet language as a content-type (MIME type). This attribute is required.

href

URL

Specifies the style sheet file having Style rules. This attribute is a required.

media

screen

tty

tv

投影

ハンドヘルド

印刷する

点字

聴覚

all

Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

例

次のルールを持つ_mystyle.css_という名前のシンプルなスタイルシートファイルを考えてください-

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

これで、このファイル_mystyle.css_を次のようにHTMLドキュメントに含めることができます-

<head>
   <link type = "text/css" href = "mystyle.css" media = " all"/>
</head>

インポートされたCSS-@importルール

@importは、<link>要素と同様の方法で外部スタイルシートをインポートするために使用されます。 @importルールの一般的な構文は次のとおりです。

<head>
   <@import "URL";
</head>

ここで、URLはスタイルルールを持つスタイルシートファイルのURLです。同様に別の構文を使用することができます-

<head>
   <@import url("URL");
</head>

例

以下は、スタイルシートファイルをHTMLドキュメントにインポートする方法を示す例です-

<head>
   @import "mystyle.css";
</head>

CSSルールのオーバーライド

HTML文書にスタイルシートルールを含める4つの方法について説明しました。スタイルシートルールをオーバーライドするルールを次に示します。

インラインスタイルシートが最も優先されます。そのため、<style> … </style>タグで定義されたルールまたは外部スタイルシートファイルで定義されたルールをオーバーライドします。
<style> … </style>タグで定義されたルールは、外部スタイルシートファイルで定義されたルールをオーバーライドします。 *外部スタイルシートファイルで定義されたルールは最も優先順位が低く、このファイルで定義されたルールは、上記の2つのルールが適用できない場合にのみ適用されます。

古いブラウザの処理

CSSをサポートしていない古いブラウザはまだたくさんあります。そのため、埋め込みCSSをHTMLドキュメントに書き込む際には注意が必要です。次のスニペットは、コメントタグを使用して古いブラウザからCSSを非表示にする方法を示しています-

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

CSSコメント

多くの場合、スタイルシートブロックにコメントを追加する必要があります。そのため、スタイルシートの任意の部分をコメントするのは非常に簡単です。/* …..これはスタイルシートのコメントです….. */の中に簡単にコメントを入れることができます。

/* …. */を使用して、CおよびC ++プログラミング言語で行うのと同様の方法で複数行ブロックをコメント化できます。

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
           /*This is a single-line comment*/
            text-align: center;
         }
        /*This is a multi-line comment*/
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

それは次の結果を生成します-

CSS-測定単位

実際の演習を開始する前に、CSS測定単位について簡単に説明します。 CSSは、インチ、センチメートル、ポイントなどの絶対単位だけでなく、パーセンテージやem単位などの相対測定値を含む多数の測定値をサポートしています。スタイルルールでさまざまな測定値を指定するときにこれらの値が必要です。 border = "1pxの赤一色" 。

適切な例とともにすべてのCSS測定単位をリストしました-

Unit

説明

例

%

測定値を別の値（通常は囲んでいる要素）に対する割合として定義します。

p \ {font-size：16pt;行の高さ：125％;}

cm

測定値をセンチメートルで定義します。

div \ {margin-bottom：2cm;}

em

emスペースでのフォントの高さの相対的な測定値。 em単位は与えられたフォントのサイズに等しいため、フォントを12ptに割り当てると、各「em」単位は12ptになります。したがって、2emは24ptです。

p \ {letter-spacing：7em;}

ex

この値は、フォントのx高さに対する相対的な測定値を定義します。 x-heightは、フォントの小文字xの高さによって決まります。

p \ {font-size：24pt;行の高さ：3ex;}

in

インチ単位で測定を定義します。

p \ {word-spacing：.15in;}

mm

測定値をミリメートル単位で定義します。

p \ {word-spacing：15mm;}

pc

パイカ単位で測定を定義します。パイカは12ポイントに相当します。したがって、1インチあたり6パイカがあります。

p \ {font-size：20pc;}

pt

ポイント単位で測定を定義します。ポイントは1/72インチとして定義されます。

body \ {font-size：18pt;}

px

測定値を画面ピクセルで定義します。

p \ {padding：25px;}

CSS-色

CSSは色の値を使用して色を指定します。通常、これらは要素の前景（つまり、テキスト）または要素の背景の色を設定するために使用されます。また、境界線の色やその他の装飾効果に影響を与えるためにも使用できます。

色の値はさまざまな形式で指定できます。次の表は、すべての可能な形式を示しています-

Format	Syntax	Example
Hex Code	#RRGGBB	p\{color:#FF0000;}
Short Hex Code	#RGB	p\{color:#6A7;}
RGB %	rgb(rrr%,ggg%,bbb%)	p\{color:rgb(50%,50%,50%);}
RGB Absolute	rgb(rrr,ggg,bbb)	p\{color:rgb(0,0,255);}
keyword	aqua, black, etc.	p\{color:teal;}

これらの形式については、次のセクションで詳しく説明します-

CSSカラー-16進コード

16進数は、色の6桁の表現です。最初の2桁（RR）は赤の値を表し、次の2桁は緑の値（GG）を表し、最後の2桁は青の値（BB）を表します。

16進値は、Adobe Photoshop、Jasc Paintshop Pro、またはAdvanced Paint Brushを使用するようなグラフィックソフトウェアから取得できます。

各16進コードの前にはポンド記号またはハッシュ記号「＃」が付きます。以下は、16進表記を使用する例です。

Color	Color HEX
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

CSSカラー-短い16進コード

これは、6桁表記の短縮形です。この形式では、各数字が複製され、同等の6桁の値に到達します。たとえば、＃6A7は＃66AA77になります。

16進値は、Adobe Photoshop、Jasc Paintshop Pro、またはAdvanced Paint Brushを使用するようなグラフィックソフトウェアから取得できます。

各16進コードの前にはポンド記号またはハッシュ記号「＃」が付きます。以下は、16進表記を使用する例です。

Color	Color HEX
	#000
	#F00
	#0F0
	#0FF
	#FF0
	#0FF
	#F0F
	#FFF

CSSカラー-RGB値

この色の値は、* rgb（）*プロパティを使用して指定されます。このプロパティは、赤、緑、青にそれぞれ1つずつ、3つの値を取ります。値は、0〜255の整数またはパーセンテージです。

注-すべてのブラウザは色のrgb（）プロパティをサポートしていないため、使用しないことをお勧めします。

以下は、RGB値を使用していくつかの色を表示する例です。

Color	Color RGB
	rgb(0,0,0)
	rgb(255,0,0)
	rgb(0,255,0)
	rgb(0,0,255)
	rgb(255,255,0)
	rgb(0,255,255)
	rgb(255,0,255)
	rgb(192,192,192)
	rgb(255,255,255)

カラーコードの作成

カラーコードビルダーを使用して、数百万のカラーコードを作成できます。 * HTMLカラーコードビルダー*を確認してください。このツールを使用するには、Java対応ブラウザが必要です。

ブラウザの安全な色

以下は、最も安全でコンピューターに依存しない色である216色のリストです。これらの色は、ヘキサコード000000からFFFFFFまでさまざまです。これらの色は、256色のパレットを実行するときにすべてのコンピューターが色を正しく表示することを保証するため、使用しても安全です-

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

CSS-背景

この章では、さまざまなHTML要素の背景を設定する方法について説明します。あなたは要素の次の背景プロパティを設定することができます-

background-color プロパティは、要素の背景色を設定するために使用されます。
background-image プロパティは、要素の背景画像を設定するために使用されます。
background-repeat プロパティは、背景の画像の繰り返しを制御するために使用されます。
background-position プロパティは、背景の画像の位置を制御するために使用されます。
background-attachment プロパティは、背景の画像のスクロールを制御するために使用されます。
background プロパティは、他の多くの背景プロパティを指定するための短縮形として使用されます。

背景色を設定する

以下は、要素の背景色を設定する方法を示す例です。

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

背景画像を設定する

以下に示すように、ローカルに保存された画像を呼び出すことにより、背景画像を設定できます-

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>

   <body>
      <h1>Hello World!</h1>
   </body>
<html>

それは次の結果を生成します-

背景画像を繰り返す

次の例は、画像が小さい場合に背景画像を繰り返す方法を示しています。画像を繰り返したくない場合は、_background-repeat_プロパティに_no-repeat_値を使用できます。この場合、画像は1回だけ表示されます。

デフォルトでは、_background-repeat_プロパティには_repeat_値があります。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

それは次の結果を生成します-

背景画像を垂直方向に繰り返す方法を示す次の例。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

それは次の結果を生成します-

次の例は、背景画像を水平方向に繰り返す方法を示しています。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

それは次の結果を生成します-

背景画像の位置を設定する

次の例は、背景画像の位置を左側から100ピクセル離れて設定する方法を示しています。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

それは次の結果を生成します-

次の例は、背景画像の位置を左側から100ピクセル、上から200ピクセル下に設定する方法を示しています。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

それは次の結果を生成します-

背景の添付ファイルを設定する

背景添付ファイルは、背景画像を固定するか、ページの残りの部分とともにスクロールするかを決定します。

次の例は、固定背景画像を設定する方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

それは次の結果を生成します-

次の例は、スクロールする背景画像を設定する方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

それは次の結果を生成します-

略記プロパティ

_background_プロパティを使用して、すべての背景プロパティを一度に設定できます。たとえば-

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

CSS-フォント

この章では、HTML要素で利用可能なコンテンツのフォントを設定する方法を説明します。あなたは要素の次のフォントプロパティを設定することができます-

font-family プロパティは、フォントのフェイスを変更するために使用されます。
font-style プロパティは、フォントを斜体または斜体にするために使用されます。
font-variant プロパティは、スモールキャップ効果を作成するために使用されます。
font-weight プロパティを使用して、フォントの太さまたは明るさを増減します。
font-size プロパティは、フォントのサイズを増減するために使用されます。
font プロパティは、他の多くのフォントプロパティを指定するための省略形として使用されます。

フォントファミリを設定する

以下は、要素のフォントファミリを設定する方法を示す例です。可能な値は、任意のフォントファミリ名です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントスタイルを設定する

以下は、要素のフォントスタイルを設定する方法を示す例です。可能な値は、_normal、斜体、および斜体_です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントバリアントを設定する

次の例は、要素のフォントバリアントを設定する方法を示しています。可能な値は、_normalおよびsmall-caps_です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントの太さを設定する

次の例は、要素のフォントの太さを設定する方法を示しています。 font-weightプロパティは、フォントの太さを指定する機能を提供します。可能な値は、_normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900_です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>

      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>

      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントサイズを設定する

次の例は、要素のフォントサイズを設定する方法を示しています。 font-sizeプロパティは、フォントのサイズを制御するために使用されます。可能な値は、_xx-small、x-small、small、medium、large、x-large、xx-large、smaller、large、ピクセルまたは％_のサイズです。

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>

      <p style = "font-size:small;">
         This font size is small
      </p>

      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントサイズの調整の設定

次の例は、要素のフォントサイズ調整を設定する方法を示しています。このプロパティを使用すると、x-heightを調整してフォントを読みやすくすることができます。可能な値は任意の数値です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

フォントストレッチを設定する

次の例は、要素のフォントストレッチを設定する方法を示しています。このプロパティは、ユーザーのコンピューターに依存して、使用されているフォントの拡張バージョンまたは圧縮バージョンを持っています。

可能な値は、「通常」、「幅」、「幅」、「超凝縮」、「超凝縮」、「凝縮」、「半凝縮」、「半展開」、「展開」、「拡張」、「超展開」です。

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

略記プロパティ

_font_プロパティを使用して、すべてのフォントプロパティを一度に設定できます。たとえば-

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

CSS-テキスト

この章では、CSSプロパティを使用してテキストを操作する方法について説明します。要素の次のテキストプロパティを設定できます-

color プロパティは、テキストの色を設定するために使用されます。
direction プロパティは、テキストの方向を設定するために使用されます。
letter-spacing プロパティは、単語を構成する文字間のスペースを追加または削除するために使用されます。
word-spacing プロパティは、文の単語間のスペースを追加または削除するために使用されます。
text-indent プロパティは、段落のテキストをインデントするために使用されます。
text-align プロパティは、ドキュメントのテキストを揃えるために使用されます。
text-decoration プロパティは、テキストに下線、上線、および取り消し線を付けるために使用されます。
text-transform プロパティは、テキストを大文字にするか、テキストを大文字または小文字に変換するために使用されます。
white-space プロパティは、テキストのフローとフォーマットを制御するために使用されます。
text-shadow プロパティは、テキストの周囲にテキストの影を設定するために使用されます。

テキストの色を設定する

次の例は、テキストの色を設定する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

それは次の結果を生成します-

テキストの方向を設定する

次の例は、テキストの方向を設定する方法を示しています。可能な値は_ltrまたはrtl_です。

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

それは次の結果を生成します-

文字間のスペースを設定する

次の例は、文字間のスペースを設定する方法を示しています。可能な値は、_normalまたはspace._を指定する数値です。

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

それは次の結果を生成します-

単語間のスペースを設定する

次の例は、単語間のスペースを設定する方法を示しています。可能な値は、_normalまたはspace_を指定する数値です。

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

テキストインデントを設定する

次の例は、段落の最初の行をインデントする方法を示しています。可能な値は、_％またはインデントスペースを指定する数値_です。

<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

それは次の結果を生成します-

テキストの配置を設定する

次の例は、テキストの配置方法を示しています。可能な値は、_left、right、center、justify_です。

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>

      <p style = "text-align:center;">
         This will be center aligned.
      </p>

      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

テキストを飾る

次の例は、テキストを装飾する方法を示しています。可能な値は、_none、underline、overline、line-through、blink_です。

<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>

      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>

      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>

      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

テキストケースを設定する

次の例は、テキストのケースを設定する方法を示しています。可能な値は、_none、capitalize、uppercase、lowercase_です。

<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>

      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>

      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

テキスト間の空白を設定する

次の例は、要素内の空白がどのように処理されるかを示しています。可能な値は、_normal、pre、nowrap_です。

<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
         This text has a line break and the white-space pre setting
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html>

これにより、次の結果が生成されます–

テキストの影を設定する

次の例は、テキストの周囲に影を設定する方法を示しています。これは、すべてのブラウザでサポートされているわけではありません。

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property,
         this text will have a  blue shadow.
      </p>
   </body>
</html>

それは次の結果を生成します-

CSS-画像の使用

画像はどのWebページでも重要な役割を果たします。多くの画像を含めることはお勧めできませんが、必要な場所で適切な画像を使用することが依然として重要です。

CSSは画像の表示を制御するのに良い役割を果たします。 CSSを使用して、次の画像プロパティを設定できます。

border プロパティは、画像の境界線の幅を設定するために使用されます。
height プロパティは、画像の高さを設定するために使用されます。
width プロパティは、画像の幅を設定するために使用されます。
-moz-opacity プロパティは、画像の不透明度を設定するために使用されます。

画像境界線プロパティ

画像の_border_プロパティは、画像の境界線の幅を設定するために使用されます。このプロパティは、長さまたは％の値を持つことができます。

幅がゼロピクセルの場合、境界線はありません。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <img style = "border:0px;" src = "/css/images/logo.png"/>
      <br/>
      <img style = "border:3px dashed red;" src = "/css/images/logo.png"/>
   </body>
</html>

それは次の結果を生成します-

画像の高さプロパティ

画像の_height_プロパティは、画像の高さを設定するために使用されます。このプロパティは、長さまたは％の値を持つことができます。％で値を指定する一方で、画像が利用可能なボックスに関してそれを適用します。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png"/>
      <br/>
      <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png"/>
   </body>
</html>

それは次の結果を生成します-

画像の幅プロパティ

画像の_width_プロパティは、画像の幅を設定するために使用されます。このプロパティは、長さまたは％の値を持つことができます。％で値を指定する一方で、画像が利用可能なボックスに関してそれを適用します。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png"/>
      <br/>
      <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png"/>
   </body>
</html>

それは次の結果を生成します-

-moz-opacityプロパティ

画像の_-moz-opacity_プロパティは、画像の不透明度を設定するために使用されます。このプロパティは、Mozillaで透明な画像を作成するために使用されます。 IEは* filter：alpha（opacity = x）*を使用して透明な画像を作成します。

Mozilla（-moz-opacity：x）では、xは0.0〜1.0の値になります。値を小さくすると、要素がより透明になります（CSS3で有効な構文opacity：xについても同じことが言えます）。

IEでは（filter：alpha（opacity = x））xは0〜100の値になります。値を小さくすると、要素がより透明になります。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png"/>
   </body>
</html>

それは次の結果を生成します-

CSS-リンク

この章では、CSSを使用してハイパーリンクのさまざまなプロパティを設定する方法について説明します。あなたはハイパーリンクの次のプロパティを設定することができます-

CSSの疑似クラスについて説明するときに、同じプロパティを再検討します。

*：link *は、未訪問のハイパーリンクを示します。
*：visited *は、訪れたハイパーリンクを意味します。
*：hover *は、現在ユーザーのマウスポインターが上にある要素を示します。
*：active *は、ユーザーが現在クリックしている要素を示します。

通常、これらのプロパティはすべて、HTMLドキュメントのヘッダー部分に保持されます。

効果的であるためには、CSS定義でa：linkとa：visitedの後にa：hoverを指定する必要があります。また、a：activeは、次のようにCSS定義でa：hoverの後に来なければなりません-

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

次に、これらのプロパティを使用してハイパーリンクにさまざまな効果を与える方法を見ていきます。

リンクの色を設定する

次の例は、リンクの色を設定する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

それは次の黒いリンクを生成します-

訪問済みリンクの色を設定する

次の例は、訪問済みリンクの色を設定する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a>
   </body>
</html>

次のリンクが生成されます。このリンクをクリックすると、色が緑に変わります。

マウスが上にあるときにリンクの色を変更する

次の例は、リンクの上にマウスポインターを置いたときにリンクの色を変更する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

次のリンクが生成されます。次に、このリンクの上にマウスを移動すると、色が黄色に変わることがわかります。

アクティブリンクの色を変更する

次の例は、アクティブなリンクの色を変更する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

次のリンクが生成されます。ユーザーがクリックすると、色がピンクに変わります。

CSS-テーブル

このチュートリアルでは、CSSを使用してHTMLテーブルのさまざまなプロパティを設定する方法を学びます。あなたはテーブルの次のプロパティを設定することができます-

border-collapse は、ブラウザーが互いに接する隣接する境界線の外観を制御するか、各セルがスタイルを維持するかを指定します。
border-spacing は、テーブルセル間に表示される幅を指定します。
caption-side キャプションは、<caption>要素に表示されます。デフォルトでは、これらはドキュメントのテーブルの上に表示されます。 _caption-side_プロパティを使用して、テーブルキャプションの配置を制御します。
empty-cells は、セルが空の場合に境界線を表示するかどうかを指定します。
table-layout を使用すると、ブラウザーはテーブル全体をロードしてからレンダリングするのではなく、最初の幅プロパティを列の残りの部分に使用して、テーブルのレイアウトを高速化できます。

次に、これらのプロパティの使用方法を例とともに示します。

border-collapseプロパティ

このプロパティには、_collapse_と_separate_の2つの値を設定できます。次の例では、両方の値を使用します-

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}

         td.a {
            border-style:dotted;
            border-width:3px;
            border-color:#000000;
            padding: 10px;
         }
         td.b {
            border-style:solid;
            border-width:3px;
            border-color:#333333;
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br/>

      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

それは次の結果を生成します-

border-spacingプロパティ

border-spacingプロパティは、隣接するセルを分離する距離を指定します。ボーダー。 1つまたは2つの値を取ることができます。これらは長さの単位でなければなりません。

1つの値を指定すると、垂直と水平の両方の境界線に適用されます。または、2つの値を指定することができます。その場合、最初の値は水平方向の間隔を指し、2番目は垂直方向の間隔を指します-

注-残念ながら、このプロパティはNetscape 7またはIE 6では機能しません。

<style type="text/css">
  /*If you provide one value*/
   table.example {border-spacing:10px;}
  /*This is how you can provide two values*/
   table.example {border-spacing:10px; 15px;}
</style>

今、前の例を変更して、効果を見てみましょう-

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>

      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br/>

      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>

   </body>
</html>

それは次の結果を生成します-

キャプション側のプロパティ

caption-sideプロパティを使用すると、<caption>要素のコンテンツをテーブルとの関係で配置する場所を指定できます。次の表に、可能な値を示します。

このプロパティには、top、bottom、left、または_right_の4つの値のいずれかを指定できます。次の例では、各値を使用しています。

注-これらのプロパティは、IEブラウザでは機能しない場合があります。

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>

      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br/>

      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br/>

      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br/>

      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>

   </body>
</html>

それは次の結果を生成します-

empty-cellsプロパティ

empty-cellsプロパティは、コンテンツのないセルに境界線を表示するかどうかを示します。

このプロパティには、show、hide _、 inherit_の3つの値のいずれかを指定できます。

これは、<table>要素内の空のセルの境界線を非表示にするために使用されるempty-cellsプロパティです。

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>

      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>

         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>

         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>

   </body>
</html>

それは次の結果を生成します-

table-layoutプロパティ

table-layoutプロパティは、ブラウザがテーブルをレンダリングまたはレイアウトする方法を制御するのに役立つと想定されています。

このプロパティには、fixed、auto、または_inherit_の3つの値のいずれかを指定できます。

次の例は、これらのプロパティの違いを示しています。

注-このプロパティは多くのブラウザでサポートされていないため、このプロパティに依存しないでください。

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>

   <body>

      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br/>

      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>

   </body>
</html>

それは次の結果を生成します-

CSS-ボーダー

_border_プロパティを使用すると、要素を表すボックスの境界線の外観を指定できます。あなたが変更できる境界線の3つのプロパティがあります-

border-color は境界線の色を指定します。
border-style は、境界線を実線、破線、二重線、または他の可能な値のいずれにするかを指定します。
border-width は、境界線の幅を指定します。

次に、これらのプロパティの使用方法を例とともに示します。

border-colorプロパティ

border-colorプロパティを使用すると、要素を囲む境界線の色を変更できます。プロパティを使用して、要素の境界線の下、左、上、および右の色を個別に変更できます-

border-bottom-color は、下の境界線の色を変更します。
border-top-color は、上部の境界線の色を変更します。
border-left-color は、左境界線の色を変更します。
border-right-color は、右境界線の色を変更します。

次の例は、これらすべてのプロパティの効果を示しています-

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900;/*Green*/
            border-top-color:#FF0000;   /*Red*/
            border-left-color:#330000;  /*Black*/
            border-right-color:#0000CC; /*Blue*/
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;       /*Green*/
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>

      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

それは次の結果を生成します-

ボーダースタイルのプロパティ

境界線スタイルのプロパティを使用すると、境界線の次のスタイルのいずれかを選択することができます-

none -ボーダーなし。（border-width：0に相当;）
solid -境界線は単一の実線です。
dotted -ボーダーは一連のドットです。
破線-境界線は一連の短い線です。
double -境界線は2本の実線です。
groove -ボーダーはページに刻まれているように見えます。
ridge -境界線は溝の反対に見えます。
インセット-枠線は、ボックスがページに埋め込まれているように見えます。
outset -Borderは、キャンバスから出てきたようにボックスを表示します。
hidden -表要素の境界線競合解決の点を除いて、noneと同じです。

次のプロパティを使用して、要素の下、左、上、および右の境界線のスタイルを個別に変更できます-

border-bottom-style は、下の境界線のスタイルを変更します。
border-top-style は、上部の境界線のスタイルを変更します。
border-left-style は、左ボーダーのスタイルを変更します。
border-right-style は、右境界線のスタイルを変更します。

次の例は、これらすべての境界線スタイルを示しています-

<html>
   <head>
   </head>

   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>

      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>

      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>

      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>

      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>

      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>

      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>

      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>

      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>

      <p style = "border-width:4px;
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

それは次の結果を生成します-

border-widthプロパティ

border-widthプロパティを使用すると、要素の境界線の幅を設定できます。このプロパティの値は、px、pt、またはcmの長さのいずれか、または_thin、medium、thickに設定する必要があります。

次のプロパティを使用して、要素の下、上、左、および右の境界線の幅を個別に変更できます-

border-bottom-width は、下の境界線の幅を変更します。
border-top-width は、上部の境界線の幅を変更します。
border-left-width は左ボーダーの幅を変更します。
border-right-width は、右境界線の幅を変更します。

次の例は、これらすべての境界線の幅を示しています-

<html>
   <head>
   </head>

   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>

      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>

      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>

      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>

      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>

      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

それは次の結果を生成します-

ショートハンドを使用した境界線プロパティ

borderプロパティを使用すると、1つのプロパティで線の色、スタイル、および幅を指定できます-

次の例は、3つのプロパティすべてを使用して1つのプロパティにする方法を示しています。これは、要素の周囲に境界線を設定するために最も頻繁に使用されるプロパティです。

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

それは次の結果を生成します-

CSS-マージン

_margin_プロパティは、HTML要素の周囲のスペースを定義します。負の値を使用してコンテンツをオーバーラップさせることができます。

marginプロパティの値は、子要素に継承されません。隣接する垂直方向の余白（上下の余白）は互いに折りたたまれ、ブロック間の距離は余白の合計ではなく、2つの余白のうち大きい方、または両方が1つの余白と同じサイズになることを忘れないでください等しい。

要素のマージンを設定するには、次のプロパティがあります。

margin は、1つの宣言でマージンプロパティを設定するための簡略プロパティを指定します。
margin-bottom は、要素の下マージンを指定します。
margin-top は、要素の上マージンを指定します。
margin-left は、要素の左マージンを指定します。
margin-right は、要素の右マージンを指定します。

次に、これらのプロパティの使用方法を例とともに示します。

マージンプロパティ

マージンプロパティを使用すると、1つの宣言で4つのマージンのすべてのプロパティを設定できます。ここに段落の周りにマージンを設定する構文があります-

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "margin: 15px; border:1px solid black;">
         all four margins will be 15px
      </p>

      <p style = "margin:10px 2%; border:1px solid black;">
         top and bottom margin will be 10px, left and right margin will be 2%
         of the total width of the document.
      </p>

      <p style = "margin: 10px 2% -10px; border:1px solid black;">
         top margin will be 10px, left and right margin will be 2% of the
         total width of the document, bottom margin will be -10px
      </p>

      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total
         width of the document, bottom margin will be -10px, left margin
         will be set by the browser
      </p>
   </body>
</html>

それは次の結果を生成します-

margin-bottomプロパティ

margin-bottomプロパティを使用すると、要素の下マージンを設定できます。長さ、％、またはautoの値を持つことができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "margin-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom margin
      </p>

      <p style = "margin-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

margin-topプロパティ

margin-topプロパティを使用すると、要素の上マージンを設定できます。長さ、％、またはautoの値を持つことができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "margin-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top margin
      </p>

      <p style = "margin-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

margin-leftプロパティ

margin-leftプロパティを使用すると、要素の左マージンを設定できます。長さ、％、またはautoの値を持つことができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left margin
      </p>

      <p style = "margin-left: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

margin-rightプロパティ

margin-rightプロパティを使用すると、要素の右マージンを設定できます。長さ、％、またはautoの値を持つことができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right margin
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right margin in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

CSS-リスト

リストは、番号付きまたは箇条書きのセットを伝えるのに非常に役立ちます。この章では、CSSを使用してリストの種類、位置、スタイルなどを制御する方法を説明します。

リストを制御するために使用できる次の5つのCSSプロパティがあります-

list-style-type を使用すると、マーカーの形状または外観を制御できます。
list-style-position は、2番目の行に折り返す長いポイントを最初の行に揃えるか、マーカーの開始点の下で開始するかを指定します。
list-style-image は、箇条書きまたは番号ではなくマーカーの画像を指定します。
list-style は、前述のプロパティの省略形として機能します。
marker-offset は、マーカーとリスト内のテキスト間の距離を指定します。

次に、これらのプロパティの使用方法を例とともに示します。

list-style-typeプロパティ

_list-style-type_プロパティを使用すると、順序付けられていないリストの場合の箇条書き（マーカーとも呼ばれる）の形状またはスタイル、および順序付けられたリストの番号付け文字のスタイルを制御できます。

ここに順序なしリストに使用できる値があります-

Sr.No.	Value & Description
1	none NA
2	disc (default) 塗りつぶされた円
3	circle 空の円
4	square 塗りつぶされた正方形

順序付きリストに使用できる値は次のとおりです-

Value	Description	Example
decimal	Number	1,2,3,4,5
decimal-leading-zero	0 before the number	01, 02, 03, 04, 05
lower-alpha	Lowercase alphanumeric characters	a, b, c, d, e
upper-alpha	Uppercase alphanumeric characters	A, B, C, D, E
lower-roman	Lowercase Roman numerals	i, ii, iii, iv, v
upper-roman	Uppercase Roman numerals	I, II, III, IV, V
lower-greek	The marker is lower-greek	alpha, beta, gamma
lower-latin	The marker is lower-latin	a, b, c, d, e
upper-latin	The marker is upper-latin	A, B, C, D, E
hebrew	The marker is traditional Hebrew numbering
armenian	The marker is traditional Armenian numbering
georgian	The marker is traditional Georgian numbering
cjk-ideographic	The marker is plain ideographic numbers
hiragana	The marker is hiragana	a, i, u, e, o, ka, ki
katakana	The marker is katakana	A, I, U, E, O, KA, KI
hiragana-iroha	The marker is hiragana-iroha	i, ro, ha, ni, ho, he, to
katakana-iroha	The marker is katakana-iroha	I, RO, HA, NI, HO, HE, TO

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>

      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>

      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

それは次の結果を生成します-

list-style-positionプロパティ

_list-style-position_プロパティは、マーカーが箇条書きを含むボックスの内側と外側のどちらに表示されるかを示します。それは2つの値のいずれかを持つことができます-

Sr.No.

Value & Description

1

none

NA

2

inside

テキストが2行目にある場合、テキストはマーカーの下に折り返されます。また、リストの値がoutsideの場合、テキストの開始位置にインデントされて表示されます。

3

outside

テキストが2行目にある場合、テキストは最初の行の先頭（箇条書きの右側）に揃えられます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>

      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

それは次の結果を生成します-

list-style-imageプロパティ

_list-style-image_を使用すると、独自の箇条書きスタイルを使用できるように画像を指定できます。構文はbackground-imageプロパティに似ており、プロパティの値を開始するurlの文字の後に括弧で囲まれたURLが続きます。指定された画像が見つからない場合、デフォルトの箇条書きが使用されます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

それは次の結果を生成します-

リストスタイルのプロパティ

_list-style_を使用すると、すべてのリストプロパティを1つの式に指定できます。これらのプロパティは任意の順序で表示できます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

それは次の結果を生成します-

marker-offsetプロパティ

_marker-offset_プロパティを使用すると、マーカーとそのマーカーに関連するテキスト間の距離を指定できます。その値は、次の例に示すように長さでなければなりません-

残念ながら、このプロパティはIE 6またはNetscape 7ではサポートされていません。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>

      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

それは次の結果を生成します-

CSS-パディング

_padding_プロパティを使用すると、要素のコンテンツとその境界の間に表示されるスペースの量を指定できます-

この属性の値は、長さ、パーセンテージ、または_inherit_のいずれかでなければなりません。値が_inherit_の場合、親要素と同じパディングが設定されます。パーセンテージが使用される場合、パーセンテージは収容ボックスのパーセンテージです。

次のCSSプロパティを使用してリストを制御できます。また、次のプロパティを使用して、ボックスの両側にパディングの異なる値を設定することができます-

padding-bottom は、要素の下部のパディングを指定します。
padding-top は、要素の上部パディングを指定します。
padding-left は、要素の左パディングを指定します。
padding-right は、要素の右パディングを指定します。
padding は、前述のプロパティの省略形として機能します。

次に、これらのプロパティの使用方法を例とともに示します。

padding-bottomプロパティ

_padding-bottom_プロパティは、要素の下部のパディング（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom padding
      </p>

      <p style = "padding-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom padding in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

padding-topプロパティ

_padding-top_プロパティは、要素の上部パディング（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top padding
      </p>

      <p style = "padding-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top padding in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

padding-leftプロパティ

_padding-left_プロパティは、要素の左余白（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left padding
      </p>

      <p style = "padding-left: 15%; border:1px solid black;">
         This is another paragraph with a specified left padding in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

padding-rightプロパティ

_padding-right_プロパティは、要素の右パディング（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right padding
      </p>

      <p style = "padding-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right padding in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

パディングプロパティ

_padding_プロパティは、要素の左、右、上、下のパディング（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding: 15px; border:1px solid black;">
         all four padding will be 15px
      </p>

      <p style = "padding:10px 2%; border:1px solid black;">
         top and bottom padding will be 10px, left and right
         padding will be 2% of the total width of the document.
      </p>

      <p style = "padding: 10px 2% 10px; border:1px solid black;">
         top padding will be 10px, left and right padding will
         be 2% of the total width of the document, bottom padding will be 10px
      </p>

      <p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
         top padding will be 10px, right padding will be 2% of
         the total width of the document, bottom padding and top padding will be 10px
      </p>
   </body>
</html>

それは次の結果を生成します-

CSS-カーソル

CSSの_cursor_プロパティを使用すると、ユーザーに表示するカーソルのタイプを指定できます。

このプロパティの良い使い方の1つは、フォームの送信ボタンに画像を使用することです。デフォルトでは、カーソルがリンク上に移動すると、カーソルがポインターから手に変わります。ただし、フォームの送信ボタンのフォームは変更されません。したがって、送信ボタンである画像の上に誰かがカーソルを合わせると、画像がクリック可能であるという視覚的な手がかりが得られます。

次の表は、カーソルプロパティの可能な値を示しています-

Sr.No.	Value & Description
1	auto カーソルの形状は、カーソルが置かれているコンテキスト領域に依存します。たとえば、テキストのI、リンクの手などです…
2	crosshair 十字線またはプラス記号
3	default 矢印
4	pointer 指差し（IE 4では、この値は手です）
5	move Iバー
6	e-resize カーソルは、ボックスの端を右（東）に移動することを示します
7	ne-resize カーソルは、ボックスの端を上下（北/東）に移動することを示します
8	nw-resize カーソルは、ボックスの端を上下に移動することを示します（北/西）
9	n-resize カーソルは、ボックスの端を上に移動することを示します（北）
10	se-resize カーソルは、ボックスの端を上下（南/東）に移動することを示します
11	sw-resize カーソルは、ボックスの端を上下に移動することを示します（南/西）
12	s-resize カーソルは、ボックスの端を下（南）に移動することを示します
13	w-resize カーソルは、ボックスの端を左（西）に移動することを示します
14	text Iバー
15	wait 砂時計
16	help ヘルプボタン上での使用に最適な疑問符またはバルーン
17	<url> カーソル画像ファイルのソース

注-これらの値のみを使用して、ユーザーに役立つ情報を追加しようとする必要があり、場所によっては、そのカーソルが表示されることが期待されます。たとえば、誰かがリンクにカーソルを合わせたときに十字線を使用すると、訪問者が混乱する可能性があります。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p>Move the mouse over the words to see the cursor change:</p>

      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>

      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>

      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>

      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

それは次の結果を生成します-

CSS-アウトライン

アウトラインは境界線に非常に似ていますが、大きな違いもほとんどありません-

アウトラインはスペースを占有しません。
アウトラインは長方形である必要はありません。
アウトラインは常にすべての側面で同じです。要素の異なる側面に異なる値を指定することはできません。

注-アウトラインプロパティは、IE 6またはNetscape 7ではサポートされていません。

CSSを使用して、次のアウトラインプロパティを設定できます。

outline-width プロパティは、アウトラインの幅を設定するために使用されます。
outline-style プロパティは、アウトラインの線のスタイルを設定するために使用されます。
outline-color プロパティは、アウトラインの色を設定するために使用されます。
outline プロパティは、上記の3つのプロパティすべてを1つのステートメントに設定するために使用されます。

outline-widthプロパティ

_outline-width_プロパティは、ボックスに追加されるアウトラインの幅を指定します。その値は、border-width属性と同様に、長さ、または_thin、medium、thick、_のいずれかの値である必要があります。

幅0ピクセルは、アウトラインがないことを意味します。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br/>

      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br/>

      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

それは次の結果を生成します-

アウトラインスタイルのプロパティ

_outline-style_プロパティは、要素を囲む線のスタイル（実線、点線、または破線）を指定します。それは次の値のいずれかを取ることができます-

none -ボーダーなし。（outline-width：0と同等;）
solid -アウトラインは単一の実線です。
dotted -アウトラインは一連のドットです。
破線-アウトラインは一連の短い線です。
double -アウトラインは2本の実線です。
groove -アウトラインはページに刻まれているように見えます。
ridge -アウトラインは溝の反対に見えます。
インセット-アウトラインは、ボックスがページに埋め込まれているように見えます。
outset -アウトラインは、キャンバスから出てきたようにボックスを表示します。
hidden -なしと同じ。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br/>

      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br/>

      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

それは次の結果を生成します-

outline-colorプロパティ

_outline-color_プロパティを使用すると、アウトラインの色を指定できます。その値は、colorおよびborder-colorプロパティと同様に、色名、16進数の色、またはRGB値のいずれかでなければなりません。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br/>

      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br/>

      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

それは次の結果を生成します-

アウトラインプロパティ

_outline_プロパティは、前述の3つのプロパティのいずれかの値を、単一のステートメント以外の任意の順序で指定できるようにする略記プロパティです。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br/>

      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br/>

      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

それは次の結果を生成します-

CSS-寸法

つまり、すべてのボックスを囲む境界線を見ました。要素、各ボックス内に表示できるパディング、およびそれらの周囲に配置できるマージン。このチュートリアルでは、ボックスの寸法を変更する方法を学びます。

ボックスの寸法を制御できる次のプロパティがあります。

height プロパティは、ボックスの高さを設定するために使用されます。
width プロパティは、ボックスの幅を設定するために使用されます。
line-height プロパティは、テキストの行の高さを設定するために使用されます。
max-height プロパティは、ボックスの最大高さを設定するために使用されます。
min-height プロパティは、ボックスの最小高さを設定するために使用されます。
max-width プロパティは、ボックスの最大幅を設定するために使用されます。
min-width プロパティは、ボックスの最小幅を設定するために使用されます。

高さと幅のプロパティ

_height_および_width_プロパティを使用すると、ボックスの高さと幅を設定できます。これらは、長さ、パーセンテージ、またはキーワードautoの値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400pixels wide and 100 pixels high
      </p>
   </body>
</html>

それは次の結果を生成します-

line-heightプロパティ

_line-height_プロパティを使用すると、テキストの行間のスペースを増やすことができます。 line-heightプロパティの値は、数値、長さ、またはパーセンテージです。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
         This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
         This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
      </p>
   </body>
</html>

それは次の結果を生成します-

max-heightプロパティ

_max-height_プロパティを使用すると、ボックスの最大高さを指定できます。 max-heightプロパティの値は、数値、長さ、またはパーセンテージです。

注-このプロパティは、Netscape 7またはIE 6のいずれでも動作しません。

ここに例があります-

<html>
   <head>
   </head>
   <body>
      <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84"/>
   </body>
</html>

それは次の結果を生成します-

min-heightプロパティ

_min-height_プロパティを使用すると、ボックスの最小の高さを指定できます。 min-heightプロパティの値は、数値、長さ、またはパーセンテージです。

注-このプロパティは、Netscape 7またはIE 6のいずれでも動作しません。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84"/>
   </body>
</html>

それは次の結果を生成します-

max-widthプロパティ

_max-width_プロパティを使用すると、ボックスの最大幅を指定できます。 max-widthプロパティの値は、数値、長さ、またはパーセンテージです。

注-このプロパティは、Netscape 7またはIE 6のいずれでも動作しません。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
      </p>
      <img alt = "logo" src = "/images/css.gif" width = "95" height = "84"/>
   </body>
</html>

これにより、次の結果が生成されます–

min-widthプロパティ

_min-width_プロパティを使用すると、ボックスの最小幅を指定できます。 min-widthプロパティの値は、数値、長さ、またはパーセンテージです。

注-このプロパティは、Netscape 7またはIE 6のいずれでも動作しません。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 100px high and min width is 400px
         This paragraph is 100px high and min width is 400px
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84"/>
   </body>
</html>

それは次の結果を生成します-

序章

2018年9月、W3C CSS Scrollbars は、CSSを使用してスクロールバーの外観をカスタマイズするための仕様を定義しました。

2020年の時点で、 96 % o fインターネットユーザーは、CSSスクロールバースタイルをサポートするブラウザーを実行しています。ただし、BlinkとWebKit、およびFirefoxブラウザーをカバーするために2セットのCSSルールを作成する必要があります。

このチュートリアルでは、CSSを使用してスクロールバーをカスタマイズし、最新のブラウザーをサポートする方法を学習します。

前提条件

この記事をフォローするには、次のものが必要です。

ベンダープレフィックス、疑似要素、およびグレースフルデグラデーションの概念に精通していること。

Chrome、Edge、Safariでのスクロールバーのスタイリング

現在、Chrome、Edge、Safariのスタイリングスクロールバーは、ベンダープレフィックスの疑似要素-webkit-scrollbarで利用できます。

::-webkit-scrollbar、::-webkit-scrollbar-track、および::webkit-scrollbar-thumb疑似要素を使用する例を次に示します。

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

これらのCSSルールで作成されたスクロールバーのスクリーンショットは次のとおりです。

このコードは、Chrome、Edge、Safariの最新リリースで機能します。

残念ながら、この仕様はW3C によって正式に廃止されており、今後廃止される可能性があります。

Firefoxでのスクロールバーのスタイリング

現在、Firefoxのスタイリングスクロールバーは、新しいCSSスクロールバーで使用できます。

scrollbar-widthおよびscrollbar-colorプロパティを使用する例を次に示します。

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */ 
}

これらのCSSルールで作成されたスクロールバーのスクリーンショットは次のとおりです。

この仕様は、スクロールバーの色を制御するための-webkit-scrollbar仕様といくつかの共通点があります。ただし、現在、「トラックサム」のパディングと丸みを変更するためのサポートはありません。

将来性のあるスクロールバースタイルの構築

-webkit-scrollbarとCSS Scrollbarsの両方の仕様をサポートする方法でCSSを作成できます。

scrollbar-width、scrollbar-color、::-webkit-scrollbar、::-webkit-scrollbar-track、::webkit-scrollbar-thumbを使用する例を次に示します。

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

BlinkおよびWebKitブラウザーは、認識しないルールを無視し、-webkit-scrollbarルールを適用します。 Firefoxブラウザは、認識しないルールを無視し、CSS Scrollbarsルールを適用します。 BlinkおよびWebKitブラウザーが-webkit-scrollbar仕様を完全に廃止すると、新しいCSS Scrollbars仕様に正常にフォールバックします。

結論

この記事では、CSSを使用してスクロールバーのスタイルを設定する方法と、これらのスタイルが最新のブラウザーで確実に認識されるようにする方法を紹介しました。

デフォルトのスクロールバーを非表示にし、JavaScriptを使用して高さとスクロール位置を検出することにより、スクロールバーをシミュレートすることもできます。ただし、これらのアプローチでは、慣性スクロールなどのエクスペリエンスを再現する際に制限が発生します（たとえば、トラックパッドを介してスクロールするときのモーションの減衰）。

CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。

CSS-可視性

_visibility_というプロパティを使用すると、ビューから要素を非表示にできます。このプロパティとJavaScriptを使用して、非常に複雑なメニューと非常に複雑なWebページレイアウトを作成できます。

可視性プロパティを使用して、ユーザーが表示する必要がある場合にのみ表示されるエラーメッセージを非表示にするか、ユーザーがオプションを選択するまでクイズの回答を非表示にすることができます。

注-ソースコードには不可視の段落にあるものがすべて含まれているため、クレジットカードの詳細やパスワードなどの機密情報を隠すためにこれを使用しないでください。

_visibility_プロパティは、次の表にリストされている値を取ることができます-

Sr.No.

Value & Description

1

visible

ボックスとその内容がユーザーに表示されます。

2

hidden

ボックスとそのコンテンツは非表示になりますが、それでもページのレイアウトに影響します。

3

collapse

これは、動的なテーブル列と行効果でのみ使用されます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p>
         This paragraph should be visible in normal way.
      </p>

      <p style = "visibility:hidden;">
         This paragraph should not be visible.
      </p>
   </body>
</html>

それは次の結果を生成します-

CSS - ポジショニング

CSSは、HTML要素を配置するのに役立ちます。任意の場所に任意のHTML要素を配置できます。要素をページ内の自然な位置に対して相対的に配置するか、親要素に基づいて絶対的に配置するかを指定できます。

今、私たちは例ですべてのCSS位置決め関連プロパティを見るでしょう-

相対位置

相対配置は、通常表示される場所を基準にしてHTML要素の位置を変更します。したがって、「left：20」は、要素の左位置に20ピクセルを追加します。

2つの値_top_および_left_を_position_プロパティとともに使用して、HTMLドキュメント内の任意の場所にHTML要素を移動できます。

左に移動-_left_に負の値を使用します。
右に移動-_left_に正の値を使用します。
上に移動-_top_に負の値を使用します。
下に移動-_top_に正の値を使用します。

注-_top_および_left_と同様に、_bottom_または_right_の値も使用できます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

それは次の結果を生成します-

絶対位置

*position：absolute* の要素は、画面の左上隅を基準に指定された座標に配置されます。

2つの値_top_および_left_を_position_プロパティとともに使用して、HTMLドキュメント内の任意の場所にHTML要素を移動できます。

左に移動-_left_に負の値を使用します。
右に移動-_left_に正の値を使用します。
上に移動-_top_に負の値を使用します。
下に移動-_top_に正の値を使用します。

注-topおよびleftと同じ方法で、_bottom_または_right_の値も使用できます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

固定位置

固定配置では、スクロールに関係なく、要素の位置をページ上の特定のスポットに固定できます。指定された座標は、ブラウザウィンドウに相対的です。

2つの値_top_および_left_を_position_プロパティとともに使用して、HTMLドキュメント内の任意の場所にHTML要素を移動できます。

左に移動-_left_に負の値を使用します。
右に移動-_left_に正の値を使用します。
上に移動-_top_に負の値を使用します。
下に移動-_top_に正の値を使用します。

注-_top_および_left_と同様に、_bottom_または_right_の値も使用できます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
         This div has fixed positioning.
      </div>
   </body>
</html>

CSS-レイヤー

CSSを使用すると、さまざまな部門のレイヤーを作成できます。 CSSレイヤーは、互いに重なり合う要素に_z-index_プロパティを適用することを指します。

レイヤーの効果を作成するには、z-indexプロパティを_position_プロパティとともに使用します。どの要素を上に配置し、どの要素を下に配置するかを指定できます。

z-indexプロパティは、より複雑なWebページレイアウトを作成するのに役立ちます。以下は、CSSでレイヤーを作成する方法を示す例です。

<html>
   <head>
   </head>

   <body>
      <div style = "background-color:red;
         width:300px;
         height:100px;
         position:relative;
         top:10px;
         left:80px;
         z-index:2">
      </div>

      <div style = "background-color:yellow;
         width:300px;
         height:100px;
         position:relative;
         top:-60px;
         left:35px;
         z-index:1;">
      </div>

      <div style = "background-color:green;
         width:300px;
         height:100px;
         position:relative;
         top:-220px;
         left:120px;
         z-index:3;">
      </div>
   </body>
</html>

それは次の結果を生成します-

CSS-疑似クラス

CSS擬似クラスは、一部のセレクターに特殊効果を追加するために使用されます。これらの効果を使用するためにJavaScriptやその他のスクリプトを使用する必要はありません。擬似クラスの簡単な構文は次のとおりです-

selector:pseudo-class {property: value}

CSSクラスは、擬似クラスで使用することもできます-

selector.class:pseudo-class {property: value}

最も一般的に使用される擬似クラスは次のとおりです-

Sr.No.	Value & Description
1	:link このクラスを使用して、未訪問のリンクに特別なスタイルを追加します。
2	:visited このクラスを使用して、訪問したリンクに特別なスタイルを追加します。
3	:hover このクラスを使用して、要素の上にマウスを置いたときに要素に特別なスタイルを追加します。
4	:active このクラスを使用して、アクティブな要素に特別なスタイルを追加します。
5	:focus このクラスを使用して、要素にフォーカスがある間に要素に特別なスタイルを追加します。
6	:first-child このクラスを使用して、他の要素の最初の子である要素に特別なスタイルを追加します。
7	:lang このクラスを使用して、指定された要素で使用する言語を指定します。

a：hoverは、CSS定義でa：linkとa：visitedの後に来なければ効果がありません。
有効にするためには、CSS定義のa：hoverの後にa：activeを指定する必要があります。
擬似クラス名は大文字と小文字が区別されません。
疑似クラスはCSSクラスとは異なりますが、組み合わせることができます。

：link擬似クラス

次の例は、_：link_クラスを使用してリンクの色を設定する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

それは次の黒いリンクを生成します-

：visited擬似クラス

以下は、_：visited_クラスを使用して訪問済みリンクの色を設定する方法を示す例です。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

これにより、次のリンクが生成されます。このリンクをクリックすると、色が緑に変わります。

：hover擬似クラス

次の例は、_：hover_クラスを使用して、リンク上にマウスポインターを移動したときにリンクの色を変更する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

次のリンクが生成されます。このリンクにマウスを合わせると、色が黄色に変わることがわかります。

：active疑似クラス

次の例は、_：active_クラスを使用してアクティブなリンクの色を変更する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

次のリンクが生成されます。ユーザーがクリックすると、色がピンクに変わります。

：focus疑似クラス

次の例は、_：focus_クラスを使用して、フォーカスされたリンクの色を変更する方法を示しています。有効な値は、有効な形式の色名です。

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

次のリンクが生成されます。このリンクがフォーカスされると、色がオレンジに変わります。フォーカスを失うと、色が元に戻ります。

：first-child擬似クラス

_：first-child_擬似クラスは、別の要素の最初の子である指定された要素と一致し、他の要素の最初の子であるその要素に特別なスタイルを追加します。

IEで：first-childを動作させるには、ドキュメントの先頭で<！DOCTYPE>を宣言する必要があります。

たとえば、すべての<div>要素の最初の段落をインデントするには、この定義を使用できます-

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>

      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>

      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>

   </body>
</html>

それは次の結果を生成します-

：lang擬似クラス

言語擬似クラス_：lang_を使用すると、特定のタグの言語設定に基づいてセレクターを構築できます。

このクラスは、特定の言語構成に対して異なる規則を持つ複数の言語にアピールする必要があるドキュメントで役立ちます。たとえば、フランス語では通常、引用符に山括弧（<および>）を使用しますが、英語では引用符（ 'および'）を使用します。

この違いに対処する必要があるドキュメントでは、：lang疑似クラスを使用して、引用符を適切に変更できます。次のコードは、使用されている言語に合わせて<blockquote>タグを適切に変更します-

<html>
   <head>
      <style type = "text/css">

        /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>

   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

：langセレクターは、ドキュメント内のすべての要素に適用されます。ただし、すべての要素がquotesプロパティを使用するわけではないため、ほとんどの要素では効果が透過的です。

それは次の結果を生成します-

CSS-擬似要素

CSS疑似要素は、一部のセレクターに特殊効果を追加するために使用されます。これらの効果を使用するためにJavaScriptやその他のスクリプトを使用する必要はありません。擬似要素の簡単な構文は次のとおりです-

selector:pseudo-element {property: value}

CSSクラスはまた、擬似要素で使用することができます-

selector.class:pseudo-element {property: value}

最も一般的に使用される擬似要素は次のとおりです-

Sr.No.	Value & Description
1	:first-line この要素を使用して、セレクター内のテキストの最初の行に特別なスタイルを追加します。
2	:first-letter この要素を使用して、セレクター内のテキストの最初の文字に特別なスタイルを追加します。
3	:before この要素を使用して、要素の前にコンテンツを挿入します。
4	:after この要素を使用して、要素の後にコンテンツを挿入します。

：first-line疑似要素

次の例は、_：first-line_要素を使用して、ドキュメント内の要素の最初の行に特殊効果を追加する方法を示しています。

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>

      <p>
         The first line of this paragraph will be underlined as defined in the
         CSS rule above. Rest of the lines in this paragraph will remain normal.
         This example shows how to use :first-line pseduo element to give effect
         to the first line of any HTML element.
      </p>
   </body>
</html>

それは次のリンクを生成します-

：first-letter擬似要素

次の例は、_：first-letter_要素を使用して、ドキュメント内の要素の最初の文字に特殊効果を追加する方法を示しています。

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>

      <p>
         The first character of this paragraph will be 5em big as defined in the
         CSS rule above. Rest of the characters in this paragraph will remain
         normal. This example shows how to use :first-letter pseduo element
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

それは次の黒いリンクを生成します-

：before擬似要素

次の例は、_：before_要素を使用して、要素の前にコンテンツを追加する方法を示しています。

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

それは次の黒いリンクを生成します-

：after擬似要素

次の例は、_：after_要素を使用して、任意の要素の後にコンテンツを追加する方法を示しています。

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

それは次の黒いリンクを生成します-

CSS-@ルール

この章では、次の重要な@ルールについて説明します-

* @ import：*ルールは、別のスタイルシートを現在のスタイルシートにインポートします。
@ charset ルールは、スタイルシートが使用する文字セットを示します。
@ font-face ルールは、ドキュメントで使用するフォントフェイスを完全に記述するために使用されます。
*！important *ルールは、ユーザー定義のルールが作成者のスタイルシートよりも優先されることを示します。

注-以降の章でカバーする他の@ルールがあります。

@importルール

@importルールを使用すると、別のスタイルシートからスタイルをインポートできます。スタイルシートの最初のルールの前に表示され、その値はURLです。

次の2つの方法のいずれかで書くことができます-

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

@importルールの重要性は、モジュールアプローチでスタイルシートを開発できることです。さまざまなスタイルシートを作成して、必要な場所に含めることができます。

@charsetルール

ASCIIまたはISO-8859-1以外の文字セットを使用してドキュメントを作成している場合、スタイルシートが書き込まれている文字セットを示すために、スタイルシートの上部に@charsetルールを設定できます。

@charsetルールは、スタイルシートの直前にスペースを入れずに記述する必要があります。値は引用符で囲まれ、標準の文字セットの1つである必要があります。たとえば-

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

@ font-faceルール

@ font-faceルールは、ドキュメントで使用するフォントフェイスを完全に記述するために使用されます。 @ font-faceは、ダウンロード用のフォントの場所を定義するためにも使用できますが、これは実装固有の制限に達する可能性があります。

一般的に、@ font-faceは非常に複雑であり、フォントメトリックの専門家以外には使用しないことをお勧めします。

ここに例があります-

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

！importantルール

カスケードスタイルシートのカスケード。これは、スタイルがブラウザーによって読み取られるのと同じ順序で適用されることを意味します。最初のスタイルが適用され、次に2番目のスタイルが適用されます。

！importantルールは、CSSをカスケードする方法を提供します。また、常に適用されるルールも含まれます。！importantプロパティを持つルールは、CSSドキュメントのどこに表示されていても常に適用されます。

たとえば、次のスタイルシートでは、最初に適用されるスタイルプロパティが赤であっても、段落テキストは黒になります。

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

そのため、プロパティが常に適用されるようにする場合は、！importantプロパティをタグに追加します。したがって、段落テキストを常に赤にするには、次のように記述する必要があります-

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>finddevguides.com</p>
   </body>
</html>

ここで、_p \ {color：＃ff0000！important;を作成しました。 } _必須。別のルール_p \ {color：＃000000;を定義した場合でも、このルールは常に適用されます。 } _

それは次の結果を生成します-

CSSフィルター-テキストと画像の効果

CSSフィルターを使用すると、画像やその他のグラフィックを使用せずに、Webページのテキスト、画像、その他の側面に特殊効果を追加できます。 フィルターはInternet Explorer 4.0でのみ機能します。複数のブラウザー用にサイトを開発している場合、CSSフィルターを使用するのは得策ではない可能性があります。

この章では、各CSSフィルターの詳細を確認します。これらのフィルタはブラウザで機能しない場合があります。

アルファチャンネル

アルファチャンネルフィルターは、オブジェクトの不透明度を変更し、背景に溶け込みます。次のパラメータは、このフィルタで使用することができます-

Sr.No.	Parameter & Description
1	opacity 不透明度のレベル。 0は完全に透明、100は完全に不透明です。
2	finishopacity オブジェクトのもう一方の端の不透明度のレベル。
3	style 不透明度グラデーションの形状。 0 =均一 1 =線形 2 =放射状 3 =長方形
4	startX 不透明度のグラデーションを開始するX座標。
5	startY 不透明度のグラデーションを開始するY座標。
6	finishX 終了する不透明度グラデーションのX座標。
7	finishY 終了する不透明度のグラデーションのY座標。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png" alt = "CSS Logo"
         style = "Filter: Alpha(Opacity=100,
         FinishOpacity = 0,
         Style = 2,
         StartX = 20,
         StartY = 40,
         FinishX = 0,
         FinishY = 0)"/>
      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: blue;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
   </body>
</html>

それは次の結果を生成します-

モーションブラー

モーションブラーを使用して、方向と強さのあるぼやけた画像またはテキストを作成します。次のパラメータは、このフィルタで使用することができます-

Sr.No.

Parameter & Description

1

add

正しいか間違っているか。 trueの場合、画像は不鮮明な画像に追加されます。 falseの場合、画像は不鮮明な画像に追加されません。

2

direction

ぼかしの方向は、時計回りに進み、45度単位で丸められます。デフォルト値は270（左）です。

0 =トップ

45 =右上

90 =右

135 =右下

180 =ボトム

225 =左下

270 =左

315 =左上

3

strength

ブラーが拡張するピクセル数。デフォルトは5ピクセルです。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png" alt = "CSS Logo"
         style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: blue;
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
      </div>
   </body>
</html>

それは次の結果を生成します-

クロマフィルター

クロマフィルターは、特定の色を透明にするために使用され、通常は画像で使用されます。スクロールバーでも使用できます。次のパラメータは、このフィルタで使用することができます-

Sr.No.	Parameter & Description
1	color 透明にしたい色。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/images/css.gif"
         alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">

      <p>Text Example:</p>

      <div style = "width: 580;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: #3300FF;
         Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
   </body>
</html>

それは次の結果を生成します-

ドロップシャドウ効果

ドロップシャドウは、指定されたX（水平）およびY（垂直）オフセットおよび色でオブジェクトのシャドウを作成するために使用されます。

次のパラメータは、このフィルタで使用することができます-

Sr.No.	Parameter & Description
1	color ドロップシャドウの#RRGGBB形式の色。
2	offX x軸に沿って、ドロップシャドウがビジュアルオブジェクトからオフセットされるピクセル数。正の整数はドロップシャドウを右に移動し、負の整数はドロップシャドウを左に移動します。
3	offY y軸に沿って、ドロップシャドウがビジュアルオブジェクトからオフセットされるピクセル数。正の整数はドロップシャドウを下に移動し、負の整数はドロップシャドウを上に移動します。
4	positive trueの場合、オブジェクトのすべての不透明ピクセルにドロップシャドウがあります。 falseの場合、すべての透明ピクセルにドロップシャドウがあります。デフォルトはtrueです。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter:drop-shadow(2px 2px 1px #FF0000);">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
   </body>
</html>

それは次の結果を生成します-

フリップ効果

フリップ効果は、オブジェクトの鏡像を作成するために使用されます。次のパラメータは、このフィルタで使用することができます-

Sr.No.

Parameter & Description

1

FlipH

水平鏡像を作成します

2

FlipV

垂直鏡像を作成します

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter: FlipH">

      <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">

      <p>Text Example:</p>

      <div style = "width: 300;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         filter: FlipV">CSS Tutorials</div>
   </body>
</html>

それは次の結果を生成します-

グロー効果

グロー効果は、オブジェクトの周りにグローを作成するために使用されます。透明な画像の場合、不透明なピクセルの周りにグローが作成されます。次のパラメータは、このフィルタで使用することができます-

Sr.No.

Parameter & Description

1

color

グローにしたい色。

2

strength

グローの強度（1〜255）。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
   </body>
</html>

それは次の結果を生成します-

グレースケール効果

グレースケール効果は、オブジェクトの色を256階調のグレーに変換するために使用されます。次のパラメータは、このフィルタで使用されています-

Sr.No.	Parameter & Description
1	grayscale オブジェクトの色を256階調のグレーに変換します。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter: grayscale(50%)">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         filter: grayscale(50%)">CSS Tutorials</div>
   </body>
</html>

それは次の結果を生成します-

反転効果

反転効果は、オブジェクトの色をカラースペクトルの反対の値にマッピングする、つまりネガティブイメージを作成するために使用されます。次のパラメータは、このフィルタで使用されています-

Sr.No.	Parameter & Description
1	Invert オブジェクトの色をカラースペクトルの反対の値にマッピングします。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter: invert(100%)">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         filter: invert(100%)">CSS Tutorials</div>
   </body>
</html>

それは次の結果を生成します-

マスク効果

マスク効果を使用して、透明ピクセルを指定した色に変え、不透明ピクセルを透明にします。次のパラメータは、このフィルタで使用されています-

Sr.No.	Parameter & Description
1	color 透明な領域の色。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         filter: Mask(Color=#00FF00)">CSS Tutorials
      </div>
   </body>
</html>

それは次の結果を生成します-

シャドウフィルター

シャドウフィルターを使用して、指定した方向と色で減衰したシャドウを作成します。これは、DropshadowとGlowの間にあるフィルターです。次のパラメータは、このフィルタで使用することができます-

Sr.No.

Parameter & Description

1

color

影にしたい色。

2

direction

ぼかしの方向は、時計回りに進み、45度単位で丸められます。デフォルト値は270（左）です。

0 =トップ

45 =右上

90 =右

135 =右下

180 =ボトム

225 =左下

270 =左

315 =左上

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family:
         Arial Black;
         color: red;
         filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
      </div>
   </body>
</html>

それは次の結果を生成します-

波の効果

波効果を使用して、オブジェクトに正弦波のゆがみを与え、波状に見せます。次のパラメータは、このフィルタで使用することができます-

Sr.No.	Parameter & Description
1	add 値が1の場合、元の画像が波形画像に追加され、0の場合は追加されません。
2	freq 波の数。
3	light 波の光の強さ（0〜100）。
4	phase 正弦波をどの程度開始するか（0〜100）。
5	strength 波の効果の強さ。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter: Chroma(Color = #000000)
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
      </div>
   </body>
</html>

それは次の結果を生成します-

X線効果

X線効果はグレースケールで、色深度を平坦化します。このフィルターでは、次のパラメーターが使用されます。

Sr.No.	Parameter & Description
1	xray 色深度をグレースケールおよび平坦化します。

例

<html>
   <head>
   </head>

   <body>
      <p>Image Example:</p>

      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "filter: Xray">

      <p>Text Example:</p>

      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         filter: Xray">CSS Tutorials
      </div>
   </body>
</html>

それは次の結果を生成します-

CSS-メディアタイプ

スタイルシートの最も重要な機能の1つは、画面、紙、スピーチシンセサイザー、点字デバイスなど、さまざまなメディアでのドキュメントの表示方法を指定することです。

現在、スタイルシートのメディアの依存関係を指定する方法は2つあります-

@mediaまたは@import at-rulesを使用して、スタイルシートからターゲットメディアを指定します。 *ドキュメント言語内でターゲットメディアを指定します。

@mediaルール

_ @ media_ルールは、ルールセットのターゲットメディアタイプ（カンマ区切り）を指定します。

以下に例を示します-

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }

      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

ドキュメント言語

HTML 4.0では、LINK要素の_media_属性は外部スタイルシートのターゲットメディアを指定します-

以下は例です-

<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print,
               handheld" href = "foo.css">
         </head>

         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>

認識されるメディアタイプ

CSSメディアタイプに選択された名前は、関連するプロパティが意味を持つターゲットデバイスを反映しています。これらは、メディアタイプが参照するデバイスの意味を示します。以下は、さまざまなメディアタイプのリストです-

Sr.No.	Value & Description
1	all* すべてのデバイスに適しています。
2	aural 音声シンセサイザーを対象としています。
3	braille 点字触覚フィードバックデバイスを対象としています。
4	embossed 点字ページングプリンターを対象としています。
5	handheld ハンドヘルドデバイス（通常、小さな画面、モノクロ、制限された帯域幅）を対象としています。
6	print ページングされた不透明な素材、および印刷プレビューモードで画面に表示されるドキュメントを対象としています。ページメディアのセクションを参照してください。
7	projection プロジェクターやOHPフィルムへの印刷など、投影されたプレゼンテーションを対象としています。ページメディアのセクションを参照してください。
8	screen 主にカラーのコンピューター画面を対象としています。
9	tty テレタイプ、端末、表示機能が制限されているポータブルデバイスなど、固定ピッチの文字グリッドを使用するメディアを対象としています。
10	tv テレビタイプのデバイスを対象としています。

注-メディアタイプ名は大文字と小文字を区別しません。

CSSページ化メディア-@pageルール

ページメディアは、ドキュメントのコンテンツが1つ以上の個別のページに分割されるという点で連続メディアとは異なります。ページングされたメディアには、紙、OHPフィルム、コンピューターの画面に表示されるページなどが含まれます。

CSS2標準では、ブラウザがドキュメントを最適に印刷する方法を作成者が理解できるようにするいくつかの基本的なページ付け制御機能が導入されています。

CSS2ページモデルは、有限の幅と高さを持つ長方形の領域（ページボックス）内でのドキュメントのフォーマット方法を指定します。これらの機能は2つのグループに分類されます-

特定のページレイアウトを定義するCSS2機能。
ドキュメントのページネーションを制御するCSS2機能。

ページの定義：@pageルール

CSS2は、コンテンツがレンダリングされる有限サイズのボックスである「ページボックス」を定義します。ページボックスは、2つの領域を含む長方形の領域です-

ページ領域-ページ領域には、そのページに配置されたボックスが含まれます。ページ領域の端は、改ページの間に発生するレイアウトの最初の包含ブロックとして機能します。
マージン領域-ページ領域を囲みます。

@pageルール内のページボックスのサイズ、方向、余白などを指定できます。ページボックスのサイズは、 'size’プロパティで設定されます。ページ領域の寸法は、ページボックスの寸法からマージン領域を引いたものです。

たとえば、次の@pageルールは、ページボックスのサイズを8.5×11インチに設定し、ページボックスの端とページ領域の間のすべての辺に「2cm」のマージンを作成します-

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

@pageルール内で_margin、margin-top、margin-bottom、margin-left、およびmargin-right_プロパティを使用して、ページのマージンを設定できます。

最後に、@ pageルール内で_marks_プロパティを使用して、ターゲットシートのページボックスの外側にトリミングマークとレジストレーションマークを作成します。デフォルトでは、マークは印刷されません。 _crop_キーワードと_cross_キーワードの一方または両方を使用して、ターゲットの印刷ページにそれぞれトンボとレジストレーションマークを作成できます。

ページサイズの設定

_size_プロパティは、ページボックスのサイズと向きを指定します。ページサイズに使用できる4つの値があります-

auto -ページボックスは、ターゲットシートのサイズと向きに設定されます。
landscape -ターゲットの向きをオーバーライドします。ページボックスはターゲットと同じサイズで、長辺は水平です。
portrait -ターゲットの向きをオーバーライドします。ページボックスはターゲットと同じサイズで、短辺は水平です。
length -'size’プロパティの長さの値は、絶対ページボックスを作成します。長さの値が1つだけ指定されている場合、ページボックスの幅と高さの両方が設定されます。 'size’プロパティにはパーセント値を使用できません。

次の例では、ページボックスの外側の端がターゲットに揃えられます。 'margin’プロパティのパーセンテージ値はターゲットサイズに関連するため、ターゲットシートの寸法が21.0cm×29.7cm（つまりA4）の場合、マージンは2.10cmと2.97cmです。

<style type = "text/css">
   <!--
      @page {
         size: auto;  /*auto is the initial value*/
         margin: 10%;
      }
   -->
</style>

次の例では、ページボックスの幅を8.5インチに設定し、高さを11インチに設定します。この例のページボックスには、8.5 "×11"以上のターゲットシートサイズが必要です。

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in; /*width height*/
      }
   -->
</style>

名前付きページレイアウトを作成したら、後でドキュメント内の要素に適用されるスタイルにページプロパティを追加することで、ドキュメント内で使用できます。たとえば、このスタイルは、ドキュメント内のすべてのテーブルを横向きページにレンダリングします-

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

上記の規則により、印刷中に、ブラウザがドキュメント内で<table>要素を検出し、現在のページレイアウトがデフォルトの縦向きレイアウトである場合、新しいページを開始し、横向きページにテーブルを印刷します。

左、右、および最初のページ

両面ドキュメントを印刷する場合、左右のページのページボックスは異なるはずです。次のように2つのCSS擬似クラスを介して表現することができます-

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

：first擬似クラスを使用して、ドキュメントの最初のページのスタイルを指定できます-

<style type = "text/css">
   <!--
      @page { margin: 2cm }/*All margins set to 2cm*/

      @page :first {
         margin-top: 10cm   /*Top margin on first page 10cm*/
      }
   -->
</style>

ページネーションの制御

特に指定しない限り、改ページは、ページ形式が変更されたとき、またはコンテンツが現在のページボックスをオーバーフローしたときにのみ発生します。それ以外の場合は、改ページを強制または非表示にするには、_page-break-before、page-break-after、_および_page-break-inside_プロパティを使用します。

page-break-before_と_page-break-after_の両方は、_auto、always、avoid、left、、および_right_キーワードを受け入れます。

キーワード_auto_はデフォルトであり、ブラウザが必要に応じて改ページを生成できるようにします。キーワード_always_は、要素の前後に改ページを強制しますが、_avoid_は、要素の直前または直後に改ページを抑制します。 _left_および_right_キーワードは、1つまたは2つの改ページを強制するため、要素は左ページまたは右ページに表示されます。

ページネーションプロパティの使用は非常に簡単です。ドキュメントにレベル1ヘッダーがあり、セクションを示すレベル2ヘッダーで新しい章を開始するとします。各章を新しい右側のページから開始したいが、セクションヘッダーを後続のコンテンツの改ページで分割したくない場合。あなたは次のルールを使用してこれを達成することができます-

<style type = "text/css">
   <!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   -->
</style>

_page-break-inside_プロパティでは、_auto_および_avoid_の値のみを使用してください。可能な場合、テーブルがページ間で分割されないようにする場合は、ルールを記述します-

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

未亡人と孤児の管理

活版印刷の用語では、オーファンは改ページによりページの下部に取り残された段落の行であり、未亡人は改ページ後にページの上部に残る行です。一般に、印刷されたページは、一行のテキストが上部または下部に取り残された状態では魅力的に見えません。ほとんどのプリンターは、各ページの上部または下部に少なくとも2行以上のテキストを残そうとします。

orphans プロパティは、ページの下部に残す必要がある段落の最小行数を指定します。
widows プロパティは、ページの上部に残す必要がある段落の最小行数を指定します。

各ページの下部に4行、上部に3行を作成する例を次に示します-

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>

CSS-聴覚メディア

Web文書は、音声合成装置によってレンダリングできます。 CSS2では、特定のサウンドスタイル機能を特定のドキュメント要素に添付できます。

ドキュメントの聴覚レンダリングは、主に視覚障害者が使用します。視覚的なレンダリングではなく聴覚的なレンダリングを使用してドキュメントにアクセスできる状況の一部は次のとおりです。

読むことを学ぶ
トレーニング
車両内のWebアクセス
ホームエンターテイメント
産業文書
医療文書

聴覚プロパティを使用する場合、キャンバスは3次元の物理的空間（サウンドサラウンド）と時間的空間（他のサウンドの前、最中、および後のサウンドを指定できます）で構成されます。

CSSプロパティを使用すると、合成音声の品質（音声の種類、頻度、屈折など）を変更することもできます。

ここに例があります-

<html>
   <head>
      <style type = "text/css">
         h1, h2, h3, h4, h5, h6 {
            voice-family: paul;
            stress: 20;
            richness: 90;
            cue-before: url("../audio/pop.au");
         }
         p {
            azimuth:center-right;
         }
      </style>
   </head>

   <body>

      <h1>finddevguides.com</h1>
      <h2>finddevguides.com</h2>
      <h3>finddevguides.com</h3>
      <h4>finddevguides.com</h4>
      <h5>finddevguides.com</h5>
      <h6>finddevguides.com</h6>
      <p>finddevguides.com</p>

   </body>
</html>

それは次の結果を生成します-

スピーチシンセサイザに、「paul」と呼ばれる音声（一種のオーディオフォント）のヘッダーをフラットトーンで非常に豊かな音声で話すように指示します。ヘッダーを話す前に、指定されたURLからサウンドサンプルが再生されます。

クラス「heidi」の段落は左前から表示され（サウンドシステムが空間オーディオに対応している場合）、クラス「peter」の段落は右から表示されます。

次に、聴覚メディアに関連するさまざまなプロパティを確認します。

azimuth プロパティは、音が水平に来る場所を設定します。
elevation プロパティは、音が垂直に来る場所を設定します。
cue-after は、要素のコンテンツを他のコンテンツと区別するために発声した後に再生されるサウンドを指定します。
cue-before は、要素のコンテンツを他と区別するために話す前に再生されるサウンドを指定します。
cue は、キュー前およびキュー後を設定するための略記です。
pause-after は、要素のコンテンツを話した後に観察される一時停止を指定します。
pause-before は、要素のコンテンツを話す前に観察される一時停止を指定します。
pause は、一時停止前と一時停止後を設定するための略記です。
pitch は、話し声の平均ピッチ（周波数）を指定します。
pitch-range は、平均ピッチの変動を指定します。
play-during は、要素のコンテンツが話されている間に背景として再生されるサウンドを指定します。
*豊かさ*は、話す声の豊かさ、または明るさを指定します。
speak は、テキストを音声でレンダリングするかどうか、またレンダリングする場合はどのようにレンダリングするかを指定します。
speak-numeral は、数字の読み方を制御します。
speak-punctuation は、句読点の読み方を指定します。
speech-rate は発話速度を指定します。
stress は、声のイントネーションの輪郭の「ローカルピーク」の高さを指定します。
voice-family は、音声ファミリ名の優先順位リストを指定します。
*音量*は、音声の音量の中央値を指します。

方位角プロパティ

azimuthプロパティは、音が水平に来る場所を設定します。可能な値は以下のとおりです-

角度-位置は_-360deg_から_360deg_の範囲内の角度で記述されます。値_0deg_は、サウンドステージの中央のすぐ前方を意味します。 90deg_が右側、_180deg_が後方、_270deg（または同等で便利な_-90deg_）が左側です。
左側-「270度」と同じ。「背後」、「270度」。
左端-「300度」と同じ。「背後」、「240度」で。
左-「320度」と同じ。「背後」、「220度」で。
center-left -「340deg」と同じ。「背後」、「200度」で。
center -「0deg」と同じ。「背後」、「180度」で。
center-right -'20deg’と同じ。「背後」、「160度」で。
右-'40deg’と同じ。「背後」、「140度」で。
極右-'60deg’と同じ。「背後」、「120度」で。
右側-「90度」と同じ。「後ろ」、「90度」で。
leftwards -サウンドを現在の角度に対して左に移動します。より正確には、20度を減算します。
rightwards -サウンドを現在の角度に対して右に移動します。より正確には、20度を加算します。

ここに例があります-

<style type = "text/css">
   <!--
      h1   { azimuth: 30deg }
      td.a { azimuth: far-right }         /*60deg*/
      #12  { azimuth: behind far-right }  /*120deg*/
      p.comment { azimuth: behind }       /*180deg*/
   -->
</style>

標高プロパティ

エレベーションプロパティは、音が垂直に来る場所を設定します。可能な値は次のとおりです-

angle --90deg_と_90deg_の間の角度として仰角を指定します。 _0deg_はフォワードホライズンを意味し、リスナーとのレベルを大まかに意味します。 _90deg_は直接オーバーヘッドを意味し、- 90deg_は真下を意味します。
below -'-90deg’と同じです。
レベル-「0deg」と同じ。
above -'90deg’と同じ。
higher -現在の高度に10度を追加します。
lower -現在の高度から10度を引きます。

ここに例があります-

<style type = "text/css">
   <!--
      h1   { elevation: above }
      tr.a { elevation: 60deg }
      tr.b { elevation: 30deg }
      tr.c { elevation: level }
   -->
</style>

cue-afterプロパティ

cue-afterプロパティは、要素のコンテンツを他のコンテンツと区別するために発声した後に再生されるサウンドを指定します。可能な値は次のとおりです-

url -再生されるサウンドファイルのURL。
none -何も再生する必要はありません。

ここに例があります-

<style type = "text/css">
   <!--
      a {cue-after: url("dong.wav");}
      h1 {cue-after: url("pop.au"); }
   -->
</style>

cue-beforeプロパティ

このプロパティは、要素のコンテンツを他のコンテンツと区別する前に、再生するサウンドを指定します。可能な値は-

url -再生されるサウンドファイルのURL。
none -何も再生する必要はありません。

ここに例があります-

<style type = "text/css">
   <!--
      a {cue-before: url("bell.aiff");}
      h1 {cue-before: url("pop.au"); }
   -->
</style>

キュープロパティ

cueプロパティは、_cue-before_および_cue-after_を設定するための省略形です。 2つの値が指定されている場合、最初の値は_cue-before_で、2番目の値は_cue-after_です。値を1つだけ指定すると、両方のプロパティに適用されます。

たとえば、次の2つのルールは同等です-

<style type = "text/css">
   <!--
      h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
      h1 {cue: url("pop.au") }
   -->
</style>

pause-afterプロパティ

このプロパティは、要素のコンテンツを話した後に観察される一時停止を指定します。可能な値は-

time -絶対時間単位（秒およびミリ秒）で一時停止を表します。
percentage -_speech-rate_プロパティの値の逆数を指します。たとえば、発話速度が1分あたり120ワードの場合（つまり、単語は0.5秒（500ミリ秒）かかります。100％の_pause-after_は500ミリ秒の休止を意味し、20％の_pause-after_は100ミリ秒を意味します。

pause-beforeプロパティ

このプロパティは、要素のコンテンツを話す前に観察される一時停止を指定します。可能な値は-

time -絶対時間単位（秒およびミリ秒）で一時停止を表します。
percentage -_speech-rate_プロパティの値の逆数を指します。たとえば、発話速度が1分あたり120ワードの場合（つまり、単語は0.5秒（500ミリ秒）かかります。その後、_pause-before_が100％の場合、一時停止は500ミリ秒、_pause-before_は20％の場合は100ミリ秒になります。

pauseプロパティ

このプロパティは、_pause-before_および_pause-after_を設定するための省略形です。 2つの値が指定されている場合、最初の値は_pause-before_で、2番目の値はpause-afterです。

ここに例があります-

<style type = "text/css">
   <!--
     /*pause-before: 20ms; pause-after: 20ms*/
      h1 { pause : 20ms }

     /*pause-before: 30ms; pause-after: 40ms*/
      h2{ pause : 30ms 40ms }

     /*pause-before: ?; pause-after: 10ms*/
      h3 { pause-after : 10ms }
   -->
</style>

pitchプロパティ

このプロパティは、発声する音声の平均ピッチ（周波数）を指定します。音声の平均ピッチは、音声ファミリによって異なります。たとえば、標準的な男性の声の平均ピッチは約120Hzですが、女性の声の平均ピッチは約210Hzです。可能な値は-

frequency -話す声の平均ピッチをヘルツ（Hz）で指定します。
x-low、low、medium、high、x-high -これらの値は音声ファミリに依存するため、絶対周波数にマッピングされません。

ピッチ範囲プロパティ

このプロパティは、平均ピッチの変動を指定します。可能な値は-

number -「0」と「100」の間の値。「0」のピッチ範囲は、フラットで単調な音声を生成します。 50のピッチ範囲では、通常の変曲が生じます。 50を超えるピッチ範囲では、アニメーション化された音声が生成されます。

プレイ中のプロパティ

このプロパティは、要素のコンテンツが話されている間に背景として再生されるサウンドを指定します。可能な値は次のいずれかになります-

URI -この<uri>で指定されたサウンドは、要素のコンテンツが話されている間、背景として再生されます。
mix -このキーワードは、親要素の_play-during_プロパティから継承されたサウンドが引き続き再生され、_uri_で指定されたサウンドがミックスされることを意味します。 _mix_が指定されていない場合、要素のバックグラウンドサウンドが親のサウンドに置き換わります。
repeat -存在する場合、このキーワードは、要素の期間全体を埋めるには短すぎる場合に音が繰り返されることを意味します。それ以外の場合、サウンドは一度再生されてから停止します。
auto -親要素のサウンドは引き続き再生されます。
なし-このキーワードは、沈黙があることを意味します。

ここに例があります-

<style type = "text/css">
   <!--
      blockquote.sad { play-during: url("violins.aiff") }
      blockquote q   { play-during: url("harp.wav") mix }
      span.quiet     { play-during: none }
   -->
</style>

richnessプロパティ

このプロパティは、話す声の豊かさまたは明るさを指定します。可能な値は-

number -「0」と「100」の間の値。値が大きいほど、音声の伝達量が多くなります。値を小さくすると、柔らかくてメリハリのある声になります。

speakプロパティ

このプロパティは、テキストを聴覚的にレンダリングするかどうか、またレンダリングする場合はどのようにレンダリングするかを指定します。可能な値は-

none -要素がレンダリングに時間を必要としないように、聴覚レンダリングを抑制します。
通常-要素とその子のレンダリングに言語依存の発音ルールを使用します。
spell-out -テキストを一度に1文字ずつ綴ります。

「volume」プロパティの値が「silent」である要素と、「speak」プロパティの値が「none」である要素の違いに注意してください。前者は、要素の前後の一時停止を含めて、話しかけられたのと同じ時間を使用しますが、音は生成されません。後者は時間を必要とせず、レンダリングされません。

speak-numeralプロパティ

このプロパティは、数字の読み方を制御します。可能な値は-

数字-数字を個々の数字として読み上げます。したがって、「237」は「Two Three Seven」と話されます。
連続-数字を完全な数字として読み上げます。したがって、「237」は「二百三十七」と話されます。単語表現は言語に依存します。

speak-punctuationプロパティ

このプロパティは、句読点の読み方を指定します。可能な値は-

コード-セミコロン、ブレースなどの句読点は、文字通り話されます。
none -句読点は話されませんが、代わりにさまざまな一時停止として自然にレンダリングされます。

発話速度のプロパティ

このプロパティは、発話速度を指定します。絶対キーワード値と相対キーワード値の両方が許可されていることに注意してください。可能な値は-

number -毎分あたりの語数で話す速度を指定します。
x-slow -80ワード/分と同じ。
遅い-1分あたり120ワードと同じ。
中-180〜200ワード/分と同じ。
fast -1分あたり300ワードと同じ。
x-fast -500ワード/分と同じ。
faster -現在の発話速度に40ワード/分を追加します。
遅い-現在の発話速度から1分あたり40ワードを減算します。

ストレス特性

このプロパティは、声のイントネーションの輪郭の「ローカルピーク」の高さを指定します。英語は強調された言語であり、文のさまざまな部分に第1、第2、または第3のストレスが割り当てられます。可能な値は-

number -「0」と「100」の間の値。値の意味は、話されている言語によって異なります。たとえば、標準的な英語を話す男性の音声の「50」のレベル（平均ピッチ= 122Hz）、通常のイントネーションと強調で話すことは、イタリアの音声の「50」とは異なる意味を持ちます。

音声ファミリプロパティ

値は、音声ファミリ名の優先順位がカンマで区切られたリストです。それは次の値を持つことができます-

generic-voice -値は音声ファミリです。可能な値は、「男性」、「女性」、および「子」です。
specific-voice -値は特定のインスタンスです（コメディアン、トリノイド、カルロス、ラニなど）。

ここに例があります-

<style type = "text/css">
   <!--
      h1 { voice-family: announcer, male }
      p.part.romeo  { voice-family: romeo, male }
      p.part.juliet { voice-family: juliet, female }
   -->
</style>

ボリュームプロパティ

音量とは、音声の音量の中央値を指します。それは次の値を持つことができます-

数字-「0」と「100」の間の任意の数字。「0」は最小可聴音量レベルを表し、100は最大快適レベルに対応します。
percentage -これらの値は、継承された値を基準にして計算され、「0」から「100」の範囲にクリップされます。
サイレント-まったく音がしません。値「0」は「サイレント」と同じ意味ではありません。
x-soft -「0」と同じ。
soft -'25’と同じです。
中-「50」と同じ。
大声-'75’と同じ。
x-loud -'100’と同じ。

ここに例があります-

<style type = "text/css">
   <!--
      P.goat  { volume: x-soft }
   -->
</style>

クラス goat の段落は非常に柔らかくなります。

CSS印刷-@mediaルール

CSSを使用して、紙に印刷されたWebページの外観を変更できます。画面バージョン用に1つのフォントを指定し、印刷バージョン用に別のフォントを指定できます。

前の章で@mediaルールを見てきました。このルールにより、メディアごとに異なるスタイルを指定できます。そのため、スクリーンとプリンターに異なるルールを定義できます。

以下の例では、スクリーンと印刷用に異なるフォントファミリを指定しています。次のCSSは、画面とプリンターの両方で同じフォントサイズを使用します。

<style type = "text/css">
   <!--
      @media screen {
         p.bodyText {font-family:verdana, arial, sans-serif;}
      }

      @media print {
         p.bodyText {font-family:georgia, times, serif;}
      }
      @media screen, print {
         p.bodyText {font-size:10pt}
      }
   -->
</style>

あなたが別のファイルでスタイルシートを定義している場合は、外部スタイルシートにリンクするときにメディア属性を使用することもできます-

<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">

CSS-レイアウト

HTMLテーブルに非常に慣れており、HTMLテーブルを使用してページレイアウトを効率的に設計できることを願っています。ただし、CSSはドキュメント内の要素を配置するための多くのコントロールも提供します。 CSSは_未来の波_であるため、ページレイアウトの目的で、テーブルではなくCSSを学習して使用してみませんか？

次のリストは、両方の技術のいくつかの長所と短所を収集します-

ほとんどのブラウザはテーブルをサポートしていますが、CSSサポートは徐々に採用されています。
ブラウザウィンドウのサイズが変更された場合、テーブルはより寛容です-コンテンツをモーフィングし、それに応じて変更に対応するためにラップします。 CSSの配置は、正確でかなり柔軟性に欠ける傾向があります。
テーブルは、CSSルールよりも簡単に学習および操作できます。

しかし、これらの引数のそれぞれは逆にすることができます-

CSSはWebドキュメントの将来にとって極めて重要であり、ほとんどのブラウザでサポートされます。
CSSはテーブルよりも正確であるため、ブラウザウィンドウに関係なく、ドキュメントを意図したとおりに表示できます。
入れ子になったテーブルを追跡するのは大変なことです。 CSSルールはよく整理され、読みやすく、簡単に変更される傾向があります。

最後に、あなたにとって理にかなっている技術を使用し、あなたが知っていることや文書を提示するものを最良の方法で使用することをお勧めします。

CSSは_table-layout_プロパティも提供して、テーブルのロードをより高速にします。以下は例です-

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

大きなテーブルの方がメリットがわかります。従来のHTMLでは、ブラウザは最終的にテーブルをレンダリングする前にすべてのセルを計算する必要がありました。ただし、テーブルレイアウトアルゴリズムを_fixed_に設定すると、テーブル全体をレンダリングする前に最初の行を見るだけで済みます。つまり、テーブルの列幅と行高さを固定する必要があります。

サンプル列レイアウト

CSSを使用して簡単な列レイアウトを作成する手順は次のとおりです-

次のようにドキュメント全体のマージンとパディングを設定します-

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

ここで、黄色の列を定義し、後でこのルールを<div>に添付します-

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

この時点までに、黄色のボディを持つドキュメントがあるので、今度はlevel0内に別の部門を定義しましょう−

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

今、私たちはレベル1内にもう1つの部門をネストし、背景色だけを変更します-

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

最後に、同じ手法を使用して、level2内にlevel3の区分をネストして、右の列の視覚的なレイアウトを取得します-

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

次のようにソースコードを完成します-

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }

   #level0 {background:#FC0;}

   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }

   #level2 {background:#FFF3AC;}

   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }

   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

同様に、ページの上部にトップナビゲーションバーまたは広告バーを追加できます。

それは次の結果を生成します-

CSS-検証

検証は、ルールに対して何かをチェックするプロセスです。初心者の場合、CSSルールを書く際に多くの間違いを犯すことがよくあります。書いたものが100％正確でW3の品質基準を満たしていることをどのように確認しますか？

CSSを使用する場合、コードは正しい必要があります。不適切なコードは、ページの外観や機能に予期しない結果を引き起こす可能性があります。

ただし、（X）HTMLドキュメントに埋め込まれたCSSスタイルシートを検証する場合は、まず、使用する（X）HTMLが有効であることを確認する必要があります。

（X）HTMLドキュメントの有効性をチェックするツール： Validate（X）HTML document 。

次のツールを使用して、CSSの有効性を確認できます。

[[File:]]	W3C CSS Validator (World Wide Web Consortium), This validator checks your css by either file upload, direct input, or using URI - one page at a time. This validator helps you to locate all the errors in your CSS.
[[File:]]	The WDG CSS check validator, lets you validate your css by direct input, file upload, and using URI. Errors will be listed by line and column numbers if you have any. Errors usually come with links to explain the reason of error.

CSSバリデーターは、カスケードスタイルシートをチェックして、W3コンソーシアムによって設定されたCSS標準に準拠していることを確認します。どのCSS機能がどのブラウザーでサポートされているかを示すバリデーターもいくつかあります（すべてのブラウザーがCSS実装で同等ではないため）。

HTMLコードを検証する理由

コードを検証する理由はいくつかあります。しかし、主要なものは-

クロスブラウザ、クロスプラットフォーム、および将来の互換性を支援します。
質の高いWebサイトは、検索エンジンの可視性を高めます。
プロフェッショナリズム：ウェブ開発者として、訪問者に見られている間、あなたのコードはエラーを引き起こすべきではありません。

CSS3-チュートリアル

カスケードスタイルシート（CSS）は、マークアップ言語で記述されたドキュメントの外観と書式を記述するために使用されるスタイルシート言語です。 CSS3は、css以前のバージョン（CSS2）の最新の標準です。 css2とcss3の主な違いは次のとおりです-

メディアクエリ
ネームスペース
セレクターレベル3
色

CSS3モジュール

CSS3はCSS2仕様と新しい仕様のコラボレーションです。このコラボレーションは*モジュール*と呼ばれます。モジュールの一部を以下に示します-

セレクター
ボックスモデル
背景
画像値と置換されたコンテンツ
テキスト効果
2D変換
3D変換
アニメーション
複数列レイアウト
ユーザーインターフェース

CSS3-角丸

CSS3の角丸コーナーは、border-radiusプロパティを使用して、ボディまたはテキストに特別な色の角を追加するために使用されます。角丸コーナーの簡単な構文は次のとおりです-

#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px;
   width: 200px;
   height: 150px;
}

次の表は、次のように角丸の可能な値を示しています-

Sr.No.	Value & Description
1	border-radius この要素を使用して、4つの境界半径プロパティを設定します
2	border-top-left-radius この要素を使用して、左上隅の境界線を設定します
3	border-top-right-radius この要素を使用して、右上隅の境界線を設定します
4	border-bottom-right-radius この要素を使用して、右下隅の境界線を設定します
5	border-bottom-left-radius この要素を使用して、左下隅の境界線を設定します

例

このプロパティには3つの値を指定できます。次の例では、両方の値を使用します-

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(/css/images/logo.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1">Rounded corners!</p>
      <p id = "rcorners2">Rounded corners!</p>
      <p id = "rcorners3">Rounded corners!</p>
   </body>
</html>

それは次の結果を生成します-

各コーナーのプロパティ

下の例に示すように、各コーナーのプロパティを指定できます-

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px;
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px;
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px;
         }
      </style>
   </head>

   <body>
      <p id = "rcorners1"></p>
      <p id = "rcorners2"></p>
      <p id = "rcorners3"></p>
   </body>
<body>

それは次の結果を生成します-

CSS3-境界線画像

CSSボーダー画像プロパティは、いくつかの要素に画像ボーダーを追加するために使用されます。ボーダー画像を呼び出すためにHTMLコードを使用する必要はありません。ボーダー画像のサンプル構文は次のとおりです-

#borderimg {
   border: 10px solid transparent;
   padding: 15px;
}

最も一般的に使用される値は以下に示されています-

Sr.No.	Value & Description
1	border-image-source 画像パスの設定に使用
2	border-image-slice ボーダー画像のスライスに使用
3	border-image-width ボーダー画像の幅を設定するために使用
4	border-image-repeat ボーダー画像を丸く、繰り返し、引き伸ばすように設定するために使用します

例

以下は、要素の境界線として画像を設定する例を示す例です。

<html>
   <head>
      <style>
         #borderimg1 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      </style>
   </head>

   <body>
      <p id = "borderimg1">This is image boarder example.</p>
      <p id = "borderimg2">This is image boarder example.</p>
      <p id = "borderimg3">This is image boarder example.</p>
   </body>
</html>

それは次の結果を生成します-

CSS3-マルチバックグラウンド

マルチ背景

CSSマルチ背景プロパティは、HTMLコードなしで一度に1つ以上の画像を追加するために使用されます。要件に従って画像を追加できます。マルチ背景画像のサンプル構文は次のとおりです-

#multibackground {
   background-image: url(/css/images/logo.png), url(/css/images/border.png);
   background-position: left top, left top;
   background-repeat: no-repeat, repeat;
   padding: 75px;
}

最も一般的に使用される値は以下に示されています-

Sr.No.	Value & Description
1	background 1つのセクションですべての背景画像のプロパティを設定するために使用されます
2	background-clip 背景のペイント領域を宣言するために使用されます
3	background-image 背景画像を指定するために使用
4	background-origin 背景画像の位置を指定するために使用されます
5	background-size 背景画像のサイズを指定するために使用されます

例

以下は、マルチ背景画像を示す例です。

<html>
   <head>
      <style>
         #multibackground {
            background-image: url(/css/images/logo.png), url(/css/images/border.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
   </head>

   <body>

      <div id = "multibackground">
         <h1>www.finddevguides.com</h1>
         <p>
            Tutorials Point originated from the idea that there exists a class of
            readers who respond better to online content and prefer to learn new
            skills at their own pace from the comforts of their drawing rooms.
            The journey commenced with a single tutorial on HTML in  2006 and elated
            by the response it generated, we worked our way to adding fresh tutorials
            to our repository which now proudly flaunts a wealth of tutorials and
            allied articles on topics ranging from programming languages to web designing
            to academics and much more..
         </p>
      </div>

   </body>
</html>

それは次の結果を生成します-

マルチ背景のサイズ

マルチ背景プロパティは、異なる画像に異なるサイズを追加するために受け入れられます。サンプルの構文は以下のとおりです-

#multibackground {
   background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
   background-size: 50px, 130px, auto;
}

上記の例に示すように、各画像には50px、130px、自動サイズなどの特定のサイズがあります。

CSS3-色

CSS3は次のように追加の色プロパティをサポートしています-

RGBAカラー
HSLカラー
HSLA色

不透明度

*RGBA* は *Red Green Blue Alpha* を表します。これはCSS2の拡張であり、Alphaは色の不透明度を指定し、パラメータ番号は0.0〜1.0の数値です。 以下に示すようなRGBAのサンプル構文-

#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}

*HSL* は*色相、彩度、明度*を表します。ここで、Hugeはカラーホイールの度合いで、彩度と明度は0〜100％のパーセンテージ値です。 以下に示すHSLのサンプル構文-

#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}

*HSLA* は、*色相、彩度、明度、およびアルファ*を表します。 アルファ値は、表示されるRGBAの不透明度を指定します。 以下に示すHSLAのサンプル構文-

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}

*opacity* は、不透明度を上げるために黒を追加する必要がある薄いペイントです。 不透明度のサンプル構文は以下のとおりです-

#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}

次の例は、rgbaカラープロパティを示しています。

<html>
   <head>
      <style>
         #p1 {background-color:rgba(255,0,0,0.3);}
         #p2 {background-color:rgba(0,255,0,0.3);}
         #p3 {background-color:rgba(0,0,255,0.3);}
      </style>
   </head>

   <body>
      <p>RGBA colors:</p>
      <p id = "p1">Red</p>
      <p id = "p2">Green</p>
      <p id = "p3">Blue</p>
   </body>
</html>

それは次の結果を生成します-

次の例は、HSLカラープロパティを示しています。

<html>
   <head>
      <style>
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      </style>
   </head>

   <body>
      <p>HSL colors:</p>
      <p id = "g1">Green</p>
      <p id = "g2">Normal Green</p>
      <p id = "g3">Dark Green</p>
   </body>
</html>

それは次の結果を生成します-

次の例は、HSLAカラープロパティを示しています。

<html>
   <head>
      <style>
         #d1 {background-color:hsla(120,100%,50%,0.3);}
         #d2 {background-color:hsla(120,100%,75%,0.3);}
         #d3 {background-color:hsla(120,100%,25%,0.3);}
      </style>
   </head>

   <body>
      <p>HSLA colors:</p>
      <p id = "d1">Less opacity green</p>
      <p id = "d2">Green</p>
      <p id = "d3">Green</p>
   </body>
</html>

それは次の結果を生成します-

次の例は、Opacityプロパティを示しています。

<html>
   <head>
      <style>
         #m1 {background-color:rgb(255,0,0);opacity:0.6;}
         #m2 {background-color:rgb(0,255,0);opacity:0.6;}
         #m3 {background-color:rgb(0,0,255);opacity:0.6;}
      </style>
   </head>

   <body>
      <p>HSLA colors:</p>
      <p id = "m1">Red</p>
      <p id = "m2">Green</p>
      <p id = "m3">Blue</p>
   </body>
</html>

それは次の結果を生成します-

CSS3-グラデーション

グラデーションとは何ですか？

グラデーションは、以下に示すように2つ以上の色の組み合わせを表示します-

グラデーションの種類

線形グラデーション（下/上/左/右/斜め）
放射状グラデーション

線形グラデーション

線形グラデーションは、2つ以上の色を上から下のような線形形式で配置するために使用されます。

上から下へ

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green);
            background: linear-gradient(pink,green);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

それは次の結果を生成します-

左から右へ

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left, red , blue);
            background: -o-linear-gradient(right, red, blue);
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red , blue);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

それは次の結果を生成します-

対角線

斜めは左上のボタンと右のボタンから始まります。

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue);
            background: -o-linear-gradient(bottom right, red, blue);
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

それは次の結果を生成します-

マルチカラー

<html>
   <head>
      <style>
         #grad2 {
            height: 100px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
            background: linear-gradient(red, orange, yellow, red, blue, green,pink);
         }
      </style>
   </head>

   <body>
      <div id = "grad2"></div>
   </body>
</html>

それは次の結果を生成します-

CSS3放射状グラデーション

放射状のグラデーションが中央に表示されます。

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
            background: -o-radial-gradient(red 5%, green 15%, pink 60%);
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
            background: radial-gradient(red 5%, green 15%, pink 60%);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

それは次の結果を生成します-

CSS3繰り返し放射状グラデーション

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

それは次の結果を生成します-

CSS3-シャドウ

CSS3は、テキストまたは要素に影を追加するためにサポートされています。Shadowプロパティは次のように分かれています-

テキストの影
ボックスシャドウ

テキストの影

CSS3は、テキストに影の効果を追加するためにサポートされています。以下は、テキストに影の効果を追加する例です-

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>

   <body>
      <h1>finddevguides.com</h1>
      <h2>finddevguides.com</h2>
      <h3>finddevguides.com</h3>
      <h4>finddevguides.com</h4>
      <h5>finddevguides.com</h5>
      <h6>finddevguides.com</h6>
      <p>finddevguides.com</p>
   </body>
</html>

それは次の結果を生成します-

ボックス影

要素にシャドウ効果を追加するために使用されます。以下は、要素にシャドウ効果を追加する例です。

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>

   <body>
      <div>This is a div element with a box-shadow</div>
   </body>
</html>

それは次の結果を生成します-

CSS3-テキスト

CSS3にはいくつかの追加機能が含まれており、それらは後で追加されます。

テキストオーバーフロー
ワードラップ *ワードブレーク

CSS3には次の最も一般的に使用されるプロパティがあります-

Sr.No.	Value & Description
1	text-align-last* テキストの最後の行を揃えるために使用されます
2	text-emphasis テキストと色を強調するために使用
3	text-overflow 表示されていないオーバーフローしたコンテンツがユーザーに通知される方法を決定するために使用されます
4	word-break 単語に基づいて行を分割するために使用
5	word-wrap 行を分割して次の行に折り返すために使用

テキストオーバーフロー

text-overflowプロパティは、表示されていないオーバーフローコンテンツがユーザーに通知される方法を決定します。テキストオーバーフローのサンプル例は次のように示されています-

<html>
   <head>
      <style>
         p.text1 {
            white-space: nowrap;
            width: 500px;
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap;
            width: 500px;
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
   </head>

   <body>

      <b>Original Text:</b>

      <p>
         Tutorials Point originated from the idea that there exists a class of
         readers who respond better to online content and prefer to learn new
         skills at their own pace from the comforts of their drawing rooms.
      </p>

      <b>Text overflow:clip:</b>

      <p class = "text1">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and prefer
         to learn new skills at their own pace from the comforts of their
         drawing rooms.
      </p>

      <b>Text overflow:ellipsis</b>

      <p class = "text2">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and
         prefer to learn new skills at their own pace from the comforts
         of their drawing rooms.
      </p>

   </body>
</html>

それは次の結果を生成します-

CSS3単語分割

行を分割するために使用され、次のコードは単語分割のサンプルコードを示しています。

<html>
   <head>
      <style>
         p.text1 {
            width: 140px;
            border: 1px solid #000000;
            word-break: keep-all;
         }
         p.text2 {
            width: 140px;
            border: 1px solid #000000;
            word-break: break-all;
         }
      </style>
   </head>

   <body>

      <b>line break at hyphens:</b>
      <p class = "text1">
         Tutorials Point originated from the idea that there exists a
         class of readers who respond better to online content and prefer
         to learn new skills at their own pace from the comforts of
         their drawing rooms.
      </p>

      <b>line break at any character</b>

      <p class = "text2">
         Tutorials Point originated from the idea that there exists a
         class of readers who respond better to online content and
         prefer to learn new skills at their own pace from the comforts
         of their drawing rooms.
      </p>

   </body>
</html>

それは次の結果を生成します-

CSSワードラッピング

ワードラッピングは、行を分割して次の行に折り返すために使用されます。次のコードにはサンプル構文があります-

p {
   word-wrap: break-word;
}

CSS3-Webフォント

Webフォントは、ローカルシステムにインストールされていないCSSのフォントを許可するために使用されます。

さまざまなWebフォント形式

Sr.No.	Font & Description
1	TrueType Fonts (TTF) TrueTypeは、1980年代後半にAppleとMicrosoftが開発したアウトラインフォント標準です。WindowsとMACオペレーティングシステムの両方で最も一般的なフォントになりました。
2	OpenType Fonts (OTF) OpenTypeは、スケーラブルなコンピューターフォントの形式であり、Microsoftによって開発されました
3	The Web Open Font Format (WOFF) WOFFはWebページの開発に使用され、2009年に開発されました。現在、W3C勧告で使用しています。
4	SVG Fonts/Shapes SVGでは、SVGドキュメント内でSVGフォントを使用できます。フォントフェイスプロパティを使用してCSSをSVGに適用することもできます。
5	Embedded OpenType Fonts (EOT) EOTはWebページの開発に使用され、Webページに埋め込まれているため、サードパーティのフォントを許可する必要はありません

次のコードは、フォントフェイスのサンプルコードを示しています-

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      </Style>
   </head>

   <body>
      <div>This is the example of font face with CSS3.</div>
      <p><b>Original Text :</b>This is the example of font face with CSS3.</p>
   </body>
</html>

それは次の結果を生成します-

フォントの説明

次のリストには、@ font-faceルールに配置されているすべてのフォントの説明が含まれていました-

Sr.No.	Value & Description
1	font-family フォントの名前を定義するために使用されます
2	src URLを定義するために使用されます
3	font-stretch フォントの引き伸ばし方法を見つけるために使用
4	font-style フォントスタイルの定義に使用
5	font-weight フォントの太さ（太字）を定義するために使用されます

CSS3-2D変換

2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造の再変更に使用されます。

次の表には、2D変換で使用される一般的な値が含まれています-

Sr.No.	Value & Description
1	matrix(n,n,n,n,n,n) 6つの値を持つマトリックス変換を定義するために使用されます
2	translate(x,y) x軸とy軸とともに要素を変換するために使用されます
3	translateX(n) x軸とともに要素を変換するために使用されます
4	translateY(n) y軸とともに要素を変換するために使用されます
5	scale(x,y) 要素の幅と高さを変更するために使用されます
6	scaleX(n) 要素の幅を変更するために使用
7	scaleY(n) 要素の高さを変更するために使用
8	rotate(angle) 角度に基づいて要素を回転するために使用されます
9	skewX(angle) X軸とともにスキュー変換を定義するために使用されます
10	skewY(angle) y軸とともにスキュー変換を定義するために使用されます

次の例は、上記のすべてのプロパティのサンプルを示しています。

20度回転

以下に示すように、20度の角度でのボックスの回転-

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
           /*IE 9*/
            -ms-transform: rotate(20deg);

           /*Safari*/
            -webkit-transform: rotate(20deg);

           /*Standard syntax*/
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>

      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

それは次の結果を生成します-

-20度回転

以下に示すように、-20度の角度でのボックスの回転-

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
           /*IE 9*/
            -ms-transform: rotate(-20deg);

           /*Safari*/
            -webkit-transform: rotate(-20deg);

           /*Standard syntax*/
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>

      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

それは次の結果を生成します-

スキューX軸

以下に示すように、スキューx軸を使用したボックスの回転-

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
           /*IE 9*/
            -ms-transform: skewX(20deg);

           /*Safari*/
            -webkit-transform: skewX(20deg);

           /*Standard syntax*/
            transform: skewX(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>

      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

それは次の結果を生成します-

スキューY軸

以下に示すように、y軸を斜めにしたボックスの回転-

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
           /*IE 9*/
            -ms-transform: skewY(20deg);

           /*Safari*/
            -webkit-transform: skewY(20deg);

           /*Standard syntax*/
            transform: skewY(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>

      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

それは次の結果を生成します-

マトリックス変換

以下に示すように、マトリックス変換を使用したボックスの回転-

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
           /*IE 9*/
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);

           /*Safari*/
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);

           /*Standard syntax*/
            transform: matrix(1, -0.3, 0, 1, 0, 0);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>

      <div id = "myDiv1">
         Tutorials point.com
      </div>
   </body>
</html>

それは次の結果を生成します-

マトリックスは別の方向に変換します。

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
           /*IE 9*/
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);

           /*Safari*/
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);

           /*Standard syntax*/
            transform: matrix(1, 0, 0.5, 1, 150, 0);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>

      <div id = "myDiv2">
         Tutorials point.com
      </div>
   </body>
</html>

それは次の結果を生成します-

CSS3-3D変換

3D変換を使用して、要素をx軸、y軸、z軸に移動できます。以下の例では、要素の回転方法を明確に指定しています。

3D変換の方法

以下のメソッドは、3D変換を呼び出すために使用されます-

Sr.No.	Value & Description
1	matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) マトリックスの16個の値を使用して要素を変換するために使用されます
2	translate3d(x,y,z) x軸、y軸、z軸を使用して要素を変換するために使用
3	translateX(x) x軸を使用して要素を変換するために使用されます
4	translateY(y) y軸を使用して要素を変換するために使用されます
5	translateZ(z) y軸を使用して要素を変換するために使用されます
6	scaleX(x) x軸を使用して要素をスケーリング変換するために使用
7	scaleY(y) y軸を使用して要素をスケール変換するために使用します
8	scaleY(y) Z軸を使用して要素を変換するために使用されます
9	rotateX(angle) x軸を使用して要素を回転変換するために使用します
10	rotateY(angle) y軸を使用して要素を回転変換するために使用します
11	rotateZ(angle) Z軸を使用して要素を回転変換するために使用します

X軸3D変換

次の例は、x軸3D変換を示しています。

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            -webkit-transform: rotateX(150deg);

           /*Safari*/
            transform: rotateX(150deg);

           /*Standard syntax*/
         }
      </style>
   </head>

   <body>

      <div>
         tutorials point.com
      </div>

      <p>Rotate X-axis</p>

      <div id = "myDiv">
         tutorials point.com.
      </div>

   </body>
</html>

それは次の結果を生成します-

Y軸3D変換

次の例は、y軸の3D変換を示しています-

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg);

           /*Safari*/
            transform: rotateY(150deg);

           /*Standard syntax*/
         }
      </style>
   </head>

   <body>

      <div>
         tutorials point.com
      </div>

      <p>Rotate Y axis</p>

      <div id = "yDiv">
         tutorials point.com.
      </div>

   </body>
</html>

それは次の結果を生成します-

Z軸3D変換

次の例は、Z軸3D変換を示しています-

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg);

           /*Safari*/
            transform: rotateZ(90deg);

           /*Standard syntax*/
         }
      </style>
   </head>

   <body>
      <div>
         tutorials point.com
      </div>

      <p>rotate Z axis</p>

      <div id = "zDiv">
         tutorials point.com.
      </div>
   </body>
</html>

それは次の結果を生成します-

CSS3-アニメーション

アニメーションは、形状を変更し、要素を使用してモーションを作成するプロセスです。

@keyframes

キーフレームは、CSS3の中間アニメーションステップを制御します。

左アニメーションのキーフレームの例-

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

上記の例は、キーフレーム構文を使用してアニメーションの高さ、幅、色、名前、および継続時間を示しています。

左のアニメーションを移動する

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Tutorials Point</h1>
      <p>this is an example of moving left animation .</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

それは次の結果を生成します-

キーフレームを使用した左アニメーションの移動

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Tutorials Point</h1>

      <p>This is an example of animation left with an extra keyframe
         to make text changes.</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

それは次の結果を生成します-

CSS3-複数列

CSS3は、テキストを新聞の構造として配置するために複数の列をサポートしていました。

以下に示すように、最も一般的に使用される複数列のプロパティの一部-

Sr.No.	Value & Description
1	column-count 要素を分割する列の数をカウントするために使用されます。
2	column-fill 列の入力方法を決定するために使用されます。
3	column-gap 列間のギャップを決定するために使用されます。
4	column-rule ルールの数を指定するために使用されます。
5	rule-color 列ルールの色を指定するために使用されます。
6	rule-style 列のスタイルルールを指定するために使用されます。
7	rule-width 幅を指定するために使用されます。
8	column-span 列間のスパンを指定するために使用されます。

例

以下の例は、新しい紙の構造としてのテキストの配置を示しています。

<html>
   <head>
      <style>
         .multi {
           /*Column count property*/
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;

           /*Column gap property*/
            -webkit-column-gap: 40px;
            -moz-column-gap: 40px;
            column-gap: 40px;

           /*Column style property*/
            -webkit-column-rule-style: solid;
            -moz-column-rule-style: solid;
            column-rule-style: solid;
         }
      </style>
   </head>

   <body>

      <div class = "multi">
         Tutorials Point originated from the idea that there exists a class
         of readers who respond better to online content and prefer to learn
         new skills at their own pace from the comforts of their drawing rooms.
         The journey commenced with a single tutorial on HTML in 2006 and elated
         by the response it generated, we worked our way to adding fresh tutorials
         to our repository which now proudly flaunts a wealth of tutorials and
         allied articles on topics ranging from programming languages to web
         designing to academics and much more.
      </div>

   </body>
</html>

それは次の結果を生成します-

ために、ユーザーが行なしで新しい紙としてテキストを作成したい場合、以下に示すようにスタイルの構文を削除することでこれを行うことができます-

.multi {
  /*Column count property*/
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;

  /*Column gap property*/
   -webkit-column-gap: 40px;
   -moz-column-gap: 40px;
   column-gap: 40px;
}

それは次の結果を生成します-

CSS3-ユーザーインターフェイス

ユーザーインターフェイスプロパティを使用すると、任意の要素をいくつかの標準ユーザーインターフェイス要素のいずれかに変更できます。

css3ユーザーインターフェイスで使用されている一般的なプロパティの一部。

Sr.No.	Value & Description
1	appearance ユーザーが要素をユーザーインターフェイス要素として作成できるようにするために使用されます。
2	box-sizing ユーザーがエリアの要素を明確に修正できるようにします。
3	icon エリアにアイコンを提供するために使用されます。
4	resize エリア上にある要素のサイズを変更するために使用されます。
5	outline-offset アウトラインの背後に描画するために使用されます。
6	nav-down キーパッドの下矢印ボタンを押したときに下に移動するために使用します。
7	nav-left キーパッドの左矢印ボタンを押したときに左に移動するために使用します。
8	nav-right キーパッドの右矢印ボタンを押したときに右に移動するために使用します。
9	nav-up キーパッドの上矢印ボタンを押したときに上に移動するために使用されます。

サイズ変更プロパティの例

以下に示すように、サイズ変更プロパティには3つの一般的な値があります-

水平
垂直
both

css3ユーザーインターフェイスのサイズ変更プロパティで both 値を使用する-

<html>
   <head>
      <style>
         div {
            border: 2px solid;
            padding: 20px;
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
   </head>

   <body>
      <div>finddevguides.com</div>
   </body>
</html>

それは次の結果を生成します-

CSS3アウトラインオフセット

アウトラインとは、境界の外側で要素の周りに線を引くことを意味します。

<html>
   <head&gt
      <style>
         div {
            margin: 20px;
            padding: 10px;
            width: 300px;
            height: 100px;
            border: 5px solid pink;
            outline: 5px solid green;
            outline-offset: 15px;
         }
      </style>
   </head>

   <body>
      <div>finddevguides</div>
   </body>
</html>

それは次の結果を生成します-

CSS3-ボックスサイズ

ボックスのサイズ変更プロパティを使用して、要素の高さと幅を変更します。

css2以来、ボックスプロパティは次のように機能しました-

'__ width + padding + border =要素のボックスの実際の表示/レンダリングされた幅

height + padding + border =要素のボックスの実際の表示/レンダリングされた高さ '__

高さと幅を設定すると、指定されたサイズよりも少し大きく表示され、要素のボーダーとパディングが要素の高さと幅に追加されます。

CSS2サイジングプロパティ

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">finddevguides.com</div><br/>
      <div class = "div2">finddevguides.com</div>
   </body>
</html>

それは次の結果を生成します-

上記の画像は2つの要素の幅と高さが同じですが、結果は異なります。2番目の要素にはパディングプロパティが含まれています。

CSS3ボックスサイズ設定プロパティ

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">finddevguides.com</div><br/>
      <div class = "div2">finddevguides.com</div>
   </body>
</html>

上記のサンプルは、 box-sizing：border-box と同じ高さと幅を持っています。結果は以下のとおりです。

それは次の結果を生成します-

上記の要素は、box-sizing：border-boxで同じ高さと幅を持っているため、結果は上記のように両方の要素で常に同じです。

CSS-レスポンシブ

CSS3レスポンシブWebデザイン

レスポンシブWebデザインは、デスクトップ、モバイル、タブなどのさまざまなデバイスで最小限のサイズ変更を行うだけで、最適なエクスペリエンス、読みやすいナビゲーション、簡単なナビゲーションを提供します。

応答構造

以下の画像は、Webページのレスポンシブ構造を示しています。

responsive

柔軟なグリッドデモ

<html>
   <head>
      <style>
         body {
            font: 600 14px/24px "Open Sans",
               "HelveticaNeue-Light",
               "Helvetica Neue Light",
               "Helvetica Neue",
               Helvetica, Arial,
               "Lucida Grande",
               Sans-Serif;
         }
         h1 {
            color: #9799a7;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
         }
         .container:before, .container:after {
            content: "";
            display: table;
         }
         .container:after {
            clear: both;
         }
         .container {
            background: #eaeaed;
            margin-bottom: 24px;
            *zoom: 1;
         }
         .container-75 {
            width: 75%;
         }
         .container-50 {
            margin-bottom: 0;
            width: 50%;
         }
         .container, section, aside {
            border-radius: 6px;
         }
         section, aside {
            background: #2db34a;
            color: #fff;
            margin: 1.858736059%;
            padding: 20px 0;
            text-align: center;
         }
         section {
            float: left;
            width: 63.197026%;
         }
         aside {
            float: right;
            width: 29.3680297%;
         }
      </style>
   </head>

   <body>

      <h1>100% Wide Container</h1>

      <div class = "container">
         <section>Section</section>
         <aside>Aside</aside>
      </div>

      <h1>75% Wide Container</h1>

      <div class = "container container-75">
         <section>Section</section>
         <aside>Aside</aside>
      </div>

      <h1>50% Wide Container</h1>

      <div class = "container container-50">
         <section>Section</section>
         <aside>Aside</aside>
      </div>

   </body>
</html>

それは次の結果を生成します-

メディアクエリ

メディアクエリは、モバイル、デスクトップなどのさまざまなサイズのデバイスのさまざまなスタイルルール用です。

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>

   <body>
      <p>
         If screen size is less than 420px, then it will show lightblue
         color, or else it will show light pink color
      </p>
   </body>
</html>

それは次の結果を生成します-

ブートストラップレスポンシブWebデザイン

ブートストラップは、HTML、CSS、およびJavaスクリプトに基づく最も人気のあるWebデザインフレームワークであり、すべてのデバイスに対してレスポンシブな方法でWebページをデザインするのに役立ちます。

<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style>
         body {
            color:green;
         }
      </style>
   </head>

   <body>

      <div class = "container">

         <div class = "jumbotron">
            <h1>Tutorials point</h1>
            <p>
               Tutorials Point originated from the idea that there exists a class
               of readers who respond better to online content and prefer to learn
               new skills at their own pace from the comforts of their drawing rooms.
            </p>
         </div>

         <div class = "row">
            <div class = "col-md-4">
               <h2>Android</h2>
               <p>
                  Android is an open source and Linux-based operating system for mobile
                  devices such as smartphones and tablet computers. Android was developed
                  by the Open Handset Alliance, led by Google, and other companies.
               </p>
         </div>

         <div class = "col-md-4">
            <h2>CSS</h2>
            <p>
               Cascading Style Sheets, fondly referred to as CSS, is a simple design
               language intended to simplify the process of making web pages presentable.
            </p>
         </div>

         <div class = "col-md-4">
            <h2>Java</h2>
            <p>
               Java is a high-level programming language originally developed by Sun
               Microsystems and released in 1995. Java runs on a variety of platforms,
               such as Windows, Mac OS, and the various versions of UNIX. This tutorial
               gives a complete understanding of Java.
            </p>
         </div>
      </div>

   </body>
</html>

それは次の結果を生成します- Css-questions-answers

CSS2-リファレンスガイド

これは、World Wide Web Consortiumのカスケードスタイルシートの推奨仕様、レベル2で定義されているすべてのCSSプロパティをリストしたWeb開発者向けの完全なリファレンスガイドです。

リンク：/css/css_aural_references [Aural]
リンク：/css/css_background_references [背景]
リンク：/css/css_border_references [境界線]
リンク：/css/css_classification_references [分類]
リンク：/css/css_dimension_references [ディメンション]
リンク：/css/css_font_references [フォント]

リンク：/css/css_content_references [生成されたコンテンツ]
リンク：/css/css_list_references [リストとマーカー]
リンク：/css/css_margin_references [マージン]
リンク：/css/css_outlines_references [概要]
リンク：/css/css_padding_references [パディング]
リンク：/css/css_position_references [配置]

リンク：/css/css_table_references [テーブル]
リンク：/css/css_text_references [テキスト]
リンク：/css/css_print_references [印刷]
リンク：/css/css_pseudo_references [疑似クラス]
リンク：/css/css_pseudo_references [疑似要素]

例とその説明を表示するには、任意のプロパティをクリックしてください-

Sr.No.	Property & Description
1	azimuth リスナーの環境の水平軸に沿った音源の位置を記述します。
2	background 次のプロパティの複合プロパティ- 背景アタッチメント背景色背景画像背景位置バックグラウンドリピート
3	background-attachment 背景画像をウィンドウ内で固定するか、ドキュメントのスクロールに合わせてスクロールするかを決定します。
4	background-color 要素の背景色を設定します。
5	background-image 要素の背景画像を設定します。
6	background-position 指定されている場合、要素の背景画像の初期位置を設定します。値は通常、x、y位置を提供するためにペアにされます。デフォルトの位置は0％0％です。
7	background-repeat 要素全体で背景画像を繰り返す（並べる）方法を決定します。
8	border 要素の境界線の4つすべてを設定します。 valueは、色、_border-width_の値、および_border-style._の値の1つ以上です。
9	border-bottom 要素の下ボーダーを設定します。 valueは、色、_border-bottom-width_の値、および_border-style_の値の1つ以上です。
10	border-bottom-width 要素の下の境界線の太さを設定します。
11	border-collapse テーブルの境界線レンダリングアルゴリズムを設定します。
12	border-color 要素の境界線の4つすべての色を設定します。デフォルトは要素の色です。
13	border-left-color 要素の左境界線の色を設定します。デフォルトは要素の色です。
14	border-right-color 要素の右境界線の色を設定します。デフォルトは要素の色です。
15	border-top-color 要素の上部境界線の色を設定します。デフォルトは要素の色です。
16	border-bottom-color 要素の下の境界線の色を設定します。デフォルトは要素の色です。
17	border-left 要素の左境界線を設定します。 valueは、色、_border-left-width_の値、および_border-style_の値の1つ以上です。
18	border-left-width 要素の左境界線の太さを設定します。
19	border-right 要素の右境界線を設定します。 valueは、色、_border-right-width_の値、および_border-style_の値の1つ以上です。
20	border-right-width 要素の右境界線の太さを設定します。
21	border-spacing 個別の境界線では、境界線の間隔を設定します。 1つの値は垂直および水平間隔を設定し、2つの値はそれぞれ水平および垂直間隔を設定します。
22	border-style 要素の境界線の4つすべてのスタイルを設定します。
23	border-top 要素の上境界線を設定します。 valueは、色、_border-top-width_の値、および_border-style_の値の1つ以上です。
24	border-top-width 要素の上部境界線の太さを設定します。
25	border-width 要素の境界線の4つすべての太さを設定します。
26	bottom _position_プロパティとともに使用して、要素の下端を配置します。
27	caption-side テーブルキャプションの位置を設定します。
28	clear 要素のどのマージンがフローティング要素に隣接してはならないかを設定します。そのマージンが明確になるまで要素は下に移動します。
29	clip 要素のクリッピングマスクを設定します。
30	color 要素の色を設定します。
31	content 生成されたコンテンツを要素の周りに挿入します。
32	counter-increment カウンターを1増やします。 valueはカウンタ名のリストであり、各名前にはオプションで値が後に続きます。
33	counter-reset カウンターをゼロにリセットします。 valueはカウンタ名のリストであり、各名前にはオプションでリセットされる値が続きます。
34	cue-after 要素が話された後、指定された音を再生します。
35	cue-before 要素が話される前に指定された音を再生します。
36	cursor カーソルの形状を定義します。
37	direction 要素コンテンツのフローの方向を定義します。
38	display 要素の表示方法を制御します。
39	elevation サウンドが再生される高さを設定します。
40	empty-cells 別の境界線で、テーブル内の空のセルを非表示にします。
41	float 要素が左または右に浮くかどうかを決定し、テキストがその周りを回り込むか、インラインで表示されるようにします。
42	font 要素のすべてのフォント属性を設定します。値は次の値のいずれかです- フォントスタイルフォントバリアントフォントの太さフォントサイズ行の高さフォントファミリー
43	font-family 特定のフォント、または一般的なセリフ、サンセリフ、筆記体、ファンタジー、モノスペースのいずれかとして、要素のフォントを定義します。
44	font-size フォントサイズを定義します。
45	font-size-adjust 現在のフォントのアスペクト比を調整します。
46	font-stretch 現在のフォントを引き伸ばす量を決定します。
47	font-style 顔のスタイルを定義します。通常のスタイルまたは斜めのスタイルのタイプです。
48	font-variant フォントをスモールキャップに定義します。
49	font-weight フォントの太さを定義します。数値を使用する場合、100〜900の100の倍数でなければなりません。 400は通常、700はキーワードboldと同じです。
50	height 要素の高さを定義します。
51	left _position_プロパティとともに使用して、要素の左端を配置します。
52	letter-spacing テキスト文字の間に追加のスペースを挿入します。
53	line-height 隣接するテキストベースライン間の距離を設定します。
54	list-style の値のいずれかを使用してリスト関連のスタイルを定義します- リストスタイル画像リストスタイルの位置リストスタイルタイプ
55	list-style-image の値の代わりに、リスト項目のマーカーとして使用される画像を定義します- リストスタイルタイプ
56	list-style-position 項目のコンテンツに関してリスト項目のマーカーをインデントまたは拡張します（デフォルト）。
57	list-style-type 順序付けられていないリスト（円、ディスク、または正方形）または順序付けられたリスト（10進数、下アルファ、下ローマ、なし、上アルファ、または上ローマ）のリストアイテムのマーカーを定義します。
58	margin 要素の4つのマージンすべてを定義します。
59	margin-bottom 要素の下マージンを定義します。デフォルト値は0です。
60	margin-left 要素の左マージンを定義します。デフォルト値は0です。
61	margin-right 要素の右マージンを定義します。デフォルト値は0です。
62	margin-top 要素の上マージンを定義します。デフォルト値は0です。
63	marker-offset マーカーオフセットプロパティは、マーカーボックス（または箇条書き）の最も近い境界エッジとそれに関連付けられている主なボックスとの間の距離を指定するために、箇条書きリストで使用できます。
64	marks マークプロパティは、ページングされたメディアにクロップマークとクロスマークを設定するために使用されます。これは、@ pageルールで使用されます。
65	max-height max-heightプロパティは、要素の高さを制限するために使用されます。
66	max-width max-widthプロパティは、要素の最大幅を設定するために使用されます。
67	min-height min-heightプロパティは、要素の高さを制限するために使用されます。
68	min-width min-widthプロパティは、要素の幅を制限するために使用されます。
69	orphans 孤立した段落フラグメントで許可される最小行数を設定します。
70	outline アウトラインプロパティは、すべてのアウトラインプロパティを指定するための簡略プロパティです。
71	outline-color アウトラインの色を指定するには、outline-colorプロパティを使用します。 borderプロパティとは異なり、outlineは余分なスペースを占有せず、長方形ではないことに注意してください。
72	outline-color-style outline-styleプロパティは、アウトラインのスタイルを指定するために使用されます。 borderプロパティとは異なり、outlineは余分なスペースを占有せず、長方形ではないことに注意してください。
73	outline-width アウトラインの色を指定するには、outline-colorプロパティを使用します。 borderプロパティとは異なり、outlineは余分なスペースを占有せず、長方形ではないことに注意してください。
74	overflow オーバーフローコンテンツのレンダリング方法を決定します。
75	padding 要素の周りの4つのパディング量をすべて定義します。
76	padding-bottom 要素の下のパディングを定義します。デフォルト値は0です。
77	padding-left 要素の左パディングを定義します。デフォルト値は0です。
78	padding-right 要素の右パディングを定義します。デフォルト値は0です。
79	padding-top 要素の上部パディングを定義します。デフォルト値は0です。
80	page 名前付きページレイアウトを要素に関連付けます。
81	page-break-after 要素の後の改ページを強制または抑制します。
82	page-break-before 要素の前で改ページを強制または抑制します。
83	page-break-inside 要素内の改ページを抑制します。
84	pause pauseプロパティは、音声メディアで一時停止を指定するための省略形プロパティを指定するためのCSSの省略形です。
85	pause-after 要素を話すとメディアを一時停止します。
86	pause-before 要素を話す前にメディアを一時停止します。
87	pitch 要素の音声コンテンツの平均ピッチを設定します。
88	pitch-range ピッチの範囲を0（フラット）から100（ブロード）に設定します。デフォルトは50です。
89	play-during URLが指定されている場合、要素の音声コンテンツ中に再生され、_repeat_を指定すると音声がループされます。 _mix_は、他のバックグラウンドオーディオと置き換えるのではなく、ミックスするようにします。
90	position 要素の位置決めモデルを設定します。
91	quotes テキストの引用に使用される引用記号を設定します。
92	richness 音声の豊かさを0（フラット）から100（まろやかな）に設定します。デフォルトは50です。
93	right _position_プロパティとともに使用して、要素の右端を配置します。
94	size サイズプロパティは、ページメディアでページのサイズを指定するために使用されます。
95	speak 要素のコンテンツがどのように話されるかを決定します。
96	speak-header 行または列ごとにテーブルヘッダーを1回読み上げるか、セルを読み上げるたびに読み上げるかを決定します。
97	speak-numeral 数字の読み方を決定します。
98	speak-punctuation 句読点を使用するか、語形変化に使用するかを決定します。
99	speech-rate スピーチの速度を設定します。数値は、1分あたりの単語数でレートを設定します。
100	stress 音声のストレスを0（カタトニック）から100（ハイパーアクティブ）に設定します。デフォルトは50です。
101	table-layout テーブルレンダリングアルゴリズムを決定します。
102	text-align 要素のテキスト配置スタイルを設定します。
103	text-decoration テキストの装飾を定義します。値を組み合わせることができます。
104	text-indent 要素内のテキストの最初の行のインデントを定義します。デフォルトは0です。
105	text-shadow さまざまな色とオフセットのテキストドロップシャドウを作成します。
106	text-transform それに応じて要素内のテキストを変換します。
107	top _position_プロパティとともに使用して、要素の上端を配置します。
108	vertical-align 要素の垂直方向の配置を設定します。
109	visibility ドキュメントまたはテーブルに要素が表示されるかどうかを決定します。
110	voice-family 要素のコンテンツを話す名前付き音声ファミリを選択します。
111	volume 音声コンテンツの音量を設定します。数値の範囲は0〜100です。
112	white-space 要素内の空白の処理方法を定義します。
113	widows 未亡人の段落フラグメントで許可される最小行数を設定します。
114	width 要素の幅を定義します。
115	word-spacing 単語間に追加のスペースを挿入します。
116	z-index 現在の要素のレンダリングレイヤーを設定します。

擬似クラスと擬似要素

Sr.No.	Property & Description
1	:active このクラスを使用して、アクティブ化された要素に特殊効果を追加します。
2	:focus このクラスを使用して、要素にフォーカスがあるときに要素に特殊効果を追加します。
3	:hover このクラスを使用して、要素の上にマウスを置いたときに要素に特殊効果を追加します。
4	:link このクラスを使用して、未訪問のリンクに特殊効果を追加します。
5	:visited このクラスを使用して、訪問したリンクに特殊効果を追加します。
6	:first-child このクラスを使用して、他の要素の最初の子である要素に特殊効果を追加します。
7	:lang このクラスを使用して、指定された要素で使用する言語を指定します。
8	:first-letter この要素を使用して、テキストの最初の文字に特殊効果を追加します。
9	:first-line この要素を使用して、テキストの最初の行に特殊効果を追加します。
10	:before この要素を使用して、要素の前にコンテンツを挿入します。
11	:after この要素を使用して、要素の後にコンテンツを挿入します。

CSS-色参照

次の表は、8ビットグラフィックカードが提供する16色をサポートするために、HTML 3.2で導入された16色の名前を示しています。 CSSで同じ色のセットを使用できます-

Color Name	Hex Value	Show
aqua	#00ffff	Demo
black	#000000	Demo
blue	#0000ff	Demo
fuchsia	#ff00ff	Demo
green	#008000	Demo
gray	#808080	Demo
lime	#00ff00	Demo
maroon	#800000	Demo
navy	#000080	Demo
olive	#808000	Demo
purple	#800080	Demo
red	#ff0000	Demo
silver	#c0c0c0	Demo
teal	#008080	Demo
white	#ffffff	Demo
yellow	#ffff00	Demo

他にもHTMLやXHTMLの一部ではない色がありますが、IEまたはNetscapeのほとんどのバージョンでサポートされています。これらの色名はCSSでも使用できます。

Color Name	Hex Value	Show
aliceblue	#f0f8ff	Demo
antiquewhite	#faebd7	Demo
aquamarine	#7fffd4	Demo
azure	#f0ffff	Demo
beige	#f5f5dc	Demo
bisque	#ffe4c4	Demo
blanchedalmond	#ffebcd	Demo
blueviolet	#8a2be2	Demo
brown	#a52a2a	Demo
burlywood	#deb887	Demo
cadetblue	#5f9ea0	Demo
chartreuse	#7fff00	Demo
chocolate	#d2691e	Demo
coral	#ff7f50	Demo
cornflowerblue	#6495ed	Demo
cornsilk	#fff8dc	Demo
crimson	#dc143c	Demo
cyan	#00ffff	Demo
darkblue	#00008b	Demo
darkcyan	#008b8b	Demo
darkgoldenrod	#b8860b	Demo
darkgray	#a9a9a9	Demo
darkgreen	#006400	Demo
darkkhaki	#bdb76b	Demo
darkmagenta	#8b008b	Demo
darkolivegreen	#556b2f	Demo
darkorange	#ff8c00	Demo
darkorchid	#9932cc	Demo
darkred	#8b0000	Demo
darksalmon	#e9967a	Demo
darkseagreen	#8fbc8f	Demo
darkslateblue	#483d8b	Demo
darkslategray	#2f4f4f	Demo
darkturquoise	#00ced1	Demo
darkviolet	#9400d3	Demo
deeppink	#ff1493	Demo
deepskyblue	#00bfff	Demo
dimgray	#696969	Demo
dodgerblue	#1e90ff	Demo
firebrick	#b22222	Demo
floralwhite	#fffaf0	Demo
forestgreen	#228b22	Demo
gainsboro	#dcdcdc	Demo
ghostwhite	#f8f8ff	Demo
gold	#ffd700	Demo
goldenrod	#daa520	Demo
gray	#808080	Demo
greenyellow	#adff2f	Demo
honeydew	#f0fff0	Demo
hotpink	#ff69b4	Demo
indianred	#cd5c5c	Demo
indigo	#4b0082	Demo
ivory	#fffff0	Demo
khaki	#f0e68c	Demo
lavender	#e6e6fa	Demo
lavenderblush	#fff0f5	Demo
lawngreen	#7cfc00	Demo
lemonchiffon	#fffacd	Demo
lightblue	#add8e6	Demo
lightcoral	#f08080	Demo
lightcyan	#e0ffff	Demo
lightgoldenrodyellow	#fafad2	Demo
lightgreen	#90ee90	Demo
lightgrey	#d3d3d3	Demo
lightpink	#ffb6c1	Demo
lightsalmon	#ffa07a	Demo
lightseagreen	#20b2aa	Demo
lightskyblue	#87cefa	Demo
lightslategray	#778899	Demo
lightsteelblue	#b0c4de	Demo
lightyellow	#ffffe0	Demo
limegreen	#32cd32	Demo
linen	#faf0e6	Demo
magenta	#ff00ff	Demo
mediumblue	#0000cd	Demo
mediumorchid	#ba55d3	Demo
mediumpurple	#9370db	Demo
midnightblue	#191970	Demo
mistyrose	#ffe4e1	Demo
moccasin	#ffe4b5	Demo
oldlace	#fdf5e6	Demo
orange	#ffa500	Demo
orchid	#da70d6	Demo
peachpuff	#ffdab9	Demo
peru	#cd853f	Demo
pink	#ffc0cb	Demo
plum	#dda0dd	Demo
purple	#800080	Demo
rosybrown	#bc8f8f	Demo
royalblue	#4169e1	Demo
salmon	#fa8072	Demo
sandybrown	#f4a460	Demo
seagreen	#2e8b57	Demo
sienna	#a0522d	Demo
skyblue	#87ceeb	Demo
slateblue	#6a5acd	Demo
steelblue	#4682b4	Demo
tan	#d2b48c	Demo
thistle	#d8bfd8	Demo
tomato	#ff6347	Demo
violet	#ee82ee	Demo
wheat	#f5deb3	Demo
whitesmoke	#f5f5f5	Demo
yellow	#ffff00	Demo
yellowgreen	#9acd32	Demo

CSS-ブラウザーサポートリファレンス

CSS3ブラウザサポートリファレンス

以下のリストには、特定のWebブラウザでサポートされているプロパティが含まれています-

Properties	Internet Explorer	Fire fox	Chrome	Safari	Opera
align-content	11	28	21	webkit−7	12.1
align-self	11	20	21	webkit−7	12.1
CSS min/max-width/height	7	2-38	4-43	3.1-8.0	9-29
CSS 2.1 selectors	7-TP!	2-38	4-43	3.1-8.0	9-29
CSS3 Text-overflow	7-TP!	2-38	4-43	3.1-8.0	9-29
CSS inline-block	8-TP!	3-38	4-43	3.1-8.0	9-29
CSS Counters	8-TP!	2-38	4-43	3.1-8.0	9-29
CSS Table display	8-TP!	2-38	4-43	3.1-8.0	9-29
CSS3 Opacity	9-TP!	2-38	4-43	3.1-8.0	9-29
CSS3 selectors	9-TP!	3.5-38	4-43	3.1-8.0	9.5-29
CSS Generated content for pseudo-elements	9-TP!	2-38	4-43	3.1-8.0	9-29
CSS3 Media Queries	9-TP!	3.5-38	4-43	4-8.0	9.5-29
CSS position:fixed	7-TP!	2-38	4-43	3.1-8.0	9-29
CSS3 Colors	9-TP!	3-38	4-43	3.1-8.0	10-29
CSS3 Multiple backgrounds	9-TP!	3-38	4-43	3.1-8.0	10-29
@font-face Web fonts	9-TP!	3.5-38	4-43	3.2-8.0	10-29
getComputedStyle	9-TP!	4-38	11-43	5-8.0	10-29
rem (root em) units	9-TP!	3.6-38	6-43	5-8.0	11.6-29
CSS3 Border-radius (rounded corners)	9-TP!	4-38	5-43	5-8.0	10.5-29
CSS3 Box-shadow	9-TP!	4-38	10-43	5.1-8.0	10.5-29
SVG in CSS backgrounds	9-TP!	24-38	5-43	5.1-8.0	9-29
CSS3 Transitions	10-TP!	16-38	26-43	6.1-8.0	12.1-29
CSS Gradients	10-TP!	16-38	26-43	6.1-8.0	12.1-29
CSS pointer-events (for HTML)	11-TP!	3.6-38	4-43	3.1-8.1	9-15
CSS Repeating Gradients	10-TP!	16-38	26-43	6.1-8.0	12.1-29
TTF/OTF - TrueType and OpenType font support	9-TP!	3.5-38	4-43	3.1-8.0	10-29
CSS3 Animation	10-TP!	16-38	4-43	4-8.0	12.1-15
CSS outline	9-TP!	2-38	4-43	3.1-8.0	12.1-15
CSS3 Text-shadow	10-TP!	3.5-38	4-43	4-8.0	9.5-29
CSS3 Border images	11-TP!	15-38	16-43	6-8.0	11-15
CSS user-select: none	10-TP!	2-38	6-43	3.1-8.0	9-15
CSS background-position edge offsets	9-TP!	13-38	25-43	7-8.0	10.5-29
CSS3 3D Transforms	10-TP!	16-38	36-43	4-8.0	9-23
Improved kerning pairs & ligatures	5.5-TP!	3-38	4-43	5-8.0	9-15
CSS3 Background-image options	9-TP!	4-38	15‒43	7-8.0	10.5-29
MPEG-4/H.264 video format	9-TP!	4-38	4‒43	3.2-8.0	9-25
::selection CSS pseudo-element	9-TP!	2-38	4‒43	3.1-8.0	9.5-29
CSS3 Overflow-wrap	5.5-TP!	3.5-38	23‒43	6.1-8.0	12.1-29
Flexible Box Layout Module	11-TP!	28-38	29‒43	6.1-8.0	12.1-29
CSS Appearance	10-TP!	15-38	4‒43	6.1-8.0	9-15
calc() as CSS unit value	9-TP!	19-38	26‒43	6.1-8.0	9-15
Viewport units: vw, vh, vmin, vmax	9-TP!	19-38	26‒43	6.1-8.0	9-15
CSS3 Cursors (original values)	9-TP!	4-38	5‒43	5-8.0	9-15
CSS3 tab-size	10-TP!	3.6-38	21‒43	6.1-8.0	10.6-15
Font feature settings	10-TP!	34-38	21‒43	3.1-8.0	9-15
CSS box-decoration-break	5.5-TP!	32-38	22‒43	6.1-8.0	11-15
Media Queries: resolution feature	9-TP!	16-38	29‒43	4-8.0	12.1-29
CSS Feature Queries	5.5-TP!	22-38	28‒43	3.1-8.0	12.1-29
CSS3 word-break	5.5-TP!	15-38	4‒43	3.1-8.0	9-15
CSS Canvas Drawings	5.5-TP!	2-38	4‒43	4-8.0	9-15
CSS text-stroke	5.5-TP!	4-38	4‒43	3.1-8.0	9-15
CSS Reflections	5.5-TP!	2-38	4‒43	4-8.0	9-15
Intrinsic & Extrinsic Sizing	5.5-TP!	4-38	22‒43	6.1-8.0	9-15
Font unicode-range subsetting	9-TP!	2-34	4‒35	3.1-8.0	9-23

CSS-Webセーフフォントリファレンス

フォントの組み合わせ

CSS3は、フォントの組み合わせテクノロジーを採用しています。ここでは、ブラウザが最初のフォントをサポートしていない場合、次のフォントを試します。

セリフフォント

Font family	Normal	bold
Georgia, serif	This is normal text.	This is normal text.
"Times New Roman", Times, serif	This is normal text.	This is normal text.
"Palatino Linotype", Palatino, "Book Antiqua", serif	This is normal text.	This is normal text.

サンセリフフォント

Font family	Normal	bold
Arial, Helvetica, sans-serif	This is normal text.	This is normal text.
"Arial Black", Gadget, sans-serif	This is normal text.	This is normal text.
Impact, Charcoal, sans-serif	This is normal text.	This is normal text.
Impact, Charcoal, sans-serif	This is normal text.	This is normal text.
Tahoma, Geneva, sans-serif	This is normal text.	This is normal text.
"Trebuchet MS", Helvetica, sans-serif	This is normal text.	This is normal text.
Verdana, Geneva, sans-serif	This is normal text.	This is normal text.

等幅フォント

Font family	Normal	bold
Courier, monospace	This is normal text.	This is normal text.
"Courier New", Courier, monospace	This is normal text.	This is normal text.
"Lucida Console", Monaco, monospace	This is normal text.	This is normal text.

筆記体フォント

Font family	Normal	bold
"Comic Sans MS", cursive	This is normal text.	This is normal text.
"Courier New", Courier, monospace	This is normal text.	This is normal text.
"Lucida Console", Monaco, monospace	This is normal text.	This is normal text.

CSS-ユニット

CSSユニット

CSSには、幅、マージン、パディング、フォントサイズ、ボーダー幅などのさまざまな単位のいくつかの単位があります。それは数値と長さの単位の間に空白を許可しません。長さの単位は次のように分割されています-

相対単位
絶対の

相対単位

長さは、他の長さプロパティに対して相対的に互いに相対的であり、相対長さ単位と呼ばれます。

Units	Abbreviation
Pixels	px
Points	pt
Inches	in
Centimeters	cm
Picas	pc

相対単位

相対単位では、長さの値は固定され、要素の正確なサイズが表示されます

Units	Abbreviation
Percent	%
Em	em
Ex	ex
Root em	rem
Viewport width	vw
Viewport width	vh
Viewport width	vm
character	ch
Grid	gd

CSS-アニメーション

アニメーション

アニメーション*は、モーションエフェクトを作成して外観を変更するプロセスです。CSSは、イベントモーションを変更するためにさまざまなアニメーションエフェクトをサポートしています。

次の表は、CSSで使用できるすべての効果を示しています-

Sr.No.	Method & Description
1	Bounce バウンスアニメーション効果を使用して、要素をヒットした後、要素をすばやく上、後ろ、またはサーフェスから遠ざけます。
2	Bounce In バウンスアニメーション効果を使用して、要素をヒットした後、要素をすばやく上、後ろ、またはサーフェスから遠ざけます。
3	Bounce In Down バウンスアニメーション効果は、ヒットした後、要素をすばやく上、後ろ、または表面から遠ざけるために使用されます。
4	Bounce In Left バウンスアニメーション効果を使用して、要素をヒットした後、要素をすばやく上、後ろ、またはサーフェスから遠ざけます。
5	Bounce In Right バウンスアニメーション効果を使用して、要素をヒットした後、要素をすばやく上、後ろ、またはサーフェスから遠ざけます。
6	Bounce Out バウンスアニメーション効果を使用して、要素をヒットした後、要素をすばやく上、後ろ、またはサーフェスから遠ざけます。
7	Bounce Out Down バウンスアニメーション効果を使用して、要素をヒットした後、要素をすばやく上、後ろ、またはサーフェスから遠ざけます。
8	Bounce Up バウンスアニメーションエフェクトを使用して、要素を叩いた後、要素を素早く上下に移動したり、サーフェスから遠ざけたりします。
9	Bounce Out Left バウンスアニメーション効果を使用して、要素をヒットした後、要素をすばやく上、後ろ、またはサーフェスから遠ざけます。
10	Bounce Out Right バウンスアニメーションエフェクトを使用して、要素を叩いた後、要素を素早く上下に移動したり、サーフェスから遠ざけたりします。
11	Bounce Out Up バウンスアニメーション効果を使用して、要素をヒットした後、要素をすばやく上、後ろ、またはサーフェスから遠ざけます。
12	Fade Down Big 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
13	Fade In 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
14	Fade In Down 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
15	Fade In Left 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
16	Fade In Left Big 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
17	Fade In Right 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
18	Fade In Right Big 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
19	Fade in Up 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
20	Fade In Up Big 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
21	Fade Out 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
22	Fade Out Down 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
23	Fade Out Left 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
24	Fade Out Left Big 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
25	Fade Out Right 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
26	Fade Out Right Big 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
27	Fade Out Up 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりします。
28	Fade Out UP Big 画像が徐々に現れたり、見えなくなったり、別のショットに結合したりする
29	Flash 要素の明るい光の突然の短いバースト。
30	Flip エレメントは、突然の素早い動きで裏返したり、裏返しになったりすることがあります。
31	Flip In X エレメントは、突然の素早い動きで裏返したり、裏返しになったりすることがあります。
32	Flip In Y エレメントは、突然の素早い動きで裏返したり、裏返しになったりすることがあります。
33	Flip Out X エレメントは、突然の素早い動きで裏返したり、裏返しになったりすることがあります。
34	Flip Out Y エレメントは、突然の素早い動きで裏返したり、裏返しになったりすることがあります。
35	Hinge エレメントは、突然の素早い動きで裏返したり、裏返しになったりすることがあります。
36	Light Speed In 要素への速度を持つ光または照明を提供します。
37	Light Speed Out 要素への速度を持つ光または照明を提供します。
38	Pulse エレメントに単一の振動または短いバーを提供します。
39	Roll In エレメントは、軸を何度も回転させることで特定の方向に移動できます。
40	Roll Out エレメントは、軸を何度も回転させることで特定の方向に移動できます。
41	Rotate In Down Left エレメントは、軸を何度も回転させることで特定の方向に移動できます。
42	Rotate In エレメントは、軸を何度も回転させることで特定の方向に移動できます。
43	Rotate In Down Right エレメントは、軸を何度も回転させることで特定の方向に移動できます。
44	Wobble 要素を移動したり、左右に不安定に移動させたりします。
45	Rotate In Up Left 軸または中心の周りを円で移動する、または移動させることができます。
46	Rotate In Up Right 軸または中心の周りを円で移動する、または移動させることができます。
47	Winggle それは、小さな急速な動きで上下に、または左右に動くか、または動かすことを提供します。
48	Rotate Out 軸または中心の周りを円で移動する、または移動させることができます。
49	Rotate Out Down Left 軸または中心の周りを円で移動する、または移動させることができます。
50	Rotate Out Down Right 軸または中心の周りを円で移動する、または移動させることができます。
51	Rotate Out Up Left 軸または中心の周りを円で移動する、または移動させることができます。
52	Rotate Out Up Right 軸または中心の周りを円で移動する、または移動させることができます。
53	Shake 要素の上下（またはオブジェクト）の移動を提供します。
54	Swing 吊り下げられた状態で、または軸に沿って要素に移動したり、前後に移動したり、左右に移動したりします。
55	Tada 要素を左右に移動します。

CSS-PxからEmへのコンバーター

PXからEMへのコンバーター

説明書

デフォルトのピクセルサイズは16pxです。
次に、px値を入力してEM値を変換します。
または、要件に基づいてem値をPX値に変換します。

CSS-カラーピッカー

CSSカラーピッカー

CSSアニメーション

リンク：/css/css_animation_bounce_animation [バウンスアニメーション]
リンク：/css/css_animation_roll_animation [ロールアニメーション]
リンク：/css/css_animation_fade_animation [フェードアニメーション]
リンク：/css/css_animation_light_animation [光速アニメーション]
リンク：/css/css_animation_rotate_animation [アニメーションの回転]
リンク：/css/css_animation_others [その他]

Css-quick-guide

CSSとは何ですか？

CSSの利点

誰がCSSを作成および保守しますか？

CSSバージョン

CSS-構文

タイプセレクター

ユニバーサルセレクター

子孫セレクター

クラスセレクター

IDセレクター

子セレクター

属性セレクター

複数のスタイルルール

グループ化セレクター

CSS-包含

埋め込みCSS-<style>要素

属性

インラインCSS-_style_属性

属性

例

外部CSS-<link>要素

属性

例

インポートされたCSS-@importルール

例

CSSルールのオーバーライド

古いブラウザの処理

CSSコメント

例

CSS-測定単位

CSS-色

CSSカラー-16進コード

CSSカラー-短い16進コード

CSSカラー-RGB値

カラーコードの作成

ブラウザの安全な色

CSS-背景

背景色を設定する

背景画像を設定する

背景画像を繰り返す

背景画像の位置を設定する

背景の添付ファイルを設定する

略記プロパティ

CSS-フォント

フォントファミリを設定する

フォントスタイルを設定する

フォントバリアントを設定する

フォントの太さを設定する

フォントサイズを設定する

フォントサイズの調整の設定

フォントストレッチを設定する

略記プロパティ

CSS-テキスト

テキストの色を設定する

テキストの方向を設定する

文字間のスペースを設定する

単語間のスペースを設定する

テキストインデントを設定する

テキストの配置を設定する

テキストを飾る

テキストケースを設定する

テキスト間の空白を設定する

テキストの影を設定する

CSS-画像の使用

画像境界線プロパティ

画像の高さプロパティ

画像の幅プロパティ

-moz-opacityプロパティ

CSS-リンク

リンクの色を設定する

訪問済みリンクの色を設定する

マウスが上にあるときにリンクの色を変更する

アクティブリンクの色を変更する

CSS-テーブル

border-collapseプロパティ

border-spacingプロパティ

キャプション側のプロパティ

empty-cellsプロパティ

table-layoutプロパティ