カテゴリー:
CSS
閲覧数:515 配信日:2019-10-01 08:16
「共通」部分と「拡張」部分を分離してクラスを定義する
「共通」部分
・width
・height
・font-size
・line-height
・border
「拡張」部分
・color
・background-color
・border-color
見出し
「サイト共通基底」部分
h1, h2, h3, h4, h5, h6 {}
「共通」部分
.h2-entry-title{}
「拡張」部分
・1プロパティだけ異なるケースは、HTMLへ直書する
<h2 class="h2-entry-title" style="border-left-color:#FFC107;">
不採用にした「class名」案
不採用にした見出し「class名」案1
.h1にしていない理由は、検索対策
※h と heading が重複しているが、「正確さ」よりも「見た目の分かりやすさ」を重視している
・不採用理由は、案2の方が短くて分かりやすいと思ったから
.h1-heading
.h2-heading
.h3-heading
.h4-heading
.h5-heading
.h2-heading
.h3-heading
.h4-heading
.h5-heading
不採用にした見出し「class名」案2
不採用理由は、案3の方が短くて分かりやすいと思ったから
.heading-1
.heading-2
.heading-3
.heading-4
.heading-5
.heading-2
.heading-3
.heading-4
.heading-5
不採用にした見出し「class名」案3
・不採用理由は、何のh1タグか不明だから
※「共通」部分は<h1>に書く前提
.h-1
.h-2
.h-3
.h-4
.h-5
.h-2
.h-3
.h-4
.h-5
・OOCSS
・「CSSプロパティ」書く順番