コピペできるCSS汎用class

ウェブページ(HTMLファイル)の制作時に、要素のid名やclass名を考え、それと並行してスタイルを作っていくというのは効率的ではない場合があります。HTMLファイルを生成することが主な役割である Movable Type や WordPress などの CMS を利用している場合は特にそうです。

そこで、何度も利用しそうなスタイルを汎用classとして定義しておくと便利です。ただし、注意点もあります。

通常はid名・class名を決めてから、そのid名・class名に対してスタイルを適用しますが、汎用classはその逆でスタイルありきです。スタイルがあり、class名があって、要素にそのclass名を適用するという流れになります。そのため、汎用classに指定したプロパティは基本的に変更してはいけません。

また、定期的にリニューアルする可能性がある場合、リニューアルするごとにHTMLファイルに手を加えたくないのであれば、リニューアルを念頭に置いて要素に汎用classを適用する必要があります。

HTMLファイル内にデザインに関する記述をすることは、本来、好ましくありませんが、上記の注意点を念頭に置けば非常に効率的な制作手段となります。

また、一見すると要素にstyle属性を直接指定するのと変わらないように思えますが、汎用classをscreenメディア(PC用CSS)にのみ適用すれば、printメディア(印刷用CSS)などに影響を与えることなくスタイルを適用することができます。

汎用classのCSSソース

以下のCSSソースはあくまで汎用classの一例です。使用しているCSSファイルにコピペしたら自由にカスタマイズしてお使いください。

用意した汎用classはHTML4.01以前に使用されていた、現在は非推奨になっている要素・属性を中心にピックアップしています。

汎用classの解説

  • margin class
    .m-[数値]
    上下左右のマージン(margin)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .mtb-[数値]
    上下のマージン(margin-top&margin-bottom)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .mrl-[数値]
    左右のマージン(margin-right&margin-left)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .mt-[数値]
    上マージン(margin-top)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .mr-[数値]
    右マージン(margin-right)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .mb-[数値]
    下マージン(margin-bottom)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .ml-[数値]
    左マージン(margin-left)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
  • padding class
    .p-[数値]
    上下左右のパディング(padding)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .ptb-[数値]
    上下のパディング(padding-top&padding-bottom)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .prl-[数値]
    左右のパディング(padding-right&padding-left)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .pt-[数値]
    上パディング(padding-top)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .pr-[数値]
    右パディング(padding-right)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .pb-[数値]
    下パディング(padding-bottom)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
    .pl-[数値]
    左パディング(padding-left)を指定する汎用classです。ハイフンの後に続く[数値]は1文字分を100とした場合の相対的な数値です。
  • layout class (width)
    .b-[数値]
    上下左右のボーダー幅(border)を指定する汎用classです。ハイフンの後に続く[数値]はピクセルです。幅と一緒に線(solid)と色(文字色)が適用されます。
    .btb-[数値]
    上下のボーダー幅(border-top&border-bottom)を指定する汎用classです。ハイフンの後に続く[数値]はピクセルです。幅と一緒に線(solid)と色(文字色)が適用されます。
    .brl-[数値]
    左右のボーダー幅(border-right&border-left)を指定する汎用classです。ハイフンの後に続く[数値]はピクセルです。幅と一緒に線(solid)と色(文字色)が適用されます。
    .bt-[数値]
    上ボーダー幅(border-top)を指定する汎用classです。ハイフンの後に続く[数値]はピクセルです。幅と一緒に線(solid)と色(文字色)が適用されます。
    .br-[数値]
    右ボーダー幅(border-right)を指定する汎用classです。ハイフンの後に続く[数値]はピクセルです。幅と一緒に線(solid)と色(文字色)が適用されます。
    .bb-[数値]
    下ボーダー幅(border-bottom)を指定する汎用classです。ハイフンの後に続く[数値]はピクセルです。幅と一緒に線(solid)と色(文字色)が適用されます。
    .bl-[数値]
    左ボーダー幅(border-left)を指定する汎用classです。ハイフンの後に続く[数値]はピクセルです。幅と一緒に線(solid)と色(文字色)が適用されます。
  • border class (style&color)
    .b-[キーワード]
    上下左右のボーダー線(border-style)、または色(border-color)を指定する汎用classです。ハイフンの後に続く[キーワード]はプロパティのキーワードによる値です。
    .btb-[キーワード]
    上下のボーダー線(border-top-style&border-bottom-style)、または色(border-top-color&border-bottom-color)を指定する汎用classです。ハイフンの後に続く[キーワード]はプロパティのキーワードによる値です。
    .brl-[キーワード]
    左右のボーダー線(border-right-style&border-left-style)、または色(border-right-color&border-left-color)を指定する汎用classです。ハイフンの後に続く[キーワード]はプロパティのキーワードによる値です。
    .bt-[キーワード]
    上ボーダーの線(border-top-style)、または色(border-top-color)を指定する汎用classです。ハイフンの後に続く[キーワード]はプロパティのキーワードによる値です。
    .br-[キーワード]
    右ボーダーの線(border-right-style)、または色(border-right-color)を指定する汎用classです。ハイフンの後に続く[キーワード]はプロパティのキーワードによる値です。
    .bb-[キーワード]
    下ボーダーの線(border-bottom-style)、または色(border-bottom-color)を指定する汎用classです。ハイフンの後に続く[キーワード]はプロパティのキーワードによる値です。
    .bl-[キーワード]
    左ボーダーの線(border-left-style)、または色(border-left-color)を指定する汎用classです。ハイフンの後に続く[キーワード]はプロパティのキーワードによる値です。
  • color class
    .aqua
    文字色に水色を指定する汎用classです。
    .black
    文字色に黒を指定する汎用classです。
    .blue
    文字色に青を指定する汎用classです。
    .fuchsia
    文字色に赤紫を指定する汎用classです。
    .gray
    文字色に灰色を指定する汎用classです。
    .green
    文字色に緑を指定する汎用classです。
    .lime
    文字色に黄緑を指定する汎用classです。
    .maroon
    文字色に栗色を指定する汎用classです。
    .navy
    文字色に紺色を指定する汎用classです。
    .olive
    文字色に暗黄色を指定する汎用classです。
    .orange
    文字色に橙色を指定する汎用classです。
    .purple
    文字色に紫を指定する汎用classです。
    .red
    文字色に赤を指定する汎用classです。
    .silver
    文字色に銀色を指定する汎用classです。
    .teal
    文字色に青緑を指定する汎用classです。
    .white
    文字色に白を指定する汎用classです。
    .yellow
    文字色に黄色を指定する汎用classです。
  • font and text class
    .italic
    文字を斜体に指定する汎用classです。
    .small-caps
    文字を小さい大文字に指定する汎用classです。
    .bold
    文字を太字に指定する汎用classです。
    .xx-small
    文字をごく小さくする汎用classです。
    .x-small
    文字を小さくする汎用classです。
    .small
    文字をやや小さくする汎用classです。
    .large
    文字をやや大きくする汎用classです。
    .x-large
    文字を大きくする汎用classです。
    .xx-large
    文字をごく大きくする汎用classです。
    .overline
    文字に上線を指定する汎用classです。
    .underline
    文字に下線を指定する汎用classです。
    .capitalize
    英単語の1文字目を大文字にする汎用classです。
    .uppercase
    英単語を全て大文字にする汎用classです。
    .lowercase
    英単語を全て小文字にする汎用classです。
  • layout class
    .indent
    文字列の1行目を1文字ずらす汎用classです。
    .left
    文字列を左寄せにする汎用classです。
    .right
    文字列を右寄せにする汎用classです。
    .center
    文字列を中央寄せにする汎用classです。
    .float-left
    指定した要素を左寄せし後続する内容を右側に回り込ませる(左フロート)汎用classです。
    .float-right
    指定した要素を右寄せし後続する内容を左側に回り込ませる(右フロート)汎用classです。
    .clear
    先行するフロートと内包するフロートを解除する汎用classです。
    .clear-left
    先行する左フロートと内包する左フロートを解除する汎用classです。
    .clear-right
    先行する右フロートと内包する右フロートを解除する汎用classです。

汎用classの使用例

目立たせたい見出し
<h1 class="ptb-50 prl-100 bl-5 bl-black bg-silver">上下のパディングが0.5em・左右のパディングが1em・左ボーダーが5pxの黒・背景色が銀色</h1>
重要な部分
<strong class="ptb-25 prl-50 bg-red yellow">上下のパディングが0.25em・左右のパディングが0.5em・背景色が赤・文字色が黄色</strong>