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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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