css

CSSの適用優先順位

  • よりタグに近い、より後から読み込まれたスタイルが優先される。 p {color:red;} /*赤色*/ p {color:yellow;} /*黄色で上書き*/ p {color:blue;} /*青色で上書き、この値が有効となる*/ 表示される色は
  • セレクタの種類による優先順位 idセレクタ > classセレクタ > タイプセレクタ > 全称セレクタ p#xyz {color:blue;} /*要素を特定したidセレクタ*/ #xyz {color:green;} /*要素を特定しないidセレクタ*/ p.abc {color:yellow;} /*要素を特定したclassセレクタ*/ .abc {color:orange;} /*要素を特定しないclassセレクタ*/ p {color:red;} /*タイプセレクタ*/ * {color:purple;} /*全称セレクタ*/ 表示される色は
  • !important を付けると最優先になる。 p {color:red !important;}     /*この値が最優先されて有効となる*/ p {color:blue;}                   /*後に記述しても上書きされない*/ 表示される色は

文字の折り返し制御

  • word-break:break-all; 長いURLとかが枠からはみ出た時に、折り返して表示させるときに使う。
  • word-wrap:break-word; 可能な限り単語途中での折り返しを避けることができます。ボックスからはみ出る時だけ折り返し