【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
IE6 を IE7/8 互換にする Script と XML & DOCTYPE宣言 - 続・教えて！Turing先生
Webデザインみなさん、こんばんは。楽しく HTML 書いてますか？HTML を書くのは楽しいですけど、ブラウザ互換性の検証は面倒くさいですよね。特に IE6 は一体何のつもりかと思いますね。 そんな悩みの多くを解決するスクリプト ie7-js の存在を知ったie7-js とは IE6 の挙動を IE7 互換にしてくれる JavaScript です。 ie7-js - Google Code日本語の解説記事はこちら。今年の頭に話題になっていたようですね。見過ごしてました。IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナルIE6以下をWeb標準に準拠させるライブラリ『IE7.js』[to-R]このスクリプト、大変便利なのですが、一つ使用上の注意があります。html の一行目は必ず DOCTYPE 宣言を書いてください間違っても xml
IEで絶対配置（position:absolute）のボックスが消えるバグの検証
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策
見出しがfloating blockの裏に侵食する・floating blockに後続する要素の左右margin,padding | Takazudo Clipping*
画像が左に回り込んだとき、次にくる見出しの左paddingが効いていない。 floatした要素に後続する要素の左右margin,paddingは無視される？CSS2.1の仕様書に何か書いてあるかと思ったけれど、ズバリな箇所が見つけられなかった。でもこんな例がありました。 「浮動する画像は、重なるブロックボックスの境界を不明確にする」！ よくわからないのでFirefox3で実験。以下は、div.imageをfloat:leftし、その後に、いろんなdisplayプロパティをもった要素を並べてみた結果です。各ブロックには、pading,margin,bordrerを指定しています。※これらは、すべてのdisplayプロパティに対応しているブラウザでしか、正確に描画されません。 Floatと後続要素margin,padding検証(HTML) そのCSS(CSS) Firefox3での表示(GI
外部リンクだけにアイコンをつけることのできる CSS のセレクタ | ヨモツネット
概要 リンクで、外部の Web ページが参照先のときにアイコンなどをつけて区別するケースがよくあります。 そのときに、参照先が外部の Web ページの a 要素だけにスタイルを適用するための CSS コードです。 動作確認用の demo この方法は外部リンクの a 要素だけに class 属性をつけるというような処理が必要ないので、CMS やブログのエントリーなどにいいかもしれません。 似た方法で JS でまとめて class 属性を付与する方法もありますが、CSS だけで完結したほうがスマートかなと思ったのでサンプルを作りました。 demo で使用した CSS コード a[href^="http"]{ background:url(img/ico_conductor.png) no-repeat right center; padding-right:15px; } a[href^="h
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
「たかが色、されど色」 ヒトとWebと色の関係：MarkeZine（マーケジン）
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
１ピクのラインにこだわったデザインスタディ
ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ADP: floatレイアウトでつまづかないためのTips
印刷用CSSの書き方（基本編）：ADP
favicon.ico（ファビコン）の作り方 | IDEA*IDEA
http://www.keiyu.com/doc/pdflink.htm
Googleが教えるSEOでやってはいけない30の事 - 海外のSEO対策・SEOツールをわかりやすく解説するブログ