レイアウト系プロパティ
- width ウィズス ウィズ プロパティ 内容の幅
幅は、box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定。
border-box が指定されていると「content + padding + border」の合計値を指定。
初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用されます。 - max-width プロパティ 幅の最大値
幅の最大値を指定。初期値は「none」 - min-width プロパティ 幅の最小値幅の最小値を指定。
width プロパティの値に関わらず本値以下の幅にはなりません。初期値は「auto」 - height プロパティ（内容の高さ）要素の内容の高さを指定。
box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定。border-box が指定されていると「content + padding + border」の合計値を指定。
初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用される。 - max-height プロパティ 高さの最大値
height プロパティの値に関わらず本値以上の高さにはなりません。初期値は「auto」 - min-heightプロパティ 高さの最小値
width プロパティの値に関わらず本値以下の高さにはなりません。初期値は「auto」 - float プロパティ 回り込み
left指定した要素を左に寄せる。
right指定した要素を右に寄せる。
none（初期値）特に配置を指定しません。
float プロパティを使用した場合は、回り込みの解除を指定する必要があります。
①clear: both; プロパティを使用 float を指定した要素の次の要素に「clear: both;」ボス プロパティを指定。
float が連続している場合は、一番最後の float 要素の次の要素に指定します。本指定方法は、float が指定されている要素に続く要素が存在する場合に指定可能です。
②clear: both; プロパティを使用（after 疑似要素を使用）float を指定した要素の親要素に after 疑似要素を使用した「clear: both;」プロパティを指定。
本指定方法は、after 疑似要素を使用することで後続する clear プロパティを指定する要素が存在しない場合でも使用可能。一般的には、「clearfix」という名称のクラス名を使って以下のスタイルを定義。リセット CSS に定義しておくと良いがおすすめしない方法。
③親要素に overflow: hidden; プロパティを使用
float を指定した要素の親要素に「overflow: hidden;」を指定。 - clear プロパティ 回り込みを解除
left左方向の回り込みを解除。
right右方向の回り込みを解除。
both左右の回り込みを解除。（通常は、本値を使用します）
none（初期値）回り込みの解除を行いません。
同レベルの後続するブロック要素がない場合や記述の簡素化を行うために after 擬似要素を使用した clearfix という名称のクラスを使用する方法があります。 - display プロパティ 要素の表示方法
blockブロック属性（p,div,ul,h1～h6 タグなどの初期値）を指定。
高さをもたせる。heigthを指定。
inlineインライン属性（a,strong,span タグなどの初期値）を指定。
改行せずに書くか、改行部分をコメントアウトすると良い。
inline-blockインラインブロック属性（img タグなどの初期値）を指定。
none非表示の属性を指定。領域そのものがなくなる。 - overflow プロパティ ボックスからあふれた内容の処理方法
visible（初期値）内容がボックスに収まらない場合は、ボックスからはみ出して表示される。
hidden内容がボックスに収まらない場合は、はみだした部分は非表示になる。
scrollスクロールバーを使って全体を参照できるようにする。
auto内容がボックスに収まらない時だけスクロールバーを表示し全体を参照できるようにする。
例 overflow-ｙ：scroll； 縦だけのスクロールバー表示 - order 数字 オーダー
順番を入れ替える
パディング系プロパティ
- padding-top/-bottom/-left/-right プロパティ パディング上下左右
padding-top: 上のパディング幅;
padding-bottom: 下のパディング幅;
padding-left: 左のパディング幅;
padding-right: 右のパディング幅; - padding プロパティ パディング一括指定
1つ指定「上下左右」のすべての指定。
2つ指定「上下」と「左右」の順で指定。
3つ指定「上」と「左右」と「下」の順で指定。
4つ指定「上」と「右」と「下」と「左」の順で指定。
マージン系プロパティ
- margin-top/-bottom/-left/-right プロパティ マージン上下左右
margin-top: 上のマージン幅;
margin-bottom: 下のマージン幅;
margin-left: 左のマージン幅;
margin-right: 右のマージン幅; - margin プロパティ マージン一括措定
1つ指定「上下左右」のすべての指定。
2つ指定「上下」と「左右」の順で指定。
3つ指定「上」と「左右」と「下」の順で指定。
4つ指定「上」と「右」と「下」と「左」の順で指定。
- マージンの相殺
上部のボックスの下マージンと下部のボックスの上マージンが接する時は大きい方のマージンが採用される。両方向で設定するのではなく、決まった方向からのみ設定するとよい。 - マイナスマージン ネガティブマージン
マージンにはマイナスの値を指定することができ、
マイナスの値を指定すると他のボックスに重なった配置にすることが可能。 - ボックスの中央配置
width プロパティでボックスの幅を指定した状態で左右のマージンを「auto」に設定
「margin: 0 auto;」するとボックスを親要素の中央に配置することができる。 - ボックスの右端配置
width プロパティでボックスの幅を指定した状態で左のマージンを「auto」に設定
「margin-left: auto;」するとボックスを親要素の右端に配置することができる。
ボーダー系プロパティ
- border-style プロパティ ボーダースタイル
none（初期値）ボーダーは、表示されず太さも 0 になります。
他のボーダーと重なる場合は、他の値が優先されます。
hiddenボーダーは、表示されず太さも 0 になります。
他のボーダーと重なる場合は、hidden の値が優先されます。
solidボーダーを 1 本線で表示します。
doubleボーダーを 2 本線で表示します。dashedボーダーを破線で表示します。
dottedボーダーを点線で表示します。
1 つ指定「上下左右」のすべての指定。
2 つ指定「上下」と「左右」の順で指定。
3 つ指定「上」と「左右」と「下」の順で指定。
4 つ指定「上」と「右」と「下」と「左」の順で指定。 - border-color プロパティ ボーダー色
transparent を指定すると透明になる。
1 つ指定「上下左右」のすべての指定。
2 つ指定「上下」と「左右」の順で指定。
3 つ指定「上」と「左右」と「下」の順で指定。
4 つ指定「上」と「右」と「下」と「左」の順で指定。 - border-width プロパティ ボーダー幅
1つ指定「上下左右」のすべての指定。
2つ指定「上下」と「左右」の順で指定。
3つ指定「上」と「左右」と「下」の順で指定。
4つ指定「上」と「右」と「下」と「左」の順で指定。 - border プロパティ ボーダー一括指定
ボーダーのスタイル・色・幅を一括して指定（ショートハンド）。
スタイル・色・幅の指定は、任意の順序でスペースで区切って指定。
本指定では上下左右を別々に指定することはできません。
例 border: 4px #000 double - border-top/-bottom/-left/-right プロパティ ボーダー上下左右一括指定
border-top: 上のボーダー一括指定;
border-bottom: 下のボーダー一括指定;
border-left: 左のボーダー一括指定;
border-right: 右のボーダー一括指定;
プロパティ名の後ろに「-style」、「-color」、「-width」を付与することでスタイル、色、幅を個別に指定することができる。
本日の練習問題をやりましたが、難しく、解説を聞いてなんとか理解できたので
もう一度自分でやってみます。
コメント