カテゴリー：HTML / CSS

CSS padding 要素の内側の余白を指定する

nas2017/10/18
目次 サンプル paddingとは paddingに数値+pxを指定 paddingに数値+%を指定 paddingを個別に指定 paddingとは パディング(padding)は、コンテンツエリアとボーダーの間の余白で […]

[CSS] nth-child 奇数/偶数/指定行にCSSを適用

nas2017/09/27
CSSの奇数/偶数/指定行にCSSを適用するサンプルです。nth-childを使用します。 内容 使用例 説明 奇数の行にCSSを適用 セレクタ:nth-child(2n+1){ } 同じ親要素を持つ子要素の奇数の行に適 […]

CSS 画面に動きをつける(:hover/:active/:focus他)

nas2017/09/26
CSS の画面に動きをつけるサンプルです。:hoverや:activeや:focus等の擬似クラスです。 目次 １．:link (まだ見ていないページのリンク)   ２．:visited (すでに見たページのリ […]

[CSS] ::beforeと::afterのサンプル

nas2017/09/22
CSSの疑似要素の::beforeと::afterのサンプルです。 ::before ::beforeとは / ::beforeのサンプル   画像を配置する(content:url) / 背景画像を指定する( […]

CSS 階層構造でセレクタを指定(子孫/兄弟)

nas2017/09/21
CSSの階層構造でセレクタを指定するサンプルです。 目次 子と孫を指定する(空白区切り)   子を指定する(>)   兄弟で弟を指定する(+)   兄弟で弟を指定する(離れていても可能 […]

CSS 継承のサンプル(inherit)

nas2017/09/13
目次 01. CSSの継承 ・CSSの継承とは ・cssのcolorで継承させる例 02. inheritで継承させる例 ・marginはデフォルトでは継承されない ・inheritでmarginを強制的に継承させる例 […]

CSS セレクタの優先順位(!important)

nas2017/09/10
目次 01. セレクタの優先順位 ・CSSのセレクタの優先順位とは 02. 使用例 ・同じセレクタの場合は後勝ちになる ・IDセレクタとインラインスタイルがある場合 ・!importantがある場合 ・IDセレクタ、クラ […]