Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio, IconDock, and Best Web Gallery.

Web Designer Wallにおいて5 Simple, But Useful CSS Propertiesのタイトルのもと、よく知られているもののあまり使われることがない5つのCSSプロパティが紹介されている。紹介されているのはCSS2のプロパティで現在主力のブラウザの多くでサポートされているもの。簡単なサンプルと表示結果がまとまっており資料として活用できる。紹介されている5つのCSS2プロパティは次のとおり。

Clip

clipプロパティを使って要素のコンテンツにマスクをかける。形状は四角。positionにabsoluteを指定(position: absolute;)したうえで、「clip: rect(75px 170px 180px 27px);」のように、左上を基準として上端への長さ、右端への長さ、下端への長さ、左端への長さを指定して表示する領域を指定する。

サンプルの画像	リサイズとclipプロパティを使って一部表示をおこなった場合の例

Min-height

min-heightで最低限の高さを指定する。これはレイアウトのバランスをとる場合に便利な指定方法で、たとえばメインコンテンツの左右にサイドバー領域があるようなデザインで、メインコンテンツの高さがサイドバーの高さよりも低くなることがないようにする場合などに利用できる。なおIE6ではサポートされていないため対処が必要。

White-space

空白をどのように振る舞わせるかをwhite-spaceで指定する。デフォルトでは空白部分で改行されるが、nowrapを指定することで改行されないようになる。

mi-heightを指定して高さを調整した例	nowrapを指定して途中で改行されないようにした場合の例

Cursor

ボタンの振る舞いを変更したい場合にはcursorが便利。たとえば押せないボタンを作るなら色を変えるとともにcursor指定をdefaultにしてリンクではないことを示したり、読み込み中であることをcursor:waitにしてマウスカーソルを変更することで表現するなど。

Display inline / block

ブロック要素であるかインライン要素であるかでレンダリングがかわる。たとえばdiv、h1、pなどはブロックタグでem、span、strongなどはインラインタグ。display inline / blockでデフォルトの設定を上書きすることができる。

cursor: waitを指定してカーソルを変更した例	display inline / blockを指定してデフォルトの表示と逆の表示をさせた場合の例