はりをきば

そこにピカマンがいる限り 私はテイッハットウッをやめない

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

¯注意
この記事はを最後に更新されていない。
更新日が1年以上前の記事はリンク切れしていたり、情報としては役に立たなくなっている可能性あり。
ˆMixed Contentについて
この記事は投稿日が古い為、記事中の画像は非SSL(http://)で貼られている。(※投稿画像以外は全てSSL)
この件に関して詳しくはこちらを参照。

はてなブログはユーザーCSSの前に共通CSSを読み込んでいる。
f:id:Gutyan:20131213195547p:plain
主に、「記事を書く」や「コメントを書く」、「読者になる」といったシステムで使う部分の装飾なのだが
それ以外にも色々定義しちゃってくれてて
その所為で色々ハマったのでメモしとこうかと思う。



定義されてる装飾用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 Pゴシック', '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を付ければどうなるか。
先に読まれた方のスタイルを継承し、後に定義されたスタイルと合成される。


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




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