パーフェクトCSSテクニック3

意外と知らないプロパティ集

前回の続きとなります。今回はプロパティについて見ていこうと思います。

前回はセレクタでしたがプロパティや値もそれに負けないぐらい要素があります

 preと同じ機能を他のタグにも割り当てる

 p{ white-space: pre;} /* ソースそのまま表示(pre) */

 システムカラーの指定方法(color)

 p{ color: WindowText} /* システムカラー */

 /*   他の値   */
 /*
 ActiveBorder | ActiveCaption | AppWorkspace | Background
 ButtonFace | ButtonHighlight | ButtonShadow | ButtonText
 CaptionText | GrayText | Highlight | InfoText | MenuText
 Menu | Scrollbar | Window | Windowtext | WindowFrame

 文字の間をあける

 p{ letter-spacing: 5px}

　/* 単体では見栄えだけだがJavaScriptと併用すると効果が出る場合もある*/

 大文字小文字の設定

 p{ text-transform: capitalize} /* 文字の先頭だけ大文字 */

 その他の値
 | capitalize | 文字の先頭だけ大文字|
 | uppercase  | 大文字             |
 | lowercase  | 小文字             |
 | none       | 変化なし           |

 /* JavaScriptで大文字小文字変換に使える*/

重ね合わせの順位 

 p{ z-index: 1} /* 数字が小さいほど背後に表示*/

 /* JavaScriptのonClickと併用すると効果が出るときもある*/

 文章の方向

 p{ direction: ltr} /* 左から右*/

 他の値
 | ltr | 左→右 |
 | rtl | 右→左 |
 
 ltr(left to right)
 rtl(right to left)と覚えられる

 表示の有無

 p{ visibility: hidden } /* 内容だけ消す、領域は保つ*/
 p{ display: none }      /* 内容も領域も消してしまう*/

 /*どちらもはてなblog形成に役立つ、JSでのゲーム製作でも用いられる*/

以上のプロパティと値です。

CSSはCSSのみに使うのではありません。

文字の大きさを変える、間隔を開けるなどのデザインを動的にすると

様々なエフェクト効果が期待できます。

それをJavaScriptをもって実践する形となってくるのです。