CSS リファレンス

CSSだけでグラフを作ってみました

最近jQueryでグラフを使ったりしてるサイトが出てきていますが、CSSだけでグラフを作ってみました。

もし仕事で使う機会があったら参考にして下さい。

プロとして恥ずかしくないスタイルシートの大原則

以前プロとして恥ずかしくないWEBデザインの大原則を紹介したんですが、自分が一番読み込んだシリーズがこのプロとして恥ずかしくないスタイルシートの大原則です。全然CSSが知らない時に読んだのですが、凄くわかりやすく本なので、これからCSSを勉強しようとしてる人には凄くお勧めです。

CSSハックまとめてみました

ハックって使う機会はそんなに無いと思いますけど、もしもの時に!

てな感じで知っておいて損はないと思うので、最近のブラウザで使えそうなハックをまとめてみました。

CSSで簡単に画像の横にあるテキスト上下中央に配置する

Webサイトを作る時によく画像があり、その横にテキスト文があるデザインってをよく使うと思うんですが、これをfloatを使わずに簡単に出来ちゃう方法を紹介したいと思います。

ポイントはdisplay: table-cell;でIEにはハックで対応です。

clearfixの使い方

Webサイトを作るうえでclearfixを知っておかないとけっこう困ったりすると思うので是非この機会に知って下さい。

どんな時にこのclearfixを使うかと言うと、floatさせている画像やボックスなどの子要素。その子要素を包んでいるはずの親要素が子要素を包んでくれないケースって経験した事があると思います。

これを解決する為にclear:bothをbrなりdivにクラス指定した事ってあると思うんですけど、それを解決をしてくれるのがclearfixなんです。

※IEの場合はheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。

有名サイトが使っているid名class名集めてきました!

コーディングしてる方なら誰しもが一度思ったはず!idやclassの名前をどうしよう・・・・。

変な名前なんてつけたらダサいと思ってしまうし.........
こう思ってしまうのは自分だけではないはず。

そう思いこのたびいろんな有名サイトが使っているid名class名をせこせこ集めたものここでまとめちゃいました!
名前に困った時はいつでも見て下さい。

よく見るサイドメニューのサンプル

サイドになるメニューリスト項目ってよく見かけると思うんですが、使い回しが出来そうなサンプルをjavascriptを使わずにCSSのみでロールオーバーに対応しているように作ったのでみなさんの参考になれば!って思います。

Domo Page

定義リストdlのdt dd の横並びの作り方

dt ddの横並びって使っている方も多いし、使いがってもかなりいいのでサンプルを作ってみました。

dt dd の横並びって言っても作り方はいろいろあるので、今回はその一例だと思って下さい。

ブラウザスタイルの初期化する為のデフォルトCSS

ブラウザによってデフォルトのフォントは異なります。

それを統一させる為にもCSSで一度デフォルトをかける必要があるんですよね。

今回は今、自分が普段使っているデフォルトCSSをあげておきます。

http://css-lecture.com/template/distribution/default.css

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年