css一覧

NO IMAGE

webフォント(Font Awesome)の使い方

ウェブサイトでアイコンを使いたいときに、画像ではなく、Webフォントを使って表現することって多くなりました。 手軽だし、サイズが変わっても荒くならないのもいいですよね。 いろいろなWebフォントサービスがありますが、Font Awe...

NO IMAGE

CSSだけでボーターを重ねる

しばらく書くのをサボってしまいました--; また今日から頑張ります。 やりたかったのはこんな感じのやつです。 一昔前なら、画像で表現していたと思うんですがスタイルシートでできるよなーと。 :after擬似クラ...

NO IMAGE

:nth-childの基本とIE対応

リスト、テーブルやカラムを並べるときに、:nth-child は大活躍の疑似クラス。 使い方の基本 ○番目のエレメントを指定する ※3番目の場合 li:nth-child(3){ color:red; }  奇数、偶数を指定...

NO IMAGE

tab css style タブメニューのCSS

コンテンツを効率的にレイアウトしたいときにタブを使ってレイアウトすることはよく有ります。 そんな時にCSS+javascript で実装するサンプル javascript は Yetii (ちょっと古いけど使いやすいので)を使い...

NO IMAGE

SNSボタンをきれいに横並びに

HP上にSNSの各ボタンを並べるのを今更ながらやってみたら、余分なスペースがあったり、ガタガタになってしまったので、今後きれいに横並びできるようにするための覚え書きです。 今回は、Twitter、Google+、Facebookの3つ...

NO IMAGE

リンクの周りの点線(or線)を消す

リンクをクリックしたときにでるまわりの点線? IEやFirefoxで表示される。これを表示させたくない場合は a{ outline:none; } とすると消せるそうなんですが、tabキーを使ってリンクを移動している人たちにとっては、...

NO IMAGE

WordPress 記事3件ごと、4件ごとに〜する

アーカイブページなどでエントリーを3件とか4件とかで横並びにしたいことってたまにありますよね ちゃんとプログラムを理解している人ならすごく簡単なことだと思うのですが、ノンプログラマの私には毎回戸惑います。 なのでこれを機会にあら...

NO IMAGE

久しぶりのIE7 バグ

最近はIE7は動作対象からはずすことが多くなったので、忘れていた(知らなかった?)バグに遭遇。備忘録として残します。 その1: floatした要素の中身が表示されたり、されなかったりする。 <dl> <dt&...