jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
_notesフォルダを生成させない
Dreamweaverで制作していると普通はサイトの定義をしてコーディングを行うけど、PUTする時にあれっ？余計なフォルダが出来てる。 _notesというフォルダになにやらご丁寧に.mnoとかdwsync.xml（もしくは.xmlの別のもの）とかが生成されている。なんじゃこりゃ？そして手動で消すけど知らぬ間にまた出来てる。。 うがぁっ！ってなったら、こうしてしまおう。ってメモ。 大体この_notesの中のファイルは何なんだ？というと、Dreamweaverの設定ファイルが格納されてるフォルダ。 .mnoファイルについて Fireworksと連動する設定ファイル。Dreamweaverでコーディング中に画像をFireworksで開いて変更して保存、とか簡単に出来るものです。が、全然便利とは思えないので僕は使ったことがありません＾＾； サイトの定義>詳細設定>デザインノート の「デザインノート
jQuery.getJSON()で、JSON形式のデータを読み込みパースし表示
jQuery の jQuery . getJSON( url [, data] [, success( data, textStatus, jqXHR )] ) メソッドを使った Ajax リクエストで、JSON形式のデータを読み込み、パースし、表示する方法。 実装例（サンプル） 実装例（サンプル）の動作について 「toggle」ボタンをクリックすると、「jquery-sample-getJSON-json.js」ファイルを読み込み、パースし、黄色のボックス要素内に表示する。 読み込みが成功すると、「toggle」ボタンの右横に「読み込み成功」と表示する。 「toggle」ボタンを、再度クリックすると、元に戻す。 実装例（サンプル）のソースコード JavaScript <script> <!-- jQuery( function() { jQuery( '#jquery-sample-bu
jQueryでテーブルをラジオボタンでソート（プラグインなし）
jQueryでテーブルをラジオボタンでソート（プラグインなし） jQuery2010年12月25日 よくプラグインでテーブルをソートする機能が紹介されていますが、自分はあんまプラグインを追加するのが好きじゃないというのもあり、自作してみました。 ついでに自動でストライプ模様になるよう実装しています。 jQueryはこちらからダウンロード 実際のサンプル HTML <ul class="list-sort"> <li><label for="line-all"><input type="radio" id="line-all" class="item" value="あ行" name="select" />すべて</label></li> <li><label for="line-01"><input type="radio" id="line-01" class="item" value=
ネットは広大だわ
サイトやブログのカスタマイズ。インターネットを語るブログです。繊細なメイリオフォント。Win環境でも美しく見えて素敵。 企業サイト制作でもよく使っています。CSS font-styleの指定をメモしておきます。 CSS font-style指定 勝手にコーディングの師匠と心に決めているCSS Happy Lifeさんのテンプレートより。 【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 – CSS HappyLife [css] body { font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; text-sha
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
Optimize Your Web Design Workflow
I’m not sure about you, but I still favour using Photoshop to create my designs for the web. I agree that this application, even with its never-ending feature set, is not the perfect environment to design websites in. The ideal application doesn’t exist yet, however, so until it does it’s maybe not such a bad idea to investigate ways to optimize our workflow. Why use Photoshop? It will probably no
Photoshopの切り抜き、選択範囲いろいろ：で、結局どれがいいの？
Photoshop の切り抜き、選択範囲をつくるいくつかの方法をまとめてみました。記事では Photoshop CS5 を基準にしていますが、それ以外のバージョンの方は抽出フィルタなどで CS5 の機能を代替えできると思います。 Photoshop の切り抜き、みなさんどんな風にしてますか？今回紹介する切り抜きは、定番みたいなものだと思うんですけど、私の近くに Photoshop 達人がいないので聞く事もできず、もっといい方法無いのかなーなんて思ったりもしてます。この記事を読んでくれた人で、「こうした方がいいよー」とかあったらコメントいただけると嬉しいです！ また、私は今 Photoshop CS5 を使っているので、それを基準にしています。CS4 以前を使っている人は、選択範囲の調整の代わりに抽出プラグイン（フィルター → 抽出）で代替えしてみてくださいね（注意：Web 用の切り抜きを前
YUKI HARUYAMA Portfolio Site | 春山 有由希
春山 有由希 / ハルヤマ ユウキ UX / UI Design HTML / CSS Graphic Design Photography Designer & Front-end developer 福岡でプログラマとして就職後、Web制作会社に転職し、デザイナーになりました。 ECサイト、テレビ局や番組サイトのデザイン、執筆や講師業などで経験を積んだのち上京し、株式会社Fablicで フリマアプリ フリル（現ラクマ）のUI/UXデザインを担当。 その後、楽天株式会社でデザインチームマネージャを担当したのち、 フリーランスのデザイナーを経て、現在は株式会社スマートバンクでデザイナーをしています。 MORE PROFILE
Windows7でthumbs.dbファイルを作成しないようにする - 動画投稿Tips
Windows7ではXPやVistaSP1以降同様に、ファイルの縮小版を高速に表示するためthumbs.dbというファイルが作成される。 XPの場合はフォルダオプション内に縮小版をキャッシュしない設定が用意されていたが、Vista,7にはその設定がないのでここで設定方法を紹介する。 ※2011/10/18追記 この記事を書いてずいぶん経つが、Windows７のHomeEditionにはグループポリシーエディターが存在しないらしい。 というわけで以下の方法が使えるのはWindows7でもProfessional以上のものに限られる。 HomeEditionを使っている方は各所で紹介されているレジストリをいじる方法を使うしかない。(*1)
Web design and development articles and tutorials for advent
24 ways is the advent calendar for web geeks. For twenty-four days each December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer. Learn more Drew McLellan puts the chairs up on the tables, sweeps the floor, and closes off our season, and indeed the entire 24 ways project with a look back at what it’s meant to run this site as a site project,
効率的にサクサクスライス！Fireworks CS5スライス書き出しTips - EC studio デザインブログ
Fireworks CS5 でのスライス書き出しTipsをまとめてみました。 スライスするときによく使う、使えそうな小技をご紹介します。 スライスの作成 長方形スライスの作成 オブジェクトを選択した状態で、 右クリックから「長方形スライスを挿入」を選択すると、 選択した画像を覆うスライスオブジェクトを作成できます。 複数オブジェクトを選択した場合は選択したすべてのオブジェクトの 画像を覆うスライスオブジェクトを作成できます。 多角形スライスの作成 オブジェクトを選択した状態で、 右クリックから「多角形スライスを挿入」を選択すると、 オブジェクトのパスに沿って画像を覆うスライスオブジェクトを作成できます。 イメージマップを設定するときに便利な書き出し方です。 ※テキストオブジェクトのみの場合、オブジェクトを選択した状態で、 右クリックしても「長方形スライスを挿入」と「多角形スライスを挿入」
10 Kick Ass Presentation Techniques | Carsonified
Photo of Alex Hunter by http://www.alexdesigns.com/. Used with permission. I’ve been lucky enough to make public speaking part of my career. It’s something I love doing and enjoy every second of, but that’s not the case for everybody. For many of you, the thought of standing up on stage fills you with vomit-inducing fear. But I can’t stress enough how important it is to be able to clearly articula
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
Adobe - デベロッパーセンター : クロスクライアントHTMLメールの作成
HTMLメールは、Webデザイナーにとって特別な困難を引き起こします。Web標準になじんだ世代のデザイナーにとっては、特にそうです。 CSSベースのレイアウトで、外部スタイルシートを正しく使ってメールを送れば、当然うまくいくだろうと思うのが普通です。しかし、受け取った側がそのメールを開いてみると、作成者の意図とは似ても似つかない乱れたデザインが表示されることは珍しくありません。 ブラウザ戦争はかなり昔に決着が付き、淘汰によって生き残った少数のブラウザはおおむね互換性がありますが、電子メールクライアントの分野ではまだ混乱が続いています。それどころか、デザインに関する状況は近年むしろ悪化しています。MicrosoftがOutlook 2003をOutlook 2007に置き換えたときに、Microsoft Word HTMLレンダラが新たに採用されました。これは、従来のエンジンに比べてCSSへ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How To Create a Sweet CSS3 Vertical Navigation - SpyreStudios
Real Animation Using JavaScript, CSS3, and HTML5 Video
おきらくFLASH講座 第２４回：WEB Creators Bank【マイコミ派遣】
Dearps