CSSCSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。divを中央揃えにするほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。divを横並びにfloatでdivを並べてレイアウトを組んでいきます。floatを解除する場合はclear:both;を使います。実はクラスは一度に複数指定できます。スペースを空けるだけなので簡単ですね。20px;、、、と書かなくても一行で指定することができます。上、右、下、左;と、上から時計回りの順で指定していきます。同様にボーダーの色も上、右、下、左の順に指定できます。フォントのプロパティを短く指定さらにフォントのプロパティも短くできます。全てを指定する必要はないので、必要なもの以外は省いてOK。リンクの点線を消去リンクをクリックしたときに表示される点線を消去。私の場合かなりの確率でクライアントから依頼があり消していますが、これをするとタブキーを使ってリンクを辿る際、どこにフォーカスしているかわからなくなります。画像にリンクを張ったとき、aタグに指定された色の線が表示されると思います。それを消去しちゃいます。数値を変更して透明度を変更。0が透明、1が不透明です。ブラウザー毎にCSSを変えるIE用にCSSを変える場合、header内に以下の条件を記述することで実装できます。IE]の部分を下記に変更。マウスオーバーで画像を変更これにはいろんなやり方があります。以前書いたCSSスプライトもその一つ。今回は2枚の画像を使ったやり方を紹介します。マウスオーバー時に表示される画像を背景画像として指定。その中に通常時の画像を置きます。hidden;でマウスオーバーしたときに通常時の画像を隠します。ファビコンURLアドレスバーの横にちょこんとある小さな画像、ファビコンを作成。Photoshop、Illustratorなどで16px四方の画像を作成し、.gifか.pngで保存。その画像を.icoに変換してくれるサイトなどで.ico画像を作ります。その後header内に以下を記述すればファビコン設置完了です。(わざわざ.gifから.icoに変換しなくてもWindowsのPhotoshopなら別名保存から.icoで保存できるらしい。?Windows使わないのでこの辺よくわかりません。ページサムネイル画像ソーシャルブックマークサイト等に表示されるサムネイル画像を指定します。(動作しないサイトもあり?)headerに下記を記述。画像の好きな部分を切り抜くclipを使って画像を好きな位置で切り抜きます。サムネイル画像なんかに使えそうですね。absolute;を使うのがポイント。rectの値は少しわかりづらいのですが、下の図を参考にしてみてください。長いURLを途中で折返すURLなどの長い英単語が続くとうまく改行せず続けて表示されてしまいます。その問題はword-wrapで解決。指定してラインを消しちゃいましょう。2行目以降にスペースを※を使った注意事項などに使える小技。最初の行は通常に、次の行からは一文字分開けて表示します。min-heightdivなどの最低限表示する高さを指定。最低500pxは表示させ、あとはコンテンツによってどんどん長くなる。いうdivに有効です。横並びブロックのマージンを調節div内にある横並びブロックにマージンを、でも最初と最後のブロックをdivの幅に合わせる方法。何かと使う機会が多いです。基本的なことがエントリーされてましたので、「あれ?どうやんだっけ?」っていう時にリファレンスになるので思わずブックマークさせて頂きました。参考になるので助かります。pm小技のまとめは参考になります。ありがとうございました。pmこんにちは、7の点線を消すと言うCSSがすごく気になりました。pmopacityはIE8の書き方も付け加えるべきかと。pm少しのコードで実装可能な20のCSS小技集...CSSの使える小技をまとめてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。うっかり忘れてしまった時やこんなことも出来るんだという発見があるかもしれないCSSのTipsです。:)@geckoさん追加してみました。ビールから始めましょうか。-10px;}は何のために必要ですか?仕様上、水平方向のマージンは相殺(折りたたみ)されないと思うので、liの右マージンとの相殺を狙っているわけではないですよね。そもそもdivの幅が470pxで、その子要素のulが通常フローかつ幅480pxでdir=”ltr”だからulの右マージンは必然的に-10pxになるはずです。マージン含めて160pxのliが3つとも(いわゆるカラム落ちすることなく)470pxの枠内に収まることができるのは、liの包含ブロックの幅が480pxあるからであり、枠をつくるためにボックス(div)を余分にひとつ増やしてしまってあまり意味がないように思います。divなしでこれが実現できたら便利な「小技」だと思うんですが。(つまり、ulのwidthを470pxにしてdivなしでやる。-10px;がないとIE6ではうまく動作してくれません。整理も兼ねて記事にしてみました。クマークしておいたものも多数。CSSの小技集を公開されている方がいたのでご紹介。そのうち使うことになるかなと。Webクリエイターボックスでも取り上げられていますが、こちらもネガティブマージン...では無いですが、マイナスの値を与えることで実現可能です。WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、これもまた自分用まとめだったり...。例文も私がよく使うものをコピペしやすいように置いてます。Webクリエイターボックスでも取り上げられてる方法で、こちらもネガティブマージン...では無いですが、マイナスの値を与えることで実現可能です。amとても参考になるサンプルありがとうございます。知らなかったこともしれて嬉しいです。