こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome（WebKit）のWeb

以前ここで「jQueryでCSSプロパティの値を取得する方法」と題して jQueryでCSSプロパティの値を取得する方法を紹介しましたが、 「parseInt()」を使って同様にCSSプロパティ値を取得する方法も 結構必要になったりすることがあるので、メモ書きとして紹介してみます。 前回のサンプルと同じ内容でのサンプルで動作させてみると。。。 ＜div id=”box”＞とID名が付けられたボックス要素に CSSで幅「width」と高さ「height」を指定。 変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、 アラートで値を表示するサンプルの場合。 ◆HTML <div id="box"></div><!--/#box--> ◆CSS #box { width: 300px; height: 100px; } ◆SCRIPT <script type="text/ja

getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op

WEBデザイナーにとっては、ブラウザ毎にそれぞれ 見え方をチェックするのは当然なのでしょう。 私も色々なブラウザで見え方をチェックしているつもりなのですが、 今回紹介するサイトはブラウザに加えて、見る媒体まで指定できるという優れもの。 具体的にはiPhoneやiPadなどタブレットやスマートフォンなどのブラウザでの 見え方をチェックすることが可能です。サイトがPC専用に作られていたりすると スマートフォンなどで見えている人は小さすぎて苦痛に感じるかも知れません。 そこで一度見ておくのもアリ！かと思います。 http://quirktools.com/screenfly/ →タブレットやスマホの見え方を確認できるサイト。 こういったサービスはとてもありがたいですよね。 自分もブラウザたくさん入れて見え方をいつも確認しています。 IEチェック用には「Sleipnir」、あとは「Firefox」

レスポンシブWebデザインに限らず、Webサイト制作時にはブラウザでのチェックは必要です。 しかしレスポンシブWebデザインでの制作を進めるにあたり、サイトコンテンツの動作や配置のチェックなど通常のサイトチェック以上に柔軟かつ簡単にできればより便利になります。 以前の記事、「Web制作者必見！ブラウザの横幅を簡単に確認できるChrome拡張機能」ではブラウザの横幅サイズの確認ができる拡張機能をご紹介しましたが、今回はブラウザ上でより便利にチェックができるツールをご紹介します。

スマートフォンサイト 6-07 表示サイズ調整の要となるViewportの設定 スマートフォンやタブレットでは、画面サイズも解像度も2倍以上の開きがあり、これまでのPCのノウハウをそのまま使うことができない。ここでは、表示サイズ調整の要になるdpiスケーリングとViewportについて見てみよう。 解説／馬場孝夫（ビヨンド・パースペクティブ・ソリューションズ株式会社） BROWSER iOS…5over　Android…2.2over マルチデバイス対応に必須な画面サイズ調整 従来のPC 向けサイトでは、ディスプレイサイズや解像度に極端な差はなく、幅1024px・96dpiなど固定値をターゲットにして問題なかった。しかし、スマートフォンやタブレットが普及してきた現状では、固定値だけで対応はできなくなっている。その対応策として挙げられるのが、dpiスケーリングとViewportである。 dp

アプリケーションを実行しているスマホの画面サイズや向きを動的に取得できれば、それに応じて表示するコンテンツを調整できますよね。 画面サイズを取得する JavaScriptで画面サイズを取得するためのプロパティが用意されています。 ウィンドウサイズを取得できる関数 screen.width document.write(screen.width); 画面の幅を取得することが出来ます。 screen.height document.write(screen.height); 画面の高さを取得することが出来ます。 画面サイズとタスクバーを除いたスクリーンサイズを取得することが出来ます。 コンテンツ領域を取得できる関数 window.innerWidth document.write(window.innerWidth); ウィンドウ内側の横幅を、取得したい場合に使用。 ※ スクロールバー領域を含

【重要】「Window Resizer」のプログラム中に、キーボードの入力をトラッキングして送信するマルウェアらしきものが仕込まれていることが発覚しました。現在、「Window Resizer」はChromeウェブストアからダウンロードできなくなっています。（2014年2月10日現在） 参照：Chromeの拡張機能Window Resizerがマルウェアを含んでいたことが発覚 – GIGAZINE http://gigazine.net/news/20140114-window-resizer-malware/ こんにちは、岩上です。 ユーザの閲覧環境によって画面サイズは多種多様です。 サイト制作のディレクションをする上で、ファーストビュー（ページを開いてスクロールしなくても表示される範囲）は非常に重要になります。パッと見で印象的なデザインを伝えたい、LPとして要素をファーストビューに入れ

FitText ブラウザのウィンドウズサイズ、またはiPhoneなどデバイスの画面の大きさに合わせてテキストの大きさを自動で調整してくれるのがこのjQuery「FitText」です。 ウィンドウズサイズにあわせて、文字が大きくなったり小さくなったりします。 サイトのタイトル表示に使えそうな機能です。 サンプルはこちらからどうぞ →　ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」サンプル また、こちらのサイトではうまく「FitText」を使用されています。このように主にタイトルに使う機会が多そうですね。→　Trent Walton’s blog　(http://trentwalton.com) 「FitText」の使用方法は続きをどうぞ。 まずは、githubからZIPファイルを一式ダウンロードします。 以下のコードを</body>の直前に記入します。 <sc

jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読

上記の例も、sampleBox02の方が後に書かれているからsampleBox02が優先的に読み込まれてテキストの色は#666666になる…というわけではありません。今回の例の場合、sampleBox01がidセレクタによって指定されているため、classセレクタで指定されているsampleBox02よりも優先して読み込まれるようになっています。つまり、今回の例の場合だと、文字色は#999999になるわけです。 セレクタにはそれぞれ優先順位を決めるポイントが設定されており、そのポイントがより多いセレクタのスタイルが優先的に読み込まれるようになっています。その内訳は、 *（全称セレクタ） … 0ポイント p,h1など（タグセレクタ） … 1ポイント .sample（classセレクタ） … 10ポイント #sample（idセレクタ） … 100ポイント というようになっています。つまり、前

position:absolute;とbottom:0;でオブジェクトをどうしても固定配置したかったのに、ハマってなかなか上手くいかなかったので、その原因を覚書き。 親要素のCSSにoverflow: hidden;を追加する position:absolute;で上手く配置出来ない場合、親要素が上手く指定されていないことが大半の原因ということで、親要素の親要素のpositionをstaticに指定してみたり、新たに親要素を作ってみたり、色々試行錯誤するも上手くいかない。。top、left<->rightに指定すると狙った親要素内に収まっているはずなのだけど、bottomを指定すると画面から消える！！（ちなみに、どれも0指定。） 結局は、親要素のCSSにoverflow: hidden;を追加することで解決。 これは仕様上のことで、「親要素内に別の子要素がある場合で、その子要素がfloat

min-height:100%で、ウィンドウ高さいっぱいのレイアウトにする場合、親要素にheight:100%、 その子要素にmin-height:100%、というセットにする。 孫要素のmin-height:100%は効かない。 子要素にmin-height:100%とheight:100%の両方指定も無理。 IE6は、子要素でheight:100%を指定する。（*htmlで別指定など。）