SassでCSSを作成するサンプル
SassでCSSを作成するサンプルです。 目次 サンプル Sass サース 変数を使用する if文を使用する for文を使用する @mixin(ミックスイン)を使用 […]
カテゴリー：HTML / CSS
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) […]
CSS ブロックレベル要素とインライン要素
CSSのブロックレベル要素とインライン要素の違いです。 目次 サンプル ブロックレベル要素 インライン要素 インライン要素＋ブロックレベル要素 ※html5の定義は廃止されましたが使用できます。 ブロッ […]
HTML audio要素で音声ファイルを再生する
目次 サンプル audio要素で音声を再生する 代替の音声ファイル/文言を指定する 仕様 audio要素 source要素 audio要素で音声を再生する audio要素で音声を再生するサンプ […]
CSS text-overflow 列幅超過時の文末(ドット３つ…)
目次 01. text-overflow ・text-overflowとは 02. 使用例 ・何もしない場合 ・文章を途中で終了させる (clip) ・文末にドット３つ(…)を表示 (ellipsis) text-o […]