Recent Entries Reactでシンプルなwebサイトが作れそうなテンプレートを作った 2015/12/13 advent_calendar, react react-mixinのmixinファイルの中で 「_(アンダーライン)」をメソッド名の先頭に使ったらエラーはいた 2015/10/12 react, react-mixin webpack.configをCoffeeScriptで書く 2015/06/10 coffeescript, webpack CSSで印刷を禁止させる 2015/02/26 css, print Advent Calendar 2014 読むリスト 2014/12/15 advent_calendar all entries Tags adobe advent_calendar android asciiart audio audition book
Fixed positioned elements (typically headers or footers) are extremely common conventions for native mobile platforms, so naturally fixed elements found their way into mobile browsers. Web designers are used to fixing elements to the window using CSS’s position: fixed, however, in the land of mobile browsers, support for fixed positioning is far less universal and is way more quirky. I set up a de
こんにちは、鴨田です。 スマートフォンアプリを作成する際、 やはりタイトルバーやフッターメニューは欠かせないところです。 jQuery MobileやiUIなどのライブラリを使えば、大して苦労はしないのですが、 ライブラリを使いたくない場合もあると思います。 仮に独自で実装する場合は、上部と下部に固定する必要があり、 HTMLになじみのある人であれば、すぐに”position:fixed;”を使えばいいだろう、 と気づくと思います。 確かにそうなのですが、実は”position:fixed;”を使用するには、 ある程度の条件が存在します。 ■iOSの場合 iOS 5以降でしか対応していません。 ■Androidの場合 Android 2.2以降でしか対応していません。 また、viewportでuser-scalable=yesにしていると、 固定されず、”position
fixedなしバージョンはこちら。 http://jsrun.it/esperia/plhF ( http://jsdo.it/esperia/plhF ) ※jsrun.itの方か、Smart Phoneボタン押さないとちゃんとうごかないです Androidでuser-scalable=noの時、-webkit-transformを使って回転させる要素とは別の要素にposition: fixedをつけた場合、回転させたい要素にも影響する問題。 Android 2.2, 2.3で確認しました。position: fixedがあったら回転しません。なかったら意図した動作になります。 バグですかね… <!doctype html> <html> <head> <title></title> <meta name="viewport" content="user-scalable=no" />
iPhone、Androidなどのスマートフォンは、これまで position:fixed に対応していませんでした。 固定メニューの実装などに困っていたのですが、iOS 5で対応していました! iOS 5 iPhoneやiPad、iPod TouchのMobile Safariは、iOS 5から position:fixed に対応しました! 他にも、overflow:scroll などに対応しています。 via New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 Android 2.3 viewport で、content=”user-scalable=no” にすると対応できます。 Android 4.1
はじめまして、今回初登場のアシスタントデザイナーのまこっちゃんです。 今後ともよろしくお願いいたします。 最近はスマートフォンサイト制作全盛期ですよね。今後はスマートフォンでリッチなサイトが、現れるのではないかとわくわくしています。 今回は、スマートフォンサイト制作中に躓いた固定ヘッダーにつきまして、『固定ヘッダーのJavaScriptは何がベストか』を考えていきます。 Mobile Webkit では【position:fixed;】が効かない! 皆さんもPCサイトで一度は固定ヘッダーのサイトを制作された事があるかと思いますが、スマートフォンサイト制作で試された方もいらっしゃるのではないでしょうか。 PCサイトの固定ヘッダーで使用される【position:fixed;】がiPhone・iPadなどでは効かないという問題点に気をつけましょう。 iscroll まず、スマートフォン向けに使わ
Cloud9は、クラウド上で様々な操作ができます。無料でエディタ、デバッグ、バージョン管理etc、、、作ったらボタンひとつで公開までできてしまいます。有料にすれば、チーム開発環境、プライベート開発環境も構築できます。 Cloud9 IDEは、ソースコードで公開されています。せっかくですからこの高機能で美しいCloud9 IDEをローカル環境に構築してみましょう。 システム環境 Mac OS X Lion インストール手順 gitからダウンロードします。 $ git clone git://github.com/ajaxorg/cloud9.git Cloning into cloud9... remote: Counting objects: 30583, done. remote: Compressing objects: 100% (10271/10271), done. remote
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
スマートフォンとposition:fixedのバグ iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。 Androidではuser-scalable=noが必須 <meta name="viewport" content="user-scalable=no" /> Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動きません。iPhoneではuser-scalable=noの指定がなくてもposition:fixedが動きますがけっこう挙動が微妙なのでuser-scalable=noは指定しておいたほうが良いでしょう。 サンプル(user-scalable=noあり) サンプル(us
選択子を絞りこむ為に多段連動するドロップダウンリストのJavascript。 → サンプル ポイントは… optgroupでグルーピングしておくこと。 使い方 ライブラリ(ConnectedSelect.js)の読み込み <script type="text/javascript" src="ConnectedSelect.js"></script>連動するselectにidを付ける。 親にあたるoptionのvalueと 子にあたるoptgroupのlabelを対応させておく。 <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2"> <optgroup label="XXX"> <option value="x1">x
訪れたユーザーがページのどこをどう見て、どのように移動し、どのあたりで詰まるのか、そういった各種行動を把握するためにユーザーのデスクトップ自体をリアルタイムにリモートデスクトップっぽく見ることを可能にするというのがこの「SiteSupport」です。 SiteSupport - Remote Desktop for Web Apps http://sitesupport.com/ ブラウザのセッションを共有し、特別なソフトウェアをインストールする必要性は一切無し。JavaScriptのウィジェットをサイトに設置すればユーザーのデスクトップをリモートで見せてもらう仕組みを簡単に導入することが可能であり、APIが提供されているので自分の好きなようにカスタマイズすることも可能、全部のコネクションはSSL経由であるためセキュリティも万全です。 実際にどのような感じで動作するかというのは以下のムービ
株式会社サイゾー(Cyzo inc.) / Raffael Stüken / La Moulade - Creative St...他...全11件
この記事はMichael Woloszynowicz氏のブログWeb 2.0 Development And Business Lessonsの記事"You Don't Know JavaScript"を翻訳したものです。本人の許可を得て公開します。原文は2011年4月16日にポストされました。私自身のJavaScriptの学習が浅く、誤訳の指摘等はコメントを下さると助かります。 原文は以下のURLから。 http://www.w2lessons.com/2011/04/you-dont-know-javascript.html 去年ぐらいから、いらいらする現象が目に留まるようになった。プログラマが、少ししか触っていない技術でありながら、それで履歴書を脚色するパターンに何度も出会った。多くの言語で起こることではあるが、最も冒涜を受けている言語がJavaScriptだ。 あなたは自分が知らな
先に「WebStorm」について軽く言及 【コラム】イマドキのIDE事情 (94) 最強のJavaScript IDE「WebStorm」を試してみる | エンタープライズ | マイコミジャーナル 最強のJavaScript IDE 「WebStorm」を使ってみた | Web scratch 最強と称したのは自分じゃないのですが、「WebStorm」は最強らしいです。最強な割に、AptanaとかKomodo等と比べるとマイナー感が溢れているのですが、気のせいでしょうか。 WebStorm自身、いつの間にかJavaScript向けのIDEということになっていますが、実際はWebフロントエンド全般に適したIDEです。そのため、HTMLやCSSについても、優秀な機能を備えています。とはいえ、HTMLやCSSだけを取り扱う場合はIDEが縁遠い気もするので、実質JavaScriptでゴリゴリ開発す
久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。 何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。 C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く