20201014のCSSに関する記事は3件です。

css,js,html 備忘録

要素を上下中央に配置する方法
https://codepen.io/liang-kang/pen/GRqopmj
参考元:https://sole-color-blog.com/blog/532/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

お気付きの通り、これらのうちのほとんどのプロパティは gridgrid-area のロングハンド記法に過ぎません。つまり、gridgrid-area の機能を細分化して小分けしたプロパティになります。

grid-templategrid-template-rowsgrid-template-columns とのショートハンド(簡略表記法)になります。

そして gridgrid-auto-flowgrid-auto-rowsgrid-auto-columnsgrid-auto-flow、そして grid-template とのショートハンドになります。

grid-rowgrid-row-startgrid-row-end とのショートハンドです。

grid-columngrid-column-startgrid-row-end とのショートハンドです。

そして grid-areagrid-rowgrid-column とのショートハンドになります。

gridgrid-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 で素敵なレイアウトをつくりましょう。

この投稿が何かしらの役に立てれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

(自分用)スムーズにいかなかった点と解決方法①

自分用で投稿しますが、参考になれば幸いです。

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を設定する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む