2017-06-21

Webアプリ勉強7・・・CSSその3

HTMLについての勉強の続きです。

 HTML、CSSの勉強での科目です。

1.HTML・・・内容にあたる部分(ブロックレベル要素
 1)HTMLの要素(要素とは、構成するパーツのようなもの)
  head要素
  body要素
   A.ブロックレベル要素
   B.インライン要素 (a~i k~v
2.CSS・・・修飾 ←今回 ・・・(前々回<background>~<empty-cells>)
                 (前回<float>~<min-width>)
3.JavaScript・・・動作プログラム

前々回、前回の続きで、CSS(スタイルシート)についての続きです。
(22)<outline>
 アウトラインのスタイル・太さ・色をまとめて指定します。
 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
 ※上下左右の概念はありません。 
 ※アウトラインをつける(縁取りをする)対象が丸い場合には、アウトラインも丸くなります。
・<outline-color>
 アウトラインの色を指定します。

・<outline-style>
 アウトラインのスタイルを指定します。
 
・<outline-width>
 アウトラインの太さを指定します。

(23)<overflow>
 ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定します。
 設定内容
 〇visible
  ボックスからはみ出して表示されます。これが初期値です。

 〇scroll
  入りきらない内容はスクロールして見られるようになります。

 〇hidden
  はみ出た部分は表示されません。

 〇auto
  ブラウザに依存します(一般的にはスクロールして見られるようになります)。

(24)<padding>
 上下左右のパディングをまとめて指定します。
 上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。

・<padding-bottom>
 パディングを指定します。

・<padding-left>

 左パディングを指定します。

・<padding-right>

 右パディングを指定します。

・<padding-top>

 上パディングを指定します。

(25)<page-break-after>

 印刷時の改ページ位置を指定します。

(26)<page-break-before>

 印刷時の改ページ位置を指定します。

(27)<page-break-inside>

 印刷時の要素内での改ページを避けたい時に使用します

(28)<position>

 ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定します。
 <position>プロパティで指定するのは、配置方法(基準位置)のみです。

(29)<right>
 ボックスを配置する場合の、右からの配置位置(距離)を指定します。
 右からの配置位置(距離)とは、基準位置の右端から配置するボックスの右端までの距離を指します。
 ※実際の表示位置の指定には、positionプロパティを併用して、 配置方法(基準位置)を設定する必要があります。尚、rightプロパティの値は、 positionプロパティの値がstatic以外のときに有効となります。

(30)<table-layout>
 テーブル(表)の表示方法を指定します。
 テーブル(表)の列幅を自動レイアウトにするか(auto)、固定レイアウトにするか(fixed)について指定します。
 ※いずれの場合も行の高さは自動的に算出されます。

(31)<text-align>
 行揃えの位置や、均等割付を指定します。
 ※均等割付については、text-alignプロパティの値にjustifyを指定した上で、 text-justifyプロパティで均等割付の形式を指定します。

(32)<text-decoration>
 テキストに下線・上線・打ち消し線を付けたり、点滅させるたりを指定します。
 同時に複数の値を指定する場合には、値を任意の順序でスペースで区切って記述します。
 ※テキストを点滅させる blink は、主要なブラウザでサポートを外されているので、使用は避けましょう。

(33)<text-indent>
 文章の段落などの一行目のインデント幅をします。
※インデントには負の値も指定できます。

(34)<text-justify>

  text-alignプロパティの値がjustifyのとき、テキストの均等割付の形式を指定します。


(35)<text-shadow>

 テキストへの影つけを指定します。

2つまたは3つの長さと影の色を指定します。最初の2つの長さはテキストから影の距離で、正の値は右下、負の値は左上に影が表示されます。また、3つ目の長さは影のぼかし半径ですが、この値を省略するとぼかしの無い影となります。


(36)<text-transform>

 英語などのテキストの大文字表示・小文字表示を指定します。

 ※単語の先頭文字だけを大文字で表示することもできます。


(37)<top>

 ボックスを配置する場合の、上からの配置位置(距離)を指定します。

 上からの配置位置(距離)とは、基準位置の上l端から配置するボックスの上端までの距離を指します。
 ※実際の表示位置の指定には、positionプロパティを併用して、配置方法(基準位置)を設定する必要があります。 尚、topプロパティの値は、positionプロパティの値がstatic以外のときに有効となります。


(38)<vertical-align>

 行のなかでのテキストや画像などの縦方向の揃え位置を指定します。

インライン要素とテーブルセルにのみ、適用できます。


(39)<visibility>

 ボックスの表示(visible)・非表示(hidden)を指定します。

 ※非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定します。

(40)<white-space>
 ソース中の半角スペース・タブ・改行の表示の仕方を指定します。

(41)<width>
 <table>・ <td>・ <img>・ <input>・<textarea>・ <select>などの領域の幅を指定します。
 指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を%で指定する方法と、 状況に応じて大きさが設定されるautoを指定する方法があります。
 ※負の値は指定できません。

(42)<word-spacing>
 単語の間隔を指定します。
 ※単語の間隔にはマイナスの値を指定することもできます。

(43)<z-index>
 ボックスの重なりの順序を指定します。
 ※positionプロパティでstatic以外の値が指定されている要素に適用されます。

以上、CSSについてでした。

0 件のコメント:

コメントを投稿