CSS 基礎・基本 display #7

今回は前回に引き続き、ページレイアウトに必要なdisplayを学習していきます。最近は、少しさぼり気味な勉強です。
これからも、頑張っていきましょう。
今日も、勉強ノートをここにまとめていきます。

##displayプロパティ
基本的な`dispaly`プロパティについて学ぶ

###block
`display`プロパティは、レンダリングの際に利用する要素のボックスの種類を指定するプロパティです。
`display`プロパティを利用して値に`block`を設定する
また、`block`はブロック要素を生成するためのもので、横幅いっぱいのボックスを形成する。
`.block { display: block; }`

###inline
`inline`はインライン要素を生成するため　その要素に紐づけられた領域のみをボックスとして形成する。
`.inline { display: inline;}`

###inline-block
`inline-block`はインライン要素に高さや幅を指定できるようにしたものです。
`.inline-block {display: inline-block;}`

###list-item
`list-item`はブロック要素と同じ振る舞いをしますが、先頭にマーカーとなるブロックを形成します。
`.list-item{display: list-item;}`

##要素を非表示にするプロパティ
要素を非表示にするプロパティについて

###display:none
`display`プロパティを使って要素を非表示にするには`none`を使います。
`none`を指定した場合は、どの要素が存在しないかのように扱われます。
`.none{diplay:none;}`

###vivibility:hidden
`visibility`プロパティを使って要素を非表示にするには、`hidden`を使います。
また、このプロパティで非表示にした要素はそのまま、占有してた領域は残ります。
`.hidden{visibility: hidden;}`

##display:tableについて
テーブルレイアウトの方法について

###table
`<table>`タグのようなレンダリングをされるようにするには、`display`プロパティを使って`table`を設定します。
`.table { display: table; }`

###table-cell
`<td>`タグと同じようにレンダリングされるようにするには、
`display`プロパティを使って`table-cell`を設定します。
`.table-cell` { display: table-cell;}`
カラムの幅などは指定しなければ自動的に決められます。

###カラムの幅
先ほど作ったものの幅を決めるときには、`width`を使います。
`.table-cell`{ display: table-cell; width:100px;}`

###カラムの文字を上下中央
`vertical-align`プロパティは、インライン要素とテーブルセルのみ有効。
`table-cell`で指定された要素には`vertical-align`プロパティを利用した縦方向の調整が可能。
また、上下中央に配置するには`middle`を値を設定する。
`.table-cell{ display: table-cell; vertical-align: middle;}`

###カラムの幅を固定.1
カラムが文字の幅に合わせて広まってしまっているので、カラムの幅を固定します。固定するには、`table-layout`プロパティを使って`fixed`を設定します。
カラムの幅を固定するためには、テーブル全体の幅を指定する必要がある。
`.table{ display: table; width: 300px; table-layout: fixed;}`

###カラムの幅を固定.2
先ほどの、1では完全にはまだできていません。しっかり幅を確認すると`118px`になっています。ボックスモデルのルールがデフォルトでは`content-box`となっているため。`width`と`padding`の両方が表示に加算されます。
これを解決するには、`box-sizing`プロパティで`border-box`を指定すると幅は`padding`と`border`を含んだ形になります。

###カラムの中身の折り返し
長い単語の途中に改行するようにするには、`word-wrap`プロパティを使って`break-word`を設定します。
`.table-cell {display: table-cell; word-wrap: break-word;}`

##display:flexについて
CSSのflexboxを利用したレイアウトについて

###flex
`display`プロパティで`flex`を指定することで`flexbox`を作ることができます。また指定された要素は、`Flex container`と呼びそれの子要素を`Flex item`と呼びます。Flexは孫要素には影響が出ないです。
また、flexboxは今まで複雑で難しかったレイアウトをより簡単にできるようにしたものです。

###flex-warp
所定の幅で折り返すようにするために、`flex-warp`プロパティを使い`wrap`を設定します。
また、`flex-wrap`プロパティは次のような値も使えます。
- `nowrap` 改行しない
- `wrap` 改行する
- `wrap-reverse` `wrap`と同じですが並び順を逆にする。
`.flex { diplay: flex; width: 500px; flex-wrap: wrap;}`

### flex-direction
並び順を逆順させるには`flex-direction`プロパティを使う。値に、`row-reverse`設定します。
`flex-direction`プロパティは以下の値も使用できます。
- `row` 左から右に配置
- `row-reverse` 順番を逆にします。
- `column` 上から下に配置
- `column-reverse` 順番を逆にします。
`.flex{ diplay: flex; width: 500px; flex-wrap: wrap; flex-direction; row-reverse;}`

### justify-content
flexアイテムを左右中央に配置するには、`justify-content`プロパティを使い`center`を設定する。
`justify-content`プロパティは次の値も利用できます。
- `flex-start` flexアイテムを始端に集める
- `flex-end` flexアイテムを終端に集める
- `center` flexアイテムを中央に集める
- `space-between` flexアイテムを均等に配置し最初のアイテムは始端に最後のアイテムは終端に来る。
- `space-around` `space-between`と基本同様の動きをします。始端のアイテムと終端との間のスペースは、各アイテムのスペースの1/2になります。
- `space-evenly` `space-between`と基本同様の動きをします。先ほどとは別にスペースがすべて同じになります。
`.flex { display: flex; flex-wrap: wrap; justify-content: center;}`

### align-items
flexアイテムを上下中央に配置するには、`align-items`プロパティで`center`を設定します。
`align-items`プロパティには以下の値も利用可能です。
- `flex-start` flexアイテムを上部に集める
- `flex-end` flexアイテムを下部に集める
- `center` flexアイテムを中央に集める
- `stretch` flexアイテムは、範囲内いっぱいに広がるように配置
`.flex { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}`

### align-content 
flexアイテムを上下均等に配置されているので上部に集まるように設定。flexアイテム全体の縦の配置を変更するためには、`align-content`使い`flex-start`を使って上に集める。
`flex-content`は`align-items`同様の値が利用可能です。
`.flex { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content:flex-start;}`

###order
flexアイテムは`order`プロパティを利用することで配置の順番を変更できる。`order`プロパティは初期値が`0`となっている。負の値を設定することで先頭に配置できる。
`.target {order: -1;}`

###flex-grow
flexアイテムの一部のアイテムの幅を調整
flex-growで調整できる幅は絶対的な幅ではなく、flexアイテムの持っている余白です
`.target { order: -1 ; flex-gorw : 1;}`

###slign-self
flexアイテム一部のみを下に配置
`align-self`を使うことで、`align-items`プロパティの値を上書きすることができる。下に配置するためには、`flex-end`を設定します。


今回はここまでです。日に日に難しくなっていきますね。
実際に皆さんもプログラムを試しながらやっていただけるとわかると思います。
是非今までのも見てくれると嬉しいです。