- 投稿日:2020-10-14T23:44:59+09:00
css,js,html 備忘録
要素を上下中央に配置する方法
https://codepen.io/liang-kang/pen/GRqopmj
参考元:https://sole-color-blog.com/blog/532/
- 投稿日:2020-10-14T21:47:17+09:00
CSS Grid のすべてのプロパティをまとめてみた
CSS Grid は 2 つのプロパティだけですべてを設定可能
CSS Grid には 15 個のプロパティがあります。そのうち 8 つがグリッドコンテナに設定するプロパティで、7 つがグリッドアイテムに設定するプロパティです。
しかし、実際にはこれら 15 個のプロパティのうち必須なのはグリッドコンテナに設定する
grid
とグリッドアイテムに設定するgrid-area
の 2 つだけです。なぜそうなるのかという説明の前に、CSS Grid の 15 個のプロパティを見てみましょう。以下がプロパティの一覧です。
グリッドコンテナ用の 8 つのプロパティ:
- grid
- grid-auto-flow
- gird-auto-rows
- grid-auto-columns
- gird-template
- grid-template-areas
- grid-template-rows
- grid-template-columns
グリッドアイテム用の 7 つのプロパティ:
- grid-area
- grid-row
- grid-row-start
- grid-row-end
- grid-column
- grid-column-start
- grid-column-end
お気付きの通り、これらのうちのほとんどのプロパティは
grid
とgrid-area
のロングハンド記法に過ぎません。つまり、grid
やgrid-area
の機能を細分化して小分けしたプロパティになります。
grid-template
はgrid-template-rows
とgrid-template-columns
とのショートハンド(簡略表記法)になります。そして
grid
はgrid-auto-flow
、grid-auto-rows
、grid-auto-columns
、grid-auto-flow
、そしてgrid-template
とのショートハンドになります。
grid-row
はgrid-row-start
とgrid-row-end
とのショートハンドです。
grid-column
はgrid-column-start
とgrid-row-end
とのショートハンドです。そして
grid-area
はgrid-row
とgrid-column
とのショートハンドになります。
grid
とgrid-area
の 2 つのプロパティが他のすべてのグリッドのプロパティの機能を併せ持つため、この 2 つのプロパティだけで CSS Grid のすべてのプロパティを設定可能となっています。CSS Grid のプロパティは CSS Grid Layout Module Level 1 にて定義されています。
[CSS-GRID-1]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS Grid Layout Module Level 1. 14 December 2017. CR. URL:https://www.w3.org/TR/css-grid-1/グリッドアイテムの整列や配置に使用する 12 個のプロパティ
最初に CSS Grid には 15 個のプロパティがあると書きました。しかし、CSS Grid では、グリッドアイテムの整列や配置のために以下の 12 個のプロパティも使用します。
グリッドアイテムの整列や配置のための 12 個のプロパティ:
- align-content
- align-items
- align-self
- justify-content
- justify-items
- justify-self
- place-content
- place-items
- place-self
- gap
- row-gap
- column-gap
上記のプロパティは CSS Grid とは別に CSS Box Alignment Module Level 3 で定義されています。
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. 21 April 2020. WD. URL: https://www.w3.org/TR/css-align-3/グリッドアイテムの表示順序を指定する
order
プロパティCSS Grid では、 Flexbox と同様に
order
プロパティが使用可能です。任意のグリッドアイテムの
order
プロパティを指定することで、グリッドアイテムの表示順序を HTML 文書の構造をそのままに変えることができます。order プロパティは CSS Flexible Box Layout Module にて定義されています。
[CSS-FLEXBOX-1]
Tab Atkins Jr.; et al. CSS Flexible Box Layout Module Level 1. 19 November 2018. CR. URL: https://www.w3.org/TR/css-flexbox-1/まとめ
CSS Grid で使用するのは、CSS Grid の 15 個のプロパティと、CSS Box Alignment の 12 個のプロパティ、そして CSS Flexible Box Layout の 1 個のプロパティの計 28 個です。
これらのプロパティを活用して CSS Grid で素敵なレイアウトをつくりましょう。
この投稿が何かしらの役に立てれば幸いです。
- 投稿日:2020-10-14T21:33:48+09:00
(自分用)スムーズにいかなかった点と解決方法①
自分用で投稿しますが、参考になれば幸いです。
1.floatを使用して二つの要素を左右に並べたときに下の要素が上に押し寄せてきた。
→floatさせた要素に対して高さを持たせる。2.aタグの下線を消したい。
→aタグのcssにtext-decoration: none; を入力する。3.liタグをdisplay: flex;で横並びにした時に、先頭のli要素の左側に謎の隙間が存在していた。
→ul要素にpadding-left: 0; を指定する。4.liタグをdisplay: flex;で横並びにした時に、中の文字数によって枠の大きさが変わってしまう。
→下記3点を満たすとき、自動で均等幅になる。
・display: flex;の要素が改行不可
・子要素の幅がすべて統一指定
・子要素の幅合計が親要素の幅を超える(width: 100%;を指定する)5.liタグの中にあるaタグの縦位置を中央に揃えたい。
→aタグにmarginを設定する