問題 "ul""li"のリストにスクロールバーをつけ、上下Keyでリスト項目の移動をしようとしたが、bodyスクロールバーが動いてしまう問題の調査。 原因 "body"全体でKey検知を行っていたため。はじめ、上下Keyのスクロールバーが動いてしまうのは、ブラウザのデ…

DOMアクセス(getElementsByTagName())であらためてタグでDOMアクセスするサンプルをくみました。 getElementById()とにたような使い方だろうと思っていましたが、ちがいました。 とれるのは、HTMLCollectionオブジェクトのため、リストでとれます。 そのリス…

フォーカス移動 タブを押下すると、フォーカスが移動します。 タグに"tabindex"をいれることで、フォーカス移動順を制御することができます。 通常フォーカス対象とならないdivタグにも、tabKey押下でフォーカスをあてることが可能になります。 また、別にdi…

正規表現は複雑になると、？になります。 便利サイトないかな～と探してみました。 Regexper https://jex.im/regulex/ →図で結果が出力されるため、わかりやすいです。 Regex Test Drive | 正規表現オンラインテストサイト →自分で作成した正規表現のチェッ…

ｽﾌﾟﾗｲﾄ画像は拡縮すると、ぼやける問題がある。 また、拡縮するためのCSS指定がめんどくさい。 そこで、SVG画像をｽﾌﾟﾗｲﾄ化する方法がありました。 参考サイト design.dena.com SVG画像は、拡縮も楽で、ベクター画像なのでぼやけることもありません。ただし、…

node.jsのインストール 以下のサイトを参考に、簡単にできました。 参考サイト Node.js / npmをインストールする（for Windows） - Qiita polymer環境の構築 現在、構築中 node.jsのインストール いまさら聞けない Polymer 入門 - Polyfills は Web Componen…

フレームワークを調べるようになって、よくでてくるﾜｰﾄﾞを調べてみました。 * 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…