フレームワークを調べるようになって、よくでてくるﾜｰﾄﾞを調べてみました。 * node.js →当初javascriptはあくまでブラウザで表示するために生まれたものでした。しかし、「Javascript 最高！ブラウザで使うだけではもったいない！汎用言語にしよう！」という…

画面拡縮にGrid Systemが使えないかを考えました。 やりたいことは、画面のサイズにあわせて、ボタンといった中身の要素を拡縮します。 Grid Systemのは、 画面を12や24といった分割をあらかじめさせておくことで、 class="col span_4"・class="col span_8"…

ViewPortとは Viewportとは表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。 PCで作成したサイトを、スマートフォンで表示すると、全体が小さく縮小され、ピンチアップしないと見づらい状況…

前回の記事の通り、Window8のようにタッチイベント・マウスイベントの両方がそなわっているデバイスで、処理を共通化する方法です。 Windows8のChromeやFirefoxはタッチイベントをサポートしており、画面をタッチして操作した場合はタッチ系のイベントが、マ…

スマートデバイス系のタッチイベントと、PC操作時のマウスイベント、どのように処理を共通化すればいいかを調べてみました。 See the Pen wraVLN by satsuki mori (@satsuki) on CodePen. 共通化のポイントは、supportTouchで判別できるとのことです。 var s…

Windowの内周・外周を取得する方法です。 Windowのプロパティで以下で取得できます。 innerHeight //ウィンドウ内周(コンテンツ表示領域)の高さ innerWidth //ウィンドウ内周(コンテンツ表示領域)の横幅 outerHeight //ウィンドウ外周の高さ outerHeight //…

モダンブラウザ間は、DOMオブジェクトに関する実装の違いはありません。 しかし、「eventオブジェクト」と「windowオブジェクト」には実装の違いが存在します。 ブラウザは以下3つのグループにわかれます。 ①IE ②Mozilla系→Netscape Navigator,Firefox ③Oper…

DOMへのアクセス方法は大きくわけて2つあります。 ①document.getElementById ②document.all ②のケースは知りませんでした。 実際に実行させてみると、 See the Pen aLojJv by satsuki mori (@satsuki) on CodePen. ①＋②どちらも表示 IE7～IE10 ①のみ表示 IE …

クロスブラウザの対応方法 ①古いブラウザにあわせてかく ②ブラウザ毎にページをわける ③ライブラリを用意し、ライブラリ内で差分を吸収する それぞれデメリット・メリットがある。 ① メリット ・メンテナンスが楽 デメリット ・地味 ・新しい機能がつかえな…

ブラウザの動作の違い ブラウザ毎に動作がことなるのは、ブラウザに組み込まれているJavascriptエンジンの違いによります。 InternetExplorer: Chakra Chrome: V8 Firefox: SpiderMonkey 各エンジンに使える関数やプロパティに差分があるため、この差分を埋…

ソースコードを表示させるブログの記述方法について、以下のサイトを参考に調べてみました。 参考サイト： www.weblog-life.net (1)↓編集モードをMarkDown↓で記述 <script> alert('Hello World!'); </script> (2)Gistのコードを埋め込む方法 サンプルコード 「http://jsbin.co…