HTML、CSSの勉強での科目です。
１．HTML・・・内容にあたる部分（ブロックレベル要素）
1）HTMLの要素（要素とは、構成するパーツのようなもの）
①head要素
②body要素
A.ブロックレベル要素
B.インライン要素 （a~i ｋ~v）
２．CSS・・・修飾 ←今回
３．JavaScript・・・動作プログラム
今回からは、CSS（スタイルシート）についてです。
CSSとは、HTMLで記載した内容（文字）を見やすく、強調文字にしたり、大きさを変更したり、色を変更するを行うものです。
２．CSS
(1)<background>
背景に関する指定をまとめて行います。 指定の順序は特にありません。また、必要のない指定は省略出来ます。
・<background-attachment>
画面をスクロールする際、 背景画像をその位置に固定されたままにするか、スクロー
ルに伴って移動するかを指定します。
・<background-color>
背景色を指定します。
ユーザーの環境で文字色が設定されている場合などに、 背景色と文字色が近い色になって文字が読みにくくなってしまうことがあるので、背景色を指定する時には、同時に文字色も指定するようにします。
・<background-image>
背景画像を指定します。
<body>や<table>だけではなく、 <p>・ <div>・ <span>などの要素にも背景画像を指定できます。
背景画像はURLで指定します。 スタイルシート部分を外部ファイルにしている場合には、HTMLファイルから見た相対パスではなく、 外部スタイルシートファイルからの相対パスで指定します。
<background-color>と同様、ユーザーの環境で背景画像が表示されない場合などに、 背景色と文字色が近い色になって文字が読みにくくなってしまうことがあるので、背景画像を指定する時には、同時に背景色と文字色も指定するようにします。
背景画像の表示開始位置を指定します。 背景画像の表示開始位置を％値や数値で指定する場合には、値を横方向・縦方向の順にスペースで区切って指定します。
・<background-repeat>
背景画像のリピートの仕方を指定します。
repeat・・・縦横に背景画像を繰り返して表示します。
repeat-x・・・横方向にのみ背景画像を繰り返して表示します。
repeat-y・・・縦方向にのみ背景画像を繰り返して表示します。
no-repeat・・・画像を1回だけ使用して繰り返しません。
(2)<border>
ボーダーのスタイル・太さ・色をまとめて指定します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
・<border-bottom>
下ボーダーのスタイル・太さ・色を指定します。
スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
・<border-collapse>
隣接するセルのボーダーを重ねて表示するか（collapse）、間隔をあけて表示するか（separate）を指定します。
・<border-left>
左ボーダーのスタイル・太さ・色を指定します。
スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
・<border-right>
右ボーダーのスタイル・太さ・色を指定します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
隣接するセルのボーダーとボーダーの間隔を指定します。
border-collapseプロパティの値がseparateのときに有効となります。
上ボーダーのスタイル・太さ・色を指定します。
スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
(3)<bottom>
ボックスを配置する場合の、下からの配置位置（距離）を指定します。
下からの配置位置（距離）とは、基準位置の下端から配置するボックスの下端までの距離を指します。
指定するのは基準位置からの距離のみですので、 実際の表示位置の指定には、positionプロパティを併用して、配置方法（基準位置）を設定します。
(4)<caption-side>
テーブル（表）のキャプションの位置を指定します。
指定できるキャプションの位置は、テーブルの上下左右（top、bottom、left、right）です。
(5)<clear>
floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除します。
(6)<color>
文字色を指定します。
ユーザーの環境で背景色が指定されている場合には、背景色と文字色の関係により、文字が読みにくくなってしまうことがあるので、同時に背景色も指定します。
(7)<cursor>
マウスカーソルの形状を指定します。
※ブラウザにより対応していないものもあります。
(8)<direction>
文字表記の方向（左右）を指定します。
値がltr（Left To Right）のときは左から右、値がrtl（Right To Left）のときは右から左に表記されます。
※右から左に表記される言語にはアラビア語やヘブライ語等
(9)<display>
ブロックレベル・インライン等の、要素の表示形式を指定します。
(10)<empty-cells>
空白セルのボーダーを表示するか（show）、しないか（hide）を指定します。
続きは次回で・・・。
0 件のコメント:
コメントを投稿