|
トップページ > スタイルシートリファレンス > visibility
★スタイルシートリファレンス
|
visibility･････ボックスの表示・非表示を指定する
       
  
    
   
     
visibilityプロパティは、ボックスの表示（visible）・非表示（hidden）を指定する際に使用します。 非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定します。 テーブル（表）の行や列にvisibility:collapseを指定した場合の表示は、ブラウザの種類やバージョンによって若干異なるので注意してください。 ■値
■使用例スタイルシート部分は外部ファイル（sample.css）に記述。.sample1 {visibility:hidden;}.sample2 {visibility:visible;} .sample3 {visibility:collapse;} HTMLソース<html><head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <h3>左の画像にvisibility:hidden、右の画像にvisibility:visibleを適用</h3> <p> <img src="images/kaeru.gif" class="sample1"> <img src="images/kaeru.gif" class="sample2"> </p> <h3>一部のセルにvisibility:collapseを適用</h3> <table border="1"> <tr class="sample3"> <td>しゃこ（売り切れ）</td> <td>えび（売り切れ）</td> <td>こはだ（売り切れ）</td> </tr> <tr> <td class="sample3">いくら（売り切れ）</td> <td>うに</td> <td>とろ</td> </tr> </table> </body> </html> ↓↓↓ ブラウザ上の表示左の画像にvisibility:hidden、右の画像にvisibility:visibleを適用
一部のセルにvisibility:collapseを適用
■関連項目
overflow････････････････はみ出た内容の表示方法を指定する
overflow-x･････････････はみ出た内容の表示方法を指定する（IE独自の仕様） overflow-y･････････････はみ出た内容の表示方法を指定する（IE独自の仕様） position････････････････ボックスの配置方法（基準位置）を指定する top････････････････････上からの配置位置（距離）を指定する bottom････････････････下からの配置位置（距離）を指定する left････････････････････左からの配置位置（距離）を指定する right･･･････････････････右からの配置位置（距離）を指定する display･････････････････要素の表示形式（ブロック・インライン）を指定する float･･･････････････････左または右に寄せて配置する clear････････････････････回り込みを解除する z-index･･････････････････重なりの順序を指定する visibility･････････････････ボックスの表示・非表示を指定する clip･････････････････････ボックスを切り抜き表示（クリッピング）する direction････････････････文字表記の方向（左右）を指定する unicode-bidi･････････････Unicodeの文字表記の方向を上書きする writing-mode････････････文字表記の方向（縦横）を指定する（IE独自の仕様） |
トップページ > スタイルシートリファレンス > visibility
|
©2012 HTMQ