コピペできるCSSアニメーションのスニペット
<head></head>にcssを読み込みます。CDNで呼び出すこともできます。
<link rel="stylesheet" href="vov.min.css">使い ...
画像とテキストの横並びして、縦（垂直方向）中央揃えにする
画像とテキストを横に並べてなおかつ画像の縦方向の真ん中にテキストを置きたい時あります。サイトのヘッダーなどでロゴ画像とサイトタイトルを並べたい時など。。。
floatやflexboxを使っても良いのですがシンプルにインライ ...
擬似要素(::before,::after）でFontAwesomeや丸付き数字など特殊文字を表示する
CSSの擬似要素(::before,::after）のcontentプロパティにFont AwesomeのWebフォントの値や丸数字（丸付き数字①②③④⑤⑥⑦⑧⑨⑩）、♥や♠などのような特殊文字を表示する方 ...
Sublime Text 3でCompassのビルド設定とエラー
新しいPC（Windows10）に入れていたSublime Text3でCompassのビルド設定をしていなかったのでしばらくぶりに設定をした時の覚書とエラーが出たのでその対処方法。
Ruby がインストールされていて、既 ...
印刷用CSSスタイルシートをデバッグしたい
印刷用のスタイルシートを修正したいとき、修正箇所などを確認する方法。
Google Chromeで簡単に確認できるのを知りました。
1）デベロッパーツールを開く
2)右側のXの横にあるメニューをクリ ...
今更学んだ「テキスト変換する前の文字が見えない」原因
お恥ずかしいでところですが、初めてその状況になって初めて学んだこと。
フォームで、テキストを打っている時、違和感が。。。
よくよくみると、変換する前の文字がなぜか消えてる!?
原因は、CSSの設定でした ...
OSX Yosemite にSass,Compassのインストールとエラー対処
長年愛用してきたmacbookpro(2008 early)に別れを告げるべく、ついに新型MJLT2J/Aを購入しました。
appleサイトでは、15.4インチ 2.5GHzは、282,800円（税別） 2015年10月20日 ...
センタリング（中央揃え）のまとめ
テキストや要素をセンタリングするのにちょっくら迷ったのでこの機会にまとめておくことに。
text-align:centerを使う最もカンタンと思われる方法。
但し、インライン要素にしか効かない。
なんで効か ...
:first-child の使い方を勘違いした
:first-child擬似クラスは、IE７から対応しているためよく使われる擬似クラスですよね、何度も使っていたにもかかわらず勘違いしたので戒めとして書き記しておきます。
:first-child擬似クラスは、親要素の一番 ...
レスポンシブデザインのテーブルレイアウト
レスポンシブデザイン時のテーブルレイアウトの一つの参考。
600px以下で表示したときには、セルの幅が狭くなり過ぎて見づらくなるのを解消するため、横スクロールさせる。
幅600pxのテーブル
見出しA見出 ...