2017-01-01から1年間の記事一覧
フォーカス移動 タブを押下すると、フォーカスが移動します。 タグに"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…