【CSS】margin全指定は上から？右から？ついつい忘れがちなCSSのルールまとめ。

こんにちは！上杉です。
今回は忘れがちなCSSのちょっとしたルールなどをまとめてみました。
個人的な備忘録的に掲載したいと思います！「それ確かに～」と共感してくれる人もいるかも？

1.margin,padding 全指定の順番は？
2.CSSが反映されない！そんなときはセレクタの強さを確認。
3.個人的によく使う装飾一覧

1.margin,padding 全指定の順番は？

CSSでmarginやpaddingを指定するとき、どれかひとつなら簡単ですが迷うのは全指定。
右から？それとも上から？
実は正しい順番はすごくわかりやすい！

【正解は？】
上→右→下→左

要するに時計回りなんです。
ちなみにmarginもpaddingもこのルールは同じ。
時計回りと知っていたら簡単に思い出せるはず。

POINT
全指定の場合は時計回り！

2.CSSが反映されない！そんなときはセレクタの強さを確認。

これまで「CSSは合っているのになんで変わらないの？」
そうイライラした経験はありませんか？

自身もHTMLやCSSは独学で学んできたので、CSSをいろいろなところに書いてしまい記述は合っているのに反映されない、なんてことも。

過去の経験上、反映されないときは大体これでした。

CSSは基本的には「後から書いたものが優先される」というルールですが、
実はぞれぞれのセレクタに強さがあり、優先度が大きく異なっているんです。

■ 強さ一覧 ■

初めて知ったときはもう目から鱗。
これだけ強さが違えばいくら正しく書いてもだめという訳です！

以来、私は以下を目安にしてCSSを入力しています。

個人的な目安（wordpress,cocoonの場合）
・サイト全体に反映する共通するデザイン変更の場合
→「テーマファイルエディター」内のclass指定
・ページ単位の装飾の場合
→各ページの下部CSS欄にclass指定
・ページ内の一部分だけを突発的に装飾する場合
→HTMLタグ内のstyleで指定

独学なのであくまでご参考までに。

3.個人的によく使う装飾一覧

javaとかphpを使用した動くデザインは格好いいですが、
実装にはなかなか手間がかかる！

なので私はCSSだけでそれっぽく見えるものを使っています！
具体的にはこんな感じ。
まずはhtmlから。

/*POINT用 html*/

<p class="pointmid">
<b>POINT</b><br>
ここに内容を</p>

以下、CSSになります。ページ下部の追加CSS欄にそのままコピペしてください。

/*POINT用*/
.pointmid {
  position: relative;
  padding: 1rem 2rem;
  text-align: center;
  border: 3px solid #000;
}

.pointmid:before {
  font-size: 15px;
  font-size: 1rem;
  position: absolute;
  top: -24px;
  left: -3px;
  height: 24px;
  padding: 0 1em;
  content: 'POINT';
  color: #fff;
  background: #332727;
}

▼　こんな感じ！

POINT
ここに内容を

htmlとCSSだけでいい感じに仕上がっていますね。
気に入ったものあったらこちらに追記していきたいと思います！

終わりに。