CSS background position 画像の配置場所を決める
目次 サンプル background position right bottom(右下)を指定 数値+% 数値+%を指定 数値+単位(px) 数値+単位(px)を指定 background position 背景画像の場 […]
カテゴリー：HTML / CSS
CSSのnotで特定の要素にCSSを適用しない(否定)
cssのnotで特定の要素にCSSを適用しない否定のサンプルです。 特定の要素にCSSを適用しない (not) セレクタ:not(適用しないセレクタ){ } セレクタ:not(適用しないセレクタ):not(適用しないセレ […]
HTML 画像ファイルを表示するサンプル(img)
目次 01. サンプル ・画像ファイルを表示する ・ファイルがない時に文字を表示(alt) ・相対パスまたは絶対パスで開く ・画像のサイズを指定 ・ツールチップをつける(title) 02. 中央寄せ ・画像を中央寄せに […]
SassでCSSを作成するサンプル
SassでCSSを作成するサンプルです。 目次 サンプル Sass サース 変数を使用する if文を使用する for文を使用する @mixin(ミックスイン)を使用 […]
CSS @media メディアクエリで幅に応じてCSS適用
メディアクエリ(@media)で、画面幅に応じてCSSを適用するサンプルです。 目次 サンプル @media min-widthを小さい順に指定(モバイルファースト) max-widthを大き […]
CSS transform-style 要素を3D表示する
目次 サンプル transform-style preserve-3dとflatの違い transform-style transform-styleのpreserve-3dは、子の要素を3D表示します。 transfo […]
CSS position sticky スクロールと共に動く
目次 サンプル positionのsticky ある位置に来ると指定の要素が縦スクロールと共に動く(sticky) 親要素の高さの範囲で動く 親要素にoverflow:hiddenがあると動作しない positionのs […]
CSS transform 要素を移動/回転/拡大縮小表示する
目次 サンプル transform 要素を移動させる(translate) 要素を回転させる(rotate) 要素を拡大縮小させる(scale) 要素に傾斜をつける(skew) […]