HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
ist-jo.in - ist jo リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
[CSS]IE6/7でも動作する、可変レイアウト用グリッドシステム -Flurid
IE6/7でも動作する数少ない、可変レイアウト用グリッドシステムのCSS/JSのフレームワーク「Flurid」を紹介します。 Flurid - The Fluid CSS Grid [ad#ad-2] FluridはCSSベースで開発された可変レイアウト用グリッドシステムのフレームワークで、jQueryのプラグインとしても開発されています。 Fluridの対応ブラウザ Fluridの対応ブラウザは下記の通りです。 Internet Explorer (Windows) - versions 6.0 - 8.0 Mozilla Firefox (Windows/Linux) - versions 1.0 - 3.6 Fluridのデモ デフォルト Fluridのデフォルトのレイアウトです。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5でつまずきやすいasideとsectionの使い方
HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を
個人的に使うことが多い9つのjQuery・JavaScriptスニペット :: 5509
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。 コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。（もっときれいに書けとか何そのコードとかも歓迎） 紹介してるスニペットたち ページトップにスクロールするだけ テキストボックスにラベル表示するやつ 要素のサイズを取得するやつ タブきりかえるやつ IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide() Google Analyticsのトラックイベント一括bind Ajaxサイトにするときに使うリンク置き換えプラグイン スク
IE7からのCSSの小難しいセレクタやプロパティいろいろ
チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を、IE7 に合わせるなら、ちょっとお役立ちかもです！ そろそろ IE6 のことは忘れて、IE7 からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。 これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。 IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は
HugeDomains.com
Captcha security check monodez.com is for sale Please prove you're not a robot View Price Processing
ウェブ開発者必携のGoogle Chromeの15の拡張機能
ウェブサイトの制作に役立つGoogle Chrome用の機能拡張をCSS Reflexから紹介します。 15 Must Have Google Chrome Extensions for Web Development [ad#ad-2] Pendule HTML, CSS, WAIなどの検証をはじめ、CSSの無効化、リンクチェック、カラーピッカー、ルーラーなど。 Chrome Sniffer そのサイトで使用しているCMSとJavaScriptのライブラリを表示。 Chrome Web Developer Tools FirefoxのWeb Developer toolbar（日本語版）のクローンを目指して開発。 IE Tab ChromeでIEのレンダリングで表示。 Window Resizer ウインドウのサイズをワンクリックで任意の値に変更。 Chrome SEO 各種検索エンジン
Nihilogic
Saturday, September 20, 2008 9 comments Mandelbrot in less than 128 bytes of DHTML Labels: javascript A while ago, Mathieu "p01" Henri rendered the initial Mandelbrot set in 137 bytes of JavaScript and HTML, getting it down to 133 bytes with a few tweaks but still a few bytes short of his 128 byte goal. Since fractals are groovy, I decided to make my own, trying to get it below that magic number.
画像にツールチップを表示させない方法 [ホームページ作成] All About
画像にツールチップを表示させない方法IEで画像を表示させると、画像の上にマウスを載せただけで「代替文字」がツールチップとして表示されます。これは画像によっては煩く感じられることがあります。代替文字をツールチップに表示させない方法をご紹介。 代替文字は代替以外の用途にも使われる ウェブページ上に画像を掲載する場合は、何らかの事情で画像が読み込まれなかった場合のために、「代替文字」を記述しておけるようになっています。例えば以下のように記述します。 <img src="ファイル名" width="幅" height="高さ" alt="代替文字"> この「代替文字」の用途は、画像が表示されなかった場合に、画像の代わりとして表示させるものです。 しかし、Internet Explorerでは、画像が表示されている状態でも、マウスポインタを画像の上に載せると、ツールチップで代替文字が表示されます。
![画像にツールチップを表示させない方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
Firefox最強すぎワロタｗｗｗｗｗｗｗ : はれぞう