タグ: ウェブサイト作成

トップページ > サイト作成 > スタイルシート（CSS）の基本とプロパティの一覧 > スタイルシート（CSS）で多用しないが知っていると便利なプロパティ

スタイルシート（CSS）で多用しないが知っていると便利なプロパティ

[最新更新] 2022年08月13日
[初回公開] 2013年05月22日

スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から多用されないが知っておくと利用する場面があるかもしれない便利なプロパティを紹介する。

1. スタイルシート（CSS）で多用しないが知っていると便利なプロパティとは

スタイルシート（CSS）で多用しないが知っていると便利なプロパティとは、マウスカーソルの変更や印刷時の改ページの位置を指定するなど、文字の装飾やレイアウト以外で利用されるプロパティである。

その他、テーブルの描画方法を変えてテーブルの表示速度を最適化するなどもプロパティとして用意されている。

2. スタイルシートで知っていると便利なプロパティ

スタイルシートで知っていると便利なプロパティは、ディスプレイに表示されるコンテンツの装飾ではなくマウスカーソルなど表示以外で制御するものが多い。

2-1. マウスカーソルを変更する（cursor）

スタイルシートでマウスカーソルを変更したい場合はプロパティ「cursor」を次のように利用する。
{形状} には crosshair や hand など形状を示す指定を行う。

cursor : {形状}

• crosshair ： 十字
• hand ： 手
• move ： 移動可能
• text ： テキスト選択時
• wait ： 処理中
• help ： ヘルプ
• default ： 標準
• auto ： 自動設定
• n-resize ： 上方向
• s-resize ： 下方向
• w-resize ： 左方向
• e-resize ： 右方向
• nw-resize ： 左上方向
• ne-resize ： 右上方向
• sw-resize ： 左下方向
• se-resize ： 右下方向

2-2. 要素の寸法を保持したまま表示・非表示を切り替える（visibility）

スタイルシートで素の寸法を保持したまま表示・非表示を切り替えたい場合はプロパティ「visibility」を次のように利用する。
{表示} には表示する visible か、非表示の hidden での指定を行う。

visibility : {表示}

• visible ： 表示する
• hidden ： 表示しない

非表示には display:none がよく利用されるが、display:none と異なり、要素の幅や高さは保持したまま非表示にするのでレイアウトが崩れない特徴がある。

2-3. テーブルの描画方法を変える（table-layout）

スタイルシートでテーブルの描画方法を変えたい場合はプロパティ「table-layout」を次のように利用する。
{形式} には表を自動的に描画する auto か、表の 1 行目が表示された時点で表全体を描画する fixed の指定を行う。

table-layout : {形式}

• auto ： 初期値
• fixed ： 最初の 1 行目を読み込んだ時点で表示

auto は特に table-layout を指定せずとも表（テーブル）が描画する際に利用され、表とセルの幅は中身に合うように調整される。
対して fixed は 1 行目に指定される幅で 2 行目以降を表示するので auto に比べると高速で描画されるが、2 行目以降に表示される内容が多い場合は枠からはみ出て表示される恐れがある。

2-4. テーブルのセルの間隔を空ける（border-collapse）

スタイルシートでテーブルのセルの間隔を空けたい場合はプロパティ「border-collapse」を次のように利用する。
{間隔} には隣接するセルの枠線を重ねる collapse か、間隔を空ける separate の指定を行う。

border-collapse : {間隔}

• collapse ： 隣接するセルの枠線を重ねて表示
• separate ： 隣接するセルの枠線を間隔を空けて表示

2-5. 改ページの位置を指定する（page-break-before、page-break-after）

スタイルシートで印刷時の改ページの位置を指定したい場合はプロパティ「page-break-before」または「page-break-after」を次のように利用する。
{位置} には改ページの制御指定を行う。

page-break-before : {位置}
page-break-after : {位置}

• auto ： 指定位置での改ページを指定しない
• always ： 指定位置で強制的に改ページ
• avoid ： 指定位置での改ページを禁止

また、page-break-before は要素の直前で改ページの制御を行い、page-break-after は要素の直後で改ページの制御を行う場合に利用する。

関連記事