ドキュメント : CSS
-
【CSS】content - 要素(::before / ::afterの内容)
CSSのcontentプロパティをご紹介します。contentcontentは無名要素を示すプロパティです。主に擬似要素のbefore、afterのプロパティとして使います。基本構文content: 値;値値には一般的な値は次の通りです。値意味none内容なしテキストテキストの内容画像url()で読み込む画像サンプルテキスト<style>p::before { content:
-
【CSS】cursor - カーソルの様式
CSSのcursorプロパティをご紹介します。cursorcursorはカーソル(マウスなど)の様式を示すプロパティです。基本構文cursor: 値;値一般的な値は次の通りです。値意味autoユーザーエージェント(ブラウザ)の仕様helpヘルプカーソルpointer指カーソルprogress処理中カーソルwait待機カーソルtextテキストカーソルサンプルhelp<style>p {
-
【CSS】display - 要素のレイアウト
CSSのdisplayプロパティをご紹介します。displaydisplayは要素のレイアウトを示すプロパティです。基本構文display: 値;値一般的な値は次の通りです。値意味blockブロック要素inlineインライン要素flexブロック要素と同じ振る舞いで、コンテンツをフレックスボックスでレイアウトします。サンプルblock<style>p { display: bloc
-
-
【CSS】flex-grow - フレックスアイテムの拡大係数
CSSのflex-growプロパティをご紹介します。flex-growflex-growはフレックスアイテム(display: flex;の子要素)の拡大係数を示すプロパティです。フレックスコンテイナー(display: flex;の要素)のサイズがフレックスアイテムの合計より大きい場合、余った空間をこのプロパティの値に応じて拡大します。基本構文flow-grow: 値;サンプル<style
-
【CSS】flex-shrink - フレックスアイテムの縮小係数
CSSのflex-shrinkプロパティをご紹介します。flex-shrinkflex-shrinkはフレックスアイテム(display: flex;の子要素)の縮小係数を示すプロパティです。フレックスコンテイナー(display: flex;の要素)のサイズよりフレックスアイテムの合計が大きい場合、このプロパティの値に応じて縮小します。基本構文flow-shrink: 値;サンプル<sty
-
-
-
【CSS】flex-basis - フレックスアイテムの初期サイズ
CSSのflex-basisプロパティをご紹介します。flex-basisflex-basisはフレックスアイテム(display: flex;の子要素)の初期サイズを示すプロパティです。基本構文flow-basis: 値;サンプル<style>div { display: flex; background: lightgray;}p { border: 1px so
-
【CSS】flex - フレックスアイテムのサイズ関連
CSSのflexプロパティをご紹介します。flexflexはフレックスアイテム(display: flex;の子要素)のサイズ関連の一括設定プロパティです。拡大係数や縮小係数、初期サイズの個別定義は、flex-grow、flex-shrink、flex-basisを使用します。基本構文flow: 拡大係数 縮小係数 初期サイズ;サンプル拡大係数のみ<style>div { dis
-
【CSS】flex-direction - フレックスコンテナーの主軸方向
CSSのflex-directionプロパティをご紹介します。flex-directionflex-directionはフレックスコンテイナー(display: flex;の要素)の主軸方向を示すプロパティです。基本構文flow-direction: 値;値一般的な値は次の通りです。値意味row書字方向row-reverserowの逆columnブロック軸columnブロック軸の逆サンプルrow&
-
-
【CSS】flex-wrap - フレックスコンテナーの折り返し
CSSのflex-wrapプロパティをご紹介します。flex-wrapflex-wrapはフレックスコンテイナー(display: flex;の要素)の折り返しを示すプロパティです。基本構文flex-wrap: 値;値一般的な値は次の通りです。値意味nowrap折り返さない。wrap折り返す。wrap-reverse折り返す。(折り返しは上に重なる)サンプルnowrap<style>d
-
【CSS】flex-flow - フレックスコンテナーの主軸方向と折り返し
CSSのflex-flowプロパティをご紹介します。flex-flowflex-flowはフレックスコンテイナー(display: flex;の要素)の主軸方向と折り返しを示すプロパティです。主軸方向と折り返しの個別設定はflex-direction、flex-wrapを使用します。基本構文flex-flow: 主軸方向 折り返し;サンプルサンプル1<style>div { di