iOS6でtransitionアニメーションが少し遅れて開始する問題 よくあるスワイプギャラリーを作成しているとiOS6でアニメーションが少し遅れて開始する問題にぶつかりました。 どういった感じかというとスワイプ終了時に以下のようにしてtransitionを利用して規定位置までアニメーションさせようとすると一拍あいてから動き出す。iOS5だとちゃんと動作します。 $("#carouselInner") .css("-webkit-transition","-webkit-transform 600ms ease") .css("-webkit-transform","translate3d("+x+"px,0,0)"); 色々調べていると以下のページに行き当たりました。 iOS6 html hardware acceleration changes and how to fix them

レスポンシブ・ウェブデザインではなく振り分けを行うメリット 最近、RWD（レスポンシブ・ウェブデザイン）というテクニックが話題になってますね。 レスポンシブ・ウェブデザインとは、ザックリと説明するとブラウザの解像度などに応じてCSSのMedia Queryなどで適用させるCSSを変更してレイアウトやビューを変更する方法です。 逆にPC用とスマホ用のサイトを作成して、User-Agentなどで切り替える方法を振り分けというようです。 個人的にはどちらも一長一短なので、サイトの目的やターゲット、予算などに応じてチョイスすればよいと思ってます。どちらの手法のほうが優れているかっていうのは目的によって変わると思っているので、ここで宗教戦争をする気はありません。 さて、本題ですが「レスポンシブ・ウェブデザイン」 vs 「振り分け」の議論で「振り分け」のメリットして語られないことが多いことで、スマート

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ  を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:

スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.７倍くらいの感じじゃないでしょうか？ 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって

スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re

ユーザビリティテストツール『Silverback』 先日、SwapSkills+Plus ×　WDE-expressで行われた「ユーザーテスト：ワークショップ」に参加してきました。 ユーザビリティテストツール『Silverback』を利用してのワークショップだったのですが、このSilverbackなかなか面白いソフトです。 基本的にはユーザーの操作を記録する画面キャプチャのソフトなのですが、MacのiShightを利用してユーザーの表情と音声も同時に記録します。 ユーザーにはつまずいている操作や悩んでいるところを発言してもらうことにより、後で見返した際に客観的にサイトの問題点を見返すことが出来ます。 ワークショップでは「モデレーター」「スクリプター」「被験者」に分かれて行われました。 モデレーターが進行係で、被験者に対してタスクの説明をし、被験者がつまづいているようだったら何につまづいてい

8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[

jQueryでアコーディオンを設定する際の注意 ネタ元：jQuery.js トピックのしつもんの89 アコーディオンを設定する際に動作がカクカクすることがあります。 サンプル この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。 高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。 $("dl dd").each(function(){ $(this).css("height",$(this).height()+"px"); }); サンプル アニメーションを設定する場合はheightを指定、これ重要です。 リキッドレイアウトの場合 リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。 その場合は以下のclickイベントの最初で高さを指定しておき

jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。

ブログに承認機能を付けるMTプラグイン「EasyWorkflow」 EasyWorkflowはブログに承認機能を付けるためのMTプラグインです。 製作者のにっくさんより、「PostToMail」を参考にしたとのご連絡いただいて、非常によさそうですので紹介します。 「ライター」や「ユーザー」などのブログ投稿者に対してブログの公開権限を与えず、「未公開（原稿）」もしくは「未公開（承認待ち）」の状態でエントリーを保存することが出来ます。 「未公開（承認待ち）」が選択された場合は、プラグインで設定した承認者のメールアドレスに承認確認のメールを送信します。 承認者は、承認権限のあるユーザー(「ウェブサイト管理者」、「ブログ管理者」、　「編集者」)でログインして公開を行うという、承認のワークフローを実現できます。 EasyWorkflowを利用すればPostToMailより厳格な承認フローが実現できま

FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追

「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想 先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介！」に行ってきました。 資料が公開されました。 ■出典元：CSS Reloaded ■著者；John Allsopp ■リンク：Web Directions East 以下、内容を復習もかねてまとめてみました。（サンプルやブラウザ対応などは私が補足したものです。） CSSの歴史 1996年ぐらいからありました。 2000年にCSSのサポートが良いMac IEが登場 2000-2005年はCSS3の開発がストップ 2000-2008年でブラウザが劇的にCSSに対応していく。(ブラウザ Reloaded) 各ブラウザはCSS3を試験的に実装 プリフィックスをプロパティの先頭につける事によってCSS3を実装することが可能。 Firef

[MT4LP5] MTの設置・運用に関するTIPS by 丹羽章 MT4LP5の最後のセッション、Online Digital Clock Works丹羽章さんのMTを運用するにあったっての、サーバー周りのインフラについてのセッション。 SQLiteは使わない! SQLiteはファイルとしてデータを扱うのでセキリュティ面で疑問符が残る。 業務で使う場合はパフォーマンス、セキュリティ、インターネット上の情報に優れたMySQLを利用しよう。 mt-check.cgiでチェック Movable Type対応だからといってすべのモジュールが入っているわけではない。 特にImage Magickが入っていないとMTを導入する意味は半減する。 お勧めのレンタルサーバー 管理が簡単に出来ること、想定するページビューをさばけること、ランニングコストがかさまないこと、過去の導入で再構築時にエラーなどが出てい

[MT4LP5]ユーザー指向の管理画面をつくる by 野田純生 MT4LP5でお目当てのセッションの、アルファサード有限会社の野田純生さんによるのMT管理画面のカスタマイズに関するセッション。 以前、大阪でお話を伺ったときにかなり、参考になったので今回もかなり期待していました。 参考：Web屋さんのためのMovable Type4 なぜ管理画面をカスタマイズするのか 「概要」にエントリーの表示順を制御する通し番号を入力させる。これはクライアントは「仕方ない」と思っても「納得」はしていない。 ウィジェットなど意味のわからない単語が並んでいる。 管理画面をカスタマイズすることにより クライアントが直感的にわかるようになり、質問が減る、マニュアルが少なくてすむ、引継ぎが楽になると、みんながうれしい。 プログラミングを使わないカスタマイズ 管理画面は /mt/tmpl/cms以下のtmplファイル

marginの相殺 CSSにおけるmarginプロパティはボックスに対して余白部分を生成するというシンプルなものなのですが、『marginの相殺』という特徴があります。 marginの相殺について解説をしてみます。 垂直方向のmargin相殺 垂直方向に隣接するボックスのmarginは相殺され、margin値が大きいブロックレベル要素のmargin値が採用されます。 図では、上のボックスの下マージン(100px)が下のボックスの上マージンより大きい為、相殺されmargin値が大きい100pxのマージンが両ボックスの間に設けられます。 ただし、どちらかのmarginがネガティブマージンつまり、-の値をもつマージン値の場合は相殺されません。 図では、上のボックスのマージンがマイナス、下のボックスのマージンがプラスと符号が異なる為、相殺されず-50px+80pxの30pxがそれぞれのボックスの間

非常に美しいcoverflowスライドギャラリー『ImageFlow』 ImageFlowはPHPとJavaScriptで作られている非常に美しいcoverflowスライドギャラリーです。 設置方法 配布サイトより関連ファイルをダウンロードし、サーバーにアップします。 スライドギャラリーを利用したいページのhead要素内で『screen.css』と『imageflow.js』を読み込みます。 <link rel="stylesheet" title="Standard" href="screen.css" type="text/css" media="screen" /> <script language="JavaScript" type="text/javascript" src="imageflow.js"></script> スライドを利用したい箇所に以下のHTMLコードを記述しま

本気にonclick 今onclickが熱いらしい。本気でJavaScriptを学びたい人は下記のサイトをご覧ください。 第1回：そろそろ本気で学びませんか？ 本気でやるならonclick属性は避けてライブラリを活用すべきCommentsAdd Star JavaScript のイベントハンドラCommentsAdd Star onclick 属性問題について 本気でやるならprototype.jsやjQueryやYUIは避けてonclickを使うべき 本気でやるならクロスプラットフォームは避けてMozillaアプリを作るべき onclickと本気とIE イベントハンドラを分離するUnobtrusive Scriptingという考え JavaScriptにはUnobtrusive Scriptingというスクリプティングの考えがあり、JavaScriptをソースコード上に記述するのは良くな

MTでopモディファイアを利用して複雑なレイアウトを行う MTのテンプレートでopモディファイアを利用して複雑なレイアウトを行う方法です。 例えば、エントリーの一覧画面で、商品画像掲載のページ構成CSSのようなエントリー3個づつをブロックレベル要素で包んで出力することなどが可能です。 基本的な使い方 まずは簡単なサンプルでopモディファイアの利用方法を説明します。 エントリーの変わりに数字を出力するテンプレートタグは以下のようになります。 <MTsetVar name="no" value="0"> <MTEntries> <MTSetVar name="no" value="1" op="+"> <mtgetvar name="no"> </MTEntries> 12345といった感じにエントリーの数だけ、数字をひたすら出力する記述です。 1行目でnoという変数に0を代入し、 <MTse

ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。