CSS position relative 要素を元の位置からずらす
目次 サンプル positionのrelative 元の位置を基準として要素を配置する(relative) positionのrelative positionのrelativeは、要素を元の位置からずらして配置します。 […]
カテゴリー：HTML / CSS
CSS floatとclear 回り込みと解除のサンプル
CSSの回り込みと解除のサンプルです。 目次 サンプル floatの動き floatが効かないとき clearの動き 親子要素：親にoverflow:hiddenで子のfloatを解除する […]
CSS border-spacing テーブルの枠線の間隔を指定
目次 サンプル border-spacingとは 枠線の間隔を上下左右にセット(数値+pxを指定) 枠線の間隔を左右と上下にセット(数値+pxを2つ指定) 背景色を指定してテーブルを作成するサンプル border-spa […]
CSS border-collapse テーブルの枠線を重ねる/離す
目次 サンプル border-collapse テーブルの枠線を重ねて表示(collapse) テーブルの枠線を離して表示(separate) テーブルの一部の線を消す separateでテーブルを作成 border-c […]
CSS margin 外側の余白/中央・右に寄せる
説明 marginとは サンプル marginに数値+pxを指定 marginに数値+%を指定 要素を中央寄せにする 要素を右寄せにする マージンが上下に被った場合 マージンが左右に被った場合 marginを個別に指定 […]
CSS padding 要素の内側の余白を指定する
目次 サンプル paddingとは paddingに数値+pxを指定 paddingに数値+%を指定 paddingを個別に指定 paddingとは パディング(padding)は、コンテンツエリアとボーダーの間の余白で […]
[CSS] nth-child 奇数/偶数/指定行にCSSを適用
CSSの奇数/偶数/指定行にCSSを適用するサンプルです。nth-childを使用します。 内容 使用例 説明 奇数の行にCSSを適用 セレクタ:nth-child(2n+1){ } 同じ親要素を持つ子要素の奇数の行に適 […]
CSS 画面に動きをつける(:hover/:active/:focus他)
CSS の画面に動きをつけるサンプルです。:hoverや:activeや:focus等の擬似クラスです。 目次 １．:link (まだ見ていないページのリンク) ２．:visited (すでに見たページのリ […]