CSS border-spacing テーブルの枠線の間隔を指定
目次 ・border-spacingとは ・枠線の間隔を上下左右にセット(数値+pxを指定) ・枠線の間隔を左右と上下にセット(数値+pxを2つ指定) ・背景色を指定してテーブルを作成するサンプル border-spac […]
カテゴリー：HTML / CSS
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 疑似クラス 奇数/偶数/指定行にCSSを適用(nth-child)
CSSの奇数/偶数/指定行にCSSを適用するサンプルです。nth-childを使用します。 内容 使用例 説明 奇数の行にCSSを適用 セレクタ:nth-child(2n+1){ } 同じ親要素を持つ子要素の奇数の行に適 […]
CSS 疑似クラス 画面に動きをつける(:hover/:active/:focus他)
目次 ・１．:link (まだ見ていないページのリンク) ・２．:visited (すでに見たページのリンク) ・３．:hover (マウスカーソルなどが当たったとき) ・４．:active (要素をクリックなどでアクテ […]
CSS 疑似要素 仮想的な要素 (::beforeと::after)
目次 ・::beforeとは / ::beforeのサンプル ・画像を配置する(content:url) / 背景画像を指定する(background) ・beforeの箇所を消す ・beforeを任意の位置に移動させる […]
CSS 階層構造でセレクタを指定(子孫/兄弟)
目次 ・子と孫を指定する(空白区切り) ・子を指定する(>) ・兄弟で弟を指定する(+) ・兄弟で弟を指定する(離れていても可能)(~) 子と孫を指定する(空白区切り) セレクタ1 セレクタ2 セレクタを空白区切り […]