Currently Featured

リキッドイメージとFaux columns:CSS

リキッドやエラスティックレイアウトの時に図を一緒に拡大縮小する方法と、サイドバーの背景の高さを下まで持ってくるやりかたです。

リキッドイメージ、エラスティックイメージ

リキッドレイアウトやエラスティックレイアウトにおいて、コンテンツのイメージも一緒に拡大縮小するようにする方法です。文字をデカくしたい人は図もデカくしたいでしょうから。
Liquid Images図は実際にやってみたスクリーンショットです。リキッドレイアウトなので、フォントサイズは変わっていませんが、画像が縮小しているのが分かるかと思います。

continue reading… »

Past Featured

CSSのコメントを除去する

CSSのコメントは、/* — */ ですが、自分で分かるように区分したりメモをコメントにしていると、CSSのファイルサイズが結構大きくなるものです。だからと言ってエディタで消しちゃうと訳が分からなくなります。
先般、ある人が、CSSファ…

» read »

マージンの相殺について:CSS

垂直方向のマージンの相殺(margin collapsing)についてです。特に難しいことはないですが、レイアウトする時は気にする必要があると思います。
マージンの相殺は、各ブラウザが実装しても、しなくてもいい仕様だそうです。ここで述べられ…

» read »

フロートとネガティブマージンまとめ:CSS

tableレイアウトをやってた人も計算してからコーディングしてたと思います。CSSのfloatを使用したレイアウトにしても、floatの挙動を正確に覚えれば、緻密な構成が可能になります。以下は私が覚えたときのフロートレイアウトの考え方のま…

» read »

Most Viewed

最初に指定しておくと便利なCSS

CSSのテンプレートを作成する際に、必ず入れていて便利だと思うものを紹介します。body要素に指定する事に関してはいろいろなところで語られているので、ここでは他のテーマなどのCSSを見ていて便利と思って取り入れているものな…

» read »

ボックスをはみ出さないようにfloatをクリアCSS:clearfixハック

float: leftやfloat:rightで配置された画像は、それを含むボックスの高さを調整してくれない。そのため、float指定の画像の高さが、それを含むdiv要素の中身より高い場合は、画像はボックスからはみ出してしまう。これはCSSの仕様なので仕方がないが、こ…

» read »

クロスブラウザでサイトの見え方を確認:Captureサイト

他のブラウザでは自分のサイトがどう見えているのか?
様々なブラウザでのキャプチャをリモートで取ってくれるサービスサイトをまとめてみた。
他のブラウザ、特に今でも5%以上のシェアを持つIE5や、Windows環境の人はMacのIEやSafariなどで…

» read »

簡単な水滴の描き方:Photoshop

後輩にphotoshopで水滴の描き方の書いてある本を貸してくれといわれ、すぐ出てこなかったので、自分で作れと言ったら出来ないらしい。私は覚えていたので教えてあげました。簡単なのですが、何をやるとどう変わるかの勉強には丁…

» read »
Close
E-mail It