はてなブログで定義されてる装飾用CSSクラスまとめ

はてなブログはユーザーCSSの前に共通CSSを読み込んでいる。

主に、「記事を書く」や「コメントを書く」、「読者になる」といったシステムで使う部分の装飾なのだが
それ以外にも色々定義しちゃってくれてて
その所為で色々ハマったのでメモしとこうかと思う。

定義されてる装飾用CSSのクラス一覧

全部挙げるとキリがないんで、ユーザー側のクラスと被りそうなやつだけ。

• display系
  • block
  • inline
  • inline-block
  • nodisplay
• float系
  • clear
  • clearfix (after付き)
  • left
  • nofloat
  • right
• font系
  • bold
  • font-default
  • italic
  • nodeco
  • normal
  • underline
• list系
  • nolist
  • circle
  • disc
• position系
  • absolute
  • fixed
  • relative
  • static
• text-align系
  • center
  • textleft
  • textright
• その他
  • border-box
  • margin0
  • padding0

定義されてるスタイル詳細

display系

block

.block {
	display: block;
}

inline

.inline {
	display: inline;
}

inline-block

.inline-block {
	display: inline-block;
}

nodisplay

.nodisplay {
	display: none;
}

float系

clear

.clear {
	clear: both;
}

clearfix

.clearfix {
	display: block;
	*zoom: 1;
}

.clearfix:after {
	content: ".";
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

left

.left {
	float: left;
}

nofloat

.nofloat {
	float: none;
}

right

.right {
	float: right;
}

font系

bold

.bold {
	font-weight: bold;
}

font-default

.font-default {
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

italic

.italic {
	font-style: italic;
}

nodeco

.nodeco {
	text-decoration: none;
}

normal

.normal {
	font-style: normal;
	font-weight: normal;
}

underline

.underline {
	text-decoration: underline;
}

list系

nolist

.nolist {
	list-style-type: none;
}

circle

.circle {
	list-style-type: circle;
}

disc

.disc {
	list-style-type: disc;
}

position系

absolute

.absolute {
	position: absolute;
}

fixed

.fixed {
	position: fixed;
}

relative

.relative {
	position: relative;
}

static

.static {
	position: static;
}

text-align系

center

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

textleft

.textleft {
	text-align: left;
}

textright

.textright {
	text-align: right;
}

その他

border-box

.border-box {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

margin0

.margin0 {
	margin: 0 !important;
}

padding0

.padding0 {
	padding: 0 !important;
}

見事に初見殺しくらいますた

このブログは、ダッシュボード＞デザイン＞カスタマイズ＞デザインCSSから書けるユーザーCSSから
@importで自鯖にある自作CSSを読み込んでいるのだが
その中で、記事中で使えるようにクラスを定義しまくってる。
その中の一つ、.leftと.right。

私の自作CSSの.leftと.rightはtext-alignなのに対し
ユーザーCSSより先に読み込まれるはてなブログデフォルトCSSではfloatになっている。

この状態で適当な要素に.leftや.rightを付ければどうなるか。
先に読まれた方のスタイルを継承し、後に定義されたスタイルと合成される。

テキストが左(右)に寄り、同時に要素も左(右)に寄り、後の要素が回り込み…
結果、表示が崩れる。

なんでこれアナウンスされてないの？
すっげえ迷惑な仕様なんだけど…