clip/見える範囲

clipプロパティを使うと見える範囲を指定出来ます。

説明

 clipプロパティはボックスで見える範囲を一部分等限定する事が出来ます。

clip説明

 尚、IE7等古いブラウザではclipは使えません。

構文

 clipプロパティの構文は以下の通りです。

clip: auto、又はrect(上,右,下,左);

 autoは自動でデフォルトです。通常は全範囲が見れます。

 rectの中の数字は上、右、下、左の順でpx(ピクセル)、又はem(文字数)で指定します。

利用例

 clip利用例です。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
position: absolute;
width:100px;
clip: rect(0px,80px,2em,1em);
}

<div>clipで見える範囲を指定しています。</div>

 上記を表示すると以下になります。尚、見やすいように枠線の高さ等は調整しています。

clipで見える範囲を指定しています。

 左と下が1文字分、右は20px分、それぞれが切れて隠れています。

 clipを指定しないと以下のように表示されます。

clipで見える範囲を指定しています。

留意点

 emは文字数なので、範囲を指定する場合は文字の途中で切れないので使いやすいと思いますが、topやbottomをemで指定する場合、line-heightに気を付ける必要があります。

 例えば、line-height:160%;を指定している場合です。

 まずは、clipを指定していない場合の表示です。

clipで見える範囲とline-heightの関係を示しています。

 clipでtopに1em、bottomに3emを指定した場合、以下のようになります。

clipで見える範囲とline-heightの関係を示しています。

 上は1行目の途中で切れています。下は3em、つまり3行分表示する設定をしていますが、2行しか表示されていません。

 これはline-heightは1.6倍になっているため、行間が開いているためです。

 この場合、line-height:100%;を指定すると3行分表示されます。

 又、行間を変えたくない場合は、(表示したい行数)×(line-heightの倍率)を文字数として指定します。

 例えば、上記ではtopは1行×1.6=1.6em、bottomは3行×1.6=4.8をemで指定します。そうすると以下のように表示されます。

clipで見える範囲とline-heightの関係を示しています。

 文字の途中で切れる事がありません。

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)