気の向くままに辿るIT/ICT/IoT
ホームページ

CSSプロパティ / テストサンプル

ホーム前へ次へ
スタイルプロパティとは?

CSSプロパティ / テストサンプル

CSSプロパティ / テストサンプル

 CSS(CSS1/CCS2/CSS3)の基本プロパティ96種類のサンプルです。

 尚、このCSSサンプルページに関しては、IE6/IE7では、レイアウトが崩れ、一部閲覧に支障がある可能性があり、逆にIE5相当では指定とは若干異なる部分はあるものの閲覧に支障ない程度、IE8ではCSS3(opacity)を除き、IE9以降やFirefox、Chrome等、主要ブラウザでは、指定通り表示されると思います。

 それぞれ設定値、更には、セレクタ、擬似要素、擬似クラスを含めるとそのバリエーションは一層豊富なわけですが、同系統のプロパティ、個別、または、まとめて設定可能なプロパティなどがあるので96種類のスタイルプロパティだけを眺めてみると数字から受ける印象とは異なり?、実は、それほど多いわけでもないことがわかります。

HTML/XHTML定義済み要素とブロックレベル要素とインラインレベル要素

 HTML/XHTMLで定義済みの表示領域は、ブロックレベル要素とインラインレベル要素に大別され、各要素・タグは、これら2つのタイプ何れかに初期化されており、例えば、p/blockquote/divなどはブロックレベル要素、span/q/i/bなどはインラインレベル要素であり、大きな違いの1つとしては領域の終端で改行されるか否かがあります。

CSSにとっての領域

 ただ、必要があれば display プロパティを利用するとこれらの別だけでなく、その要素の性質・役割自体を変更することもできます。

 敢えて表現すれば、この display プロパティも示唆しているようにブロックレベル、インラインレベルの差異含め、マークアップ可能な文書構造を表現する為の仕様であるHTML/XHTMLでは、各種要素は、一定の領域や限定されたスコープ(有効範囲)を示す為に定義されていますが、構造化された文書にスタイル設定を加える為の仕様であるCSSにおいては、HTML/XHTMLの定義済み要素やそれが表現する領域は目印の1つに過ぎず、その要素の一部、または、全部に対して、更にはそれを越えた異なる視点からの設定が可能です。

 ここでは、これら既存のHTML/XHTML定義済みタグにセレクタ class を設定する手法を想定したものに絞ってサンプルを例示します。

位置決め関連スタイルプロパティ

 ブロックレベル要素をレイアウトする際には、まず、主要な要素領域ごとに position プロパティで必要に応じて固定位置/絶対位置/相対位置を指定、表示領域の左上を基準とする上下左右位置を top/bottom/left/right プロパティで指定、更に表示領域の高さと幅のサイズを height/width プロパティで指定します。

 但し、 position プロパティについては、内側のブロックレベル要素が決まれば、そのサイズに依存して領域が相対的に決まるような関係にある、例えば周囲を取り囲むスクロール領域やブロックレベル要素を横並びにする為の浮動領域である場合、必ずしも設定する必要はありません。

スクロールバー付き
.overflow_block
{
overflow:auto ;
background-color:orange ;

width:100% ;
}
マージン
.margin_block
{
margin:10px ;
background-position:right center ;
background-image:url(https://www.webzoit.net/hp/img/home.jpg) ;
background-repeat:repeat-y ;
width:45% ;
}
浮動ブロック/左・右サンプル
.float_block
{
float:none ;
padding:20px ;
background-color:gray ;
}
.main_block
{
position:relative ;
height:300px ;
width:300px ;
background-color:#000000 ;
color:#ffffff ;
}
.block1
{
position:relative ;
width:220px ;
height:180px ;
background-color:#ffff00 ;
color:blue ;
}
.block2
{
position:relative ;
width:220px ;
height:280px ;
top:130px ;
bottom:100px ;
left:160px ;
right:100px ;
background-color:blue ;
color:#ffffff ;
}
.main_block
{
position:relative ;
height:300px ;
width:300px ;
background-color:#000000 ;
color:#ffffff ;
}
.block3
{
position:absolute ;
width:220px ;
height:180px ;
background-color:#ffff00 ;
color:blue ;
}
.block4
{
position:absolute ;
width:220px ;
height:280px ;
top:130px ;
bottom:100px ;
left:160px ;
right:100px ;
background-color:blue ;
color:#ffffff ;
}

 このサンプルでは、既に16種類のCSSプロパティを使用しています。

 視認性を考慮して背景色 background-color プロパティ、それに応じた文字色 color プロパティを使って黒・黄・青で色分けした3ブロックを左右で対比した[ .main_block / .block1 / .block2 ]と[ .main_block / .block3 / .block4 ]の違いは、position プロパティの設定値の違いによるものです。

 overflow プロパティに scroll を指定すれば、スクロールバーを常時表示、サンプルのように auto を指定すれば、内側のブロックが表示領域を超過した場合にだけ自動表示するようになり(、他方、 visible / hidden を指定するとブロックの表示/非表示を切り替えることもでき)、[ .margin_block ]のように margin プロパティを設定するとここで基準となっている[ .overflow_block ]の内側における上下左右間隔を、padding プロパティを設定[ .float_block ]すると当該ブロックレベル要素内にある要素間の上下左右の間隔をまとめて作ることができ、上下左右を個別設定するには、それぞれ、margin-top / margin-bottom / margin-left / margin-rightpadding-top / padding-bottom / padding-left / padding-rightで指定可能、ブロックレベル要素の位置を浮動とするには float 、解除するには clear プロパティを使用します。

 判別のしやすさを考慮して使用した background-position / background-image / background-color / background-repeat プロパテをまとめて設定可能な background プロパティ含めると、ここまでで既に27種類あります。

border (境界線)関連のプロパティ

.border_block1
{
position:relative ;
top:10px ;
left:10px ;
height:20px ;
width:20px ;
border-top:solid 10px white ;
border-bottom:solid 10px lime ;
border-left:solid 10px green ;
border-right:solid 10px orange ;
}

border
border-width
border-color
border-style
border-top-width / border-top-color / border-top-style
border-bottom-width / border-bottom-color / border-bottom-style
border-left-width / border-left-color / border-left-style
border-right-width / border-right-color / border-right-style

border-spacing は、display プロパティの設定値が table または、inline-table の場合のセル境界線の距離を設定するプロパティ
border-collapse は、display プロパティの設定値が  table または、inline-table の場合のセル境界線結合を設定するプロパティ

 また、これら border (境界線)関連プロパティには、色、間隔、スタイル、幅、結合を指定するborder-color/border-spacing/border-style/border-width/border-collapse、上下左右の境界線にあたる border-top/border-bottom/border-left/border-rightには、それぞれスタイル・色・幅を指定可能なborder-top-style/border-top-color/border-top-widthborder-bottom-style/border-bottom-color/border-bottom-widthborder-left-style/border-left-color/border-left-widthborder-right-style/border-right-color/border-right-widthで22種類あるのでこれで49種類です。

z-index (領域の重なり順) と opacity (不透明度)プロパティ

.block5
{
position:relative ;
top:10px ;
left:10px ;
width:50px ;
height:50px ;
background-color:#ffff00 ;
}

.block6
{
position:relative ;
top:20px ;
left:20px ;
width:50px ;
height:50px ;
background-color:#ffe700 ;
}
.block7
{
position:relative ;
top:30px ;
left:30px ;
width:50px ;
height:50px ;
background-color:#0055dd ;
opacity:0.7 ;
}
.block8
{
position:relative ;
top:10px ;
left:10px ;
width:50px ;
height:50px ;
background-color:#ffff00 ;
z-index:3 ;
}

.block9
{
position:relative ;
top:20px ;
left:20px ;
width:50px ;
height:50px ;
background-color:#ffe700 ;
z-index:2 ;
}
.block10
{
position:relative ;
top:30px ;
left:30px ;
width:50px ;
height:50px ;
background-color:#0055dd ;
z-index:1 ;
}

 レイヤー(層)の並び順は、既定では、指定した要素の順に沿って下から上へ積み上げられ(スタックされ)ますが、要素ごとに z-index プロパティに異なる整数値を指定することでレイヤーの並び順を任意に変更することができます。

 また、[ .block7 ]は、CSS3で定義された 0.0~1.0 で不透明度を指定可能な opacity プロパティを 0.7 に設定してあるので対応ブラウザなら透けて見えます。

 これら2種類で51種類です。

表示設定 display と list-style 関連プロパティ

[結果]
a
b
c
[タグ]
<div class="list_block">
<div class="list1">a</div>
<div class="list1">b</div>
<div class="list1">c</div>
</div>

[スタイル]
.list_block
{
padding:10px ;
}
.list1
{
display:list-item ;
list-style-position:inside ;
list-style-type:square ;
/*
list-style-image:url() ;
*/
}

 ブロック、インライン、インラインブロック、リストスタイル、テーブル系表示形式等々を設定可能な display プロパティに list-item を指定するとHTML/XHTMLのul/olタグ内のliタグに相当するスタイルをリストスタイルをまとめて設定可能な list-style 、リスト接頭辞の序数指定 list-style-type 、画像をリストマークとして指定可能な list-style-image 、リストスタイルやリストマークの位置指定 list-style-position などによって他のタグにでも設定することもできるようになります。

 これら5種類を加えると、ここまでで56種類になります。

 尚、display プロパティに none を指定するとDOM(Document Object Model)上、何もない状態とすることができ、スクリプト操作で表示/非表示を切り替えることが可能です。

 これに加え、DOM上に常に存在し、ブロックレベル要素のサイズを維持したまま表示/非表示を設定可能な visibility プロパティもあります。(これで57種類)

 また、ブロックレベルの切り抜くことが可能な clip プロパティがあります。(これで58種類)

テキスト関連プロパティ

[ タグ ]

<p class="style_text">abcdefg</p>

[ 結果 ]

abcdefg

[ スタイル ]

.style_text
{
text-align:left ;
text-indent: 10px ;
text-decoration:overline underline line-through ;
text-transform:capitalize ;
letter-spacing:50px ;
line-height:12px ;
}
		

 テキスト文字の水平方向の位置を指定する text-align 、テキストインデント指定の text-indent 、下線、上線、打ち消し線、点滅などを指定可能な text-decoration 、ラテン文字等の全てを大文字・小文字に・あらゆる文字の先頭文字を大文字に変換する text-transform 、先頭文字とテキスト文字列の間隔 letter-spacing 、行の高さを指定する line-height の6種で64種類です。

 テキスト関連では、更に同一行内の垂直方向の中心線に対する位置指定 vertical-align 、テキスト書き出し方向指定の direction 、UNICODEテキスト書き出し方向指定の unicode-bidi 、空白の扱いを指定する white-space 、単語境界を示す word-spacing 、引用(引用符)候補位置を指定する quotes の6種で70種類になります。

ABCDEFG
あいうえお
.font_block
{
font-family:"MS Pゴシック",sans-serif ;
font-size:11px ;
font-style:oblique ;
font-variant:small-caps ;
font-weight:bold ;
}

これらをまとめて設定可能な font プロパティもあり
font-variant の設定値 small-caps は、小文字を大文字にし、サイズを縮小

 これに加え、font 関連プロパティとして font-family / font-size / font-style / font-variant / font-weight と6種類あるので、これで76種類です。

その他プロパティ

 max-height / min-height (最大高/最小高)、 max-width / min-width (最大幅/最小幅)の4種、アウトライン設定可能な outline / outline-style / outline-color / outline-width の8種で84種類です。

 コンテンツ指定の content 、table の配置指定の table-layout 、table表題表示位置(上部/下部)を指定する caption-side 、カラのセルを指定する empty-cells 、改ページ前の位置を指定する page-break-before 、改ページ後の位置を指定する page-break-after 、ブロック要素内で改ページを行う自動か回避するかを指定する page-break-inside 、改ページに伴い最上段・最下段に確保すべき行数指定 widows / orphans の9種で、93種類です。

 ポインタカーソルの形状変更指定の cursor 、カウンタを増分する counter-increment 、 カウンタをリセットする counter-reset で基本となるスタイルプロパティ96種類は以上です。

ホーム前へ次へ