CSS

【結論】

実はWeb（HTML/CSS）では、ピクセル pxを使った指定は画面上の1画素（ドット＝物理ピクセル）を表しておらず、現実の長さの単位（物理単位）でしかない。

つまり、ポイント（pt）とピクセル（px ...

marginを利用する場合の問題点水平方向にしかセンタリングできない
対象要素の横幅がわかっている場合しかセンタリングできない

よって、垂直方向にセンタリングしたい場合や対象要素の横幅がわからない（もしくは可変である）場合 ...

【更新情報】表示がおかしくなっていた部分を削除

空白文字の扱い

原則的に、HTMLのソース上の改行・タブ、そして半角の空白文字（半角スペース）は、基本的にそれらがいくつあってもひとつの半角スペースにまとめられる。

推奨する方法

html要素に適用する。

理由単位「rem」の基準はhtml要素

フォントサイズを指定する際の単位のひとつ「rem」は、html要素のフォントサイズを基準として指定する相対サイズのこと。

それが「1r ...

CSS3からは、要素の3D表現が可能になっている。

基本的には、2D変形の機能と同じ形式。

ただし、ブラウザごとに微妙に動作が異なるので注意。

また、全体的にSassなどのメタ言語を使わないと厳しい ...

HTMLにおけるdivなどのブロック要素では、width、heightのサイズ指定した値にborderとpaddingを足し合わせたものが、実際の表示上のサイズになる。

横幅の計算方法：

表示上の横幅＝width＋b ...

HTML共通事項すべてのカラムに「height: 100%;」を指定する。そうしないと、それぞれの高さが内容によってバラバラになってしまう。
全体のセンタリングのためにコンテナが必要。
コンテナに幅を指定し、左右のマージンを「a ...

text-align

特定の要素の子孫にあるテキストやインライン要素を横方向（水平方向）のどの位置にするか指定。

このプロパティは継承されるので、設定を変えたい場合は子孫の要素のどこかで再設定する必要がある。

な ...

【2013年4月22日 加筆・修正】　box-shadowのアルファについて

こちらのサイトで、くぼみにはめられた感じの魅力的なボタンをPhotoshopでつくる場合のチュートリアルが掲載されている。

これをH ...

transitionとanimationの違いtaransition:hoverなどと同じように、特定のアクションに対して要素を単純に状態変化させ、終了後に自動で逆のアニメーションで元に戻るanimationFlashのように細かいアニメー ...