ドキュメント : CSS
-
【CSS】order - 要素を並べる順序
CSSのorderプロパティをご紹介します。orderorderはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)の子要素の順序を示すプロパティです。基本構文order: 値;サンプルサンプル1<style>div { display: flex; background: lightgray; f
-
【CSS】justify-content - コンテナーの主軸配置
CSSのjustify-contentプロパティをご紹介します。justify-contentjustify-contentはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)の主軸配置を示すプロパティです。基本構文justify-content: 値;値一般的な値は次の通りです。値意味start先頭側に寄せる。end末尾側に寄
-
【CSS】align-content - コンテナーのブロック軸配置
CSSのalign-contentプロパティをご紹介します。align-contentalign-contentはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)のブロック軸配置を示すプロパティです。基本構文align-content: 値;値一般的な値は次の通りです。値意味start先頭側に寄せる。end末尾側に寄せる。ce
-
-
【CSS】align-self - コンテイナーアイテムの交差軸配置
CSSのalign-selfプロパティをご紹介します。align-selfalign-selfはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)の個別アイテム(要素)の交差軸配置を示すプロパティです。基本構文align-self: 値;値一般的な値は次の通りです。値意味start先頭側に寄せる。end末尾側に寄せる。cente
-
【CSS】align-items - コンテナーの交差軸配置
CSSのalign-itemsプロパティをご紹介します。align-itemsalign-itemsはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)のアイテム(要素)の交差軸配置を示すプロパティです。基本構文align-items: 値;値一般的な値は次の通りです。値意味start先頭側に寄せる。end末尾側に寄せる。cen
-
-
-
【CSS】float - 浮動(要素の回り込み)
CSSのfloatプロパティをご紹介します。floatfloatは要素の回り込みを示すプロパティです。基本構文float: 値;値一般的な値は次の通りです。値意味noneなし。left左側に回り込む。right右側に回り込む。サンプルleft<style>img { float: left;}</style><div> <img src="/s
-
【CSS】clear - 浮動の解除
CSSのclearプロパティをご紹介します。clearclearは要素の回り込みの解除を示すプロパティです。基本構文clear: 値;値一般的な値は次の通りです。値意味noneなし。left左側に回り込みを解除。right右側に回り込みを解除。both左右の回り込みを解除。サンプルnone<style>.img1 { float: left;}.img2 { float:
-
【CSS】transform - 要素の変形
CSSのtransformプロパティをご紹介します。transformtransformは要素の変形を示すプロパティです。基本構文transform: 値;複数値の定義はスペースで区切ります。transform: 値 値 値;値一般的に値には関数を使います。代表的な関数は次の通りです。rotateroute関数は特定点を中心に要素を回転します。route(角度);rotateXrouteX関数はX
-
-
【CSS】transition-property - トランジション効果の適用プロパティ
CSSのtransition-propertyプロパティをご紹介します。transition-propertytransition-propertyはトランジション効果の適用プロパティを示すプロパティです。トランジション効果はプロパティが変化する時のアニメーションです。基本構文transition-property: 値;複数値はカンマ(,)で区切ります。transition-property:
-
【CSS】transition-duration - トランジションの効果時間
CSSのtransition-durationプロパティをご紹介します。transition-durationtransition-durationはトランジションの効果時間を示すプロパティです。トランジション効果はプロパティが変化する時のアニメーションです。基本構文transition-duration: 値;複数値はカンマ(,)で区切ります。transition-duration: 値 値 値