今回は前回に引き続き、ページレイアウトに必要な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-reversewrapと同じですが並び順を逆にする。.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-aroundspace-betweenと基本同様の動きをします。始端のアイテムと終端との間のスペースは、各アイテムのスペースの1/2になります。
- space-evenlyspace-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を設定します。
今回はここまでです。日に日に難しくなっていきますね。
実際に皆さんもプログラムを試しながらやっていただけるとわかると思います。
是非今までのも見てくれると嬉しいです。