visibility プロパティ
ボックスを透明にするプロパティ。
| 適用要素 | 全ての要素 |
| 値の継承 | ○ |
| 初期値 | visible |
| 指定可能な値 | visible : ボックスを見える状態にする。 |
| hidden : ボックスを透明にする。 | |
| inherit : 親要素と同じ値。 |
float プロパティ
ボックスを右もしくは左に寄せて配置し、後続の要素を、その逆側に回り込ませるプロパティである。
| 適用要素 | 全ての要素。 |
| 値の継承 | × |
| 初期値 | none |
| 指定可能な値 | left : ボックスを左に寄せ、後続の要素を右側に回り込ませる。 |
| right : ボックスを右に寄せ、後続の要素を左側に回り込ませる。 | |
| none : 通常の配置にする。 | |
| inherit : 親要素と同じ値にする。 |
clear プロパティ
float プロパティで右もしくは左に寄せて配置されたボックスへの回り込みを解除する。
| 適用要素 | ブロックレベル要素 |
| 値の継承 | × |
| 初期値 | none |
| 指定可能な値 | none : 回り込みを解除しない。 |
| left : [float: left;] を指定されている要素の回り込みを解除する。 | |
| right : [float: right;] が指定されている要素の回り込みを解除する。 | |
| both : [float: right;]、[float: left;] が指定されている要素の回り込みを解除する。 | |
| inherit : 親要素と同じ値にする。 |
overflow プロパティ
要素内容がボックスに収まりきれない場合、はみ出る部分の処理を指定するプロパティである。
| 適用要素 | ブロックレベル要素（置換要素を除く）、inline-block 要素、th 要素、td 要素 |
| 値の継承 | × |
| 初期値 | visible |
| 指定可能な値 | visible : 表示させる。 |
| hidden : はみ出る部分は、表示しない。 | |
| scroll : スクロールして、内容を表示させる。 | |
| auto : 必要に応じて、スクロールさせる。 | |
| inherit : 親要素と同じ挙動にする。 |
position プロパティ
ボックスの配置モードを設定する。
配置位置は、プロパティ、top, bottom, left, right で指定する。
| 適用要素 | 全ての要素 |
| 値の継承 | × |
| 初期値 | static |
| 指定可能な値 | static : 通常の配置。 |
| relative : 相対配置。 | |
| absolute : 絶対配置。
position プロパティの値として、[relative][absolute][fixed]のいずれかが指定されている最も近い階層のボックス（なければ、html 要素）が、基準ボックスとなる。 絶対配置されたボックスは、別レイヤーとして表示される。 |
|
| fixed : 固定配置。
位置を指定する基準が、ウインドウ表示領域全体となり、ボックスは、スクロールされても、位置が固定される。 |
|
| inherit : 親要素と同じ値。 |
z-index プロパティ
ボックスの重なり順序を指定する。
| 適用要素 | 相対配置、絶対配置、固定配置されている要素。 |
| 値の継承 | × |
| 初期値 | auto |
| 指定可能な値 | auto : 親ボックスと同じ階層となる。 |
| 整数 : 重なり順序を単位を付けずに、整数で指定。 値が大きいほど、上に表示される。 負の値を指定することも可能。 |
|
| inherit : 親要素と同じ値。 |
box-shadow プロパティ
ボックスに影を付ける。
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1) inset;
最初の 1px ：水平方向の影のオフセット距離
2番目の 1px ：垂直方向の影のオフセット距離
3番目の 1px ：影のぼかし距離
4番目の 1px ：影の広がり距離
inset を指定すると影がボックスの内側に付く。
このプロパティに関する一連の記事は、「10日でおぼえるCSS／CSS3入門教室」を大きく参考にした記事である。
CSS に限らず、この「10日でおぼえる」は、初心者を対象に、1つ1つ積み上げながら、系統的に学べる良書です。
尚、「10日でおぼえるHTML5入門教室」は、Web制作者向けというより、Webアプリケーションの制作を目的としています。
オススメ書籍
[amazonjs asin=”4798124036″ locale=”JP” tmpl=”Small” title=”10日でおぼえるCSS／CSS3入門教室”]
はじめてのHTML＋CSS
[amazonjs asin=”4873117259″ locale=”JP” tmpl=”Small” title=”CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計”]
この記事を読んだ人はこんな記事にもご興味があるかも
2017-05-16 WordPressのファイル構成
2018-04-02 [ CSS ] 3カラム・レイアウト、コーディング clearfix
2017-11-28 日本政策金融公庫の融資制度を利用する
2017-08-24 [ CSS ] CSSのリセット![[ JavaScript ] 変数](https://i0.wp.com/webdesign.ki-blog.biz/files/JavaScript変数-150x150.png?resize=150%2C150&ssl=1)
2020-06-06 [ JavaScript ] 変数
2016-10-22 CSS記述の基礎、基本
One thought on “[ CSS ] ボックス関係のプロパティ”