【CSS】class名とid名に使える名前一覧

CSS

ヘッダー

header
head
heading
top
headTop
headerTop
topArea
topBase

メイン

main
mainArea
contents
mainContents
mainContainer
blockArea
mainSection
mainBox
contentBlock
mainBase

サイド

side
sidebar
sideOne
sideTwo
menu
sideMenu
sideContent
sideArea
sideLink
sideBnr
sideBlock
sideBase

フッター

footer
foot
bottom
bottomArea
footerArea
boxFoot
boxBottom
blockFoot
blockBottom
footerBase

要素を囲う

wrap
wrapper
inner
headWrap
headWrapper
headInner
mainWrap
mainInner
sideWrap
footerInner
topWrap
centerWrap
postWrapper
contentsInner
ttlWrap
blockWrapper
boxInner
bnrWrap

その他

summary
breadcrumb
panList
detail
more
bnr
ttl
common
mainVisual
slide
message
info
informaiton
data
gNavi
globalMenu
gMenu
firstChild
lastChild
date
category
cat
tag
division
eachArea
description
caption
buttom
entry
genre
thumb
thumbPic
toTop
goTop
pageTop

【Gmail】メルマガで擬似インラインフレームを使うときの注意

その他 CSS

メルマガで擬似インラインフレームを使用するとGmailで崩れて表示されます。
原因はCSSでheightを指定するとmin-heightへ強制的に変換されるためです。
heightの変わりにmax-heightを指定すると解決できます。
CSSはstyleで指定しなければなりません。

<div style="overflow:auto;width:500px;max-height:200px">
テキストテキストテキスト
</div>

【CSS】擬似クラス一覧

CSS

:first-child ある親要素の最初の子要素
:last-child ある親要素の最後の子要素
:hover カーソルが上に乗っており、且つアクティブでない要素
:focus テキスト入力にフォーカスされている要素
:target フラグメント識別子を持ってるurlリンクでターゲット対象にされた要素
:enabled ある要素が有効な時（フォームとか）
:disabled ある要素が無効な時（フォームとか）
:checked ラジオボタン、チェックボックスがチェックされた状態の時
:indeterminate ラジオボタン、チェックボックスがチェックされてるかどうか不確定の状態の時
:root ドキュメントルートの要素
:nth-child(n) 親要素のn番目の子要素
:nth-last-child(n) 親要素の最後から数えてn番目の子要素
:nth-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素
:nth-last-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中最後から数えてn番目の要素
:first-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素
:last-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素
:only-child 兄弟を一つも持たない、その親の唯一の子である要素
:only-of-type 同じ要素の兄弟が一つもない要素
:empty 子要素を一つも持たない要素
:contains() テキストの内容が与えられた部分文字列を含む要素
:not() 「なになにではない（否定）場合」の要素

はてなブログでプログラムのソースコードを掲載する方法

その他

①「設定＞基本設定＞編集モード」で「はてな記法モード」を選択します。
②「はてな記法モード」の編集エリアで下記のように記述します。

>||

body {
#ffffff;
}

||<

プレビューでは下記のように表示されます。

body {
#ffffff;
}

下記のように「>|言語|」と言語を指定することで色付きで表示されます。

>|css|

body {
#ffffff;
}

||<

↓

body {
#ffffff;
}