拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする
iOSのSafariには、 フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという ありがた迷惑な独自仕様があります。 （ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…） 以前、この現象を回避する方法として viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが ピンチイン（アウト）での拡大縮小は許可したまま iPhone（iPad）でフォームにforcusしたときズームしないようにする方法もありました！ サンプル ※iPhoneでひらくと動作を確認できます 入力フォームのfont-sizeが関係していた iOS Safariの初期スタイルで、bodyの文字サイズが16pxになっているからでしょうか inputとtextareaの文字サイズが16px以上なら フォーカス時の自動拡
Close dropdowns by clicking outside of them with jQuery
Close dropdowns by clicking outside of them with jQueryWhen you use a click event to trigger a dropdown, the best option to close it is to allow people to 'click off' and close it. It's actually quite simple to do once you understand what's happening. Now that the web is focusing more on click events than hover, this presents a new set of challenges for front end designers. It’s relatively easy wi
指定の要素以外の場所をクリック（タップ）したら閉じるjQuery - crosawassant's blog
とても参考になったのでメモ。 キモは $.contains( container, contained )です。 $(document).click(function(event) { // (1) if (!$.contains($("#popup")[0], event.target)) { // (2) $("#popup").hide(); } }); [参考] ポップアップの外側をクリックしたら閉じるためのjQuery Tips | milestoner 引用元サイトにとてもわかりやすい解説がついていますので、なぜそうなるの？という方はぜひ元サイトで確認を。 私はiPadにも対応させたかったので、 $(document).click(function(event) { // (1) この部分を $(document).on('click touchend', function(e
「特になし」は英語で何というでしょうか - 英語 with Luke
こんにちは、イギリス生まれ・東京在住、英語教師で作家のLukeです。今週、僕が書いたオノマトペ（擬態語・語音後）についての本 が出版されました。是非チェックしてみて下さい！ 「特になし」という日本語は、書類などでよく見かけます。それなので、日本人は「特になし」を英訳することが多々あると思いますが、実は注意が必要です。僕は仕事上、「特になし」が「not in particular」や「nothing in particular」、「nothing much」のように英訳されているのを度々目にしますが、これらは間違っています。「not in particular」、「nothing much」、「not in particular」はくだけた英語なので、仕事の書類に書くべきではありません。これらのフレーズは「特になし」ではなく、「別に」のようなニュアンスになってしまいます。 Do you ha
Custom Elements - Web Components を構成する技術
この記事は webcomponents.org の記事とのクロスポストです。 HTML は言うまでもなく、ウェブページを構成する最も重要な要素です。しかし、提供される機能が低レベルなため、複雑なコンポーネントを作ろうとすると、途端に div だらけの分かりにくい構造になってしまいがちです。例えば、あなたが必要な機能を盛り込んだ独自のコンポーネントを作れるとしたらどうでしょう？例えばそのコンポーネントに、機能を的確に表すタグ名を付けられるとしたら？既存のタグを拡張して、新しい機能を追加できるとしたら？ Custom Elements は、それを可能にします。 Custom Elements とはなにか？ # Custom Elements は開発者が独自に HTML タグを定義し、サイト上で利用できるようにすることで、繰り返し利用されるコンポーネントを単純化し、再利用する手間を大幅に削減しま
SVGで円グラフを描くシンプルな方法 | KSK-soft.com
SVGで円グラフを描くシンプルな方法を思いついたのでシェアしておく。既に先人がいるかもしれないが、そんなに頑張ってチェックしてはいない。 例えばCSSのanimationと組み合わせればこんなグラフが描ける See the Pen SVG PIE Chart with CSS animation by keisuke Takahashi (@ksksoft) on CodePen. ポイントは以下の通り。 svgのcircleで扇形を描く circleのfillはなく、太いstrokeで「塗り」に見せかける 扇形の角度は破線の長さで調整する jsは不要。 以上の説明だけではよくわからない人の為に、以下に順を追って解説する。 1.SVGで円を書く インラインsvgの円はcircleタグで書けます。 <svg viewBox="0 0 200 200"> <circle cx="100" cy
web-animations-jsで策定中のAPIを先取りする - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はJavaScript Advent Calendar 2014の記事でもなければ、Frontrend Advent Calendar 2014の記事でもありません。 べ、べつに書こうと思ったらすでに埋まってたとかじゃないんだからねっ！ CSSアニメーションやSVGアニメーションなどを抽象的にタイムラインベースで扱うことのできる web-animations-js が便利なので使い方などを書いておきたいと思います。 公式サイト：https://www.polymer-project.org/platform/web-animat
CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS - morishitter blog
この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサー まずは用語の定義を確認する。CSSプリプロセッサー（またはメタ言語）とは、CSSとは異なる独自の構文で記述された文字列を入力とし、ブラウザが解釈可能なCSSコードを出力するもの。SassやLess、Stylus等がその実装に当たる。 次にCSSポストプロセッサーとは、CSSを入力とし、より効果的なCSSに変換し、最適化するもの。例えば、コードを圧縮したり、自動でベンダープリフィックスを付与したり、プロパティ宣言の順番を読みやすいように並び変えたりするもので、CSSWringやAutoprefixer、CSSCombがその実装。いわゆるオプ
家族写真の可聴化について - Qiita
このエントリーは家庭を支える技術 Advent Calendar 2014の2日目として書かれました。 家族写真は、就業時に家族のことを想起し奮闘する上で重要なツールです。しかしながら、一般的なオフィスにおいては自席以外でくつろいだ姿勢で設計やコーディングを行うことがよくあります。 そういった状況において、家族写真のような家族を可視化するツールを持ち歩くことはあまり現実的ではありませんが、作業に使うコンピューターに家族の声を利用して一定の情報を可聴化するようなツールを導入しておくことで、その機能を代替することができます。 本稿では家族写真を可聴化によって代替するために、私がここ1、2年の間にとっている手法を紹介します。 寝た方がいいということを教えてもらう もう寝ろよ というGoogle Chrome Extensionを実装しています。この拡張をインストールした上で、午前0時以降にブラウ
定期的に買う必要があるものをアラートする仕組みを作った #家庭を支える技術 - kei-s@ブログ苦手
このエントリは、家庭を支える技術 Advent Calendar 2014 の一日目です。 「家庭を支える技術 Advent Calendar」とは エンジニアの友人たちとおしゃべりしているうちに、各ご家庭の生活を豊かにするためにしている技術的な工夫や、これからやりたいアイデアが話題に上がることが多くありました。そんななか、誰が言い出したか『家庭を支える技術』というキーワード*1が出てきていました（もちろん元ネタは WEB+DB PRESS plusシリーズ の「〜を支える技術」です）。 仲間うちだけでも面白い話が出てくるので、いろんな家庭の話を聞いてみたいとおもい、せっかく12月なので「家庭を支える技術 Advent Calendar」として世に問うてみた次第です*2。 ありがたいことに公開から数日で全日程が埋まり、「家庭を支える技術」への関心の高まりを感じています。 定期的に買う必要が
CSS コンポーネント試案
pixivのCSSで使われるクラス名ルールを読んで、僕もここ最近 CSS のコンポーネント設計について似たようなことを考えていたので書いてみる。いまのところ試案で、実際のプロジェクトで実践したことはまだない。 ここでいう「コンポーネント」とは独立したスタイルのブロックの意味で、たとえばヘッダーのナビゲーションとか画像のスライダーとかブログ記事のボディとかを指す。このアプローチの狙いとしては前出の記事とほぼ同じで、これらコンポーネントの「ルート」を明確にし、コンポーネント名が衝突しないようにすること。また管理や共有を考え、特殊な命名規則や不自然なマークアップなどはなるべく避けたいというのもある。Sass などの CSS プリプロセッサーを使う前提だけど、なくてもある程度は使える。 まずマークアップでは、コンポーネントのルートとなる要素に、クラス名と同時に data-component という
Webアクセシビリティを当たり前にするために
当たり前にしては難しい Webアクセシビリティを考慮し実践することは「当たり前」だと思いますが、その当たり前を実践することが非常に敷居が高い印象があります。仕様や規格を理解して実装しなければならないところから、クライアントのコミュニケーションやワークフローといった仕組みの見直しまで、「当たり前」を実践するために超えなければならない山がたくさんあります。 私たちが「当たり前」という言葉を使うとき、「誰でも同じように考えること・自然にできること」というニュアンスを含めています。そのニュアンスのまま当たり前と思って Web アクセシビリティに取り組もうとしても、目の前にある多くの課題に頭を抱えてしまう人もいると思います。当たり前という言葉と、現実にしなければならないことのギャップが、Webアクセシビリティを難しくしているのかもしれません。 当たり前という言葉が難しさに拍車をかけていることがある
#6 ガワネイティブアプリをつくろう!! - KAYAC Engineers' Blog
ガワネイティブアプリをつくろう！ こんばんは。カヤックのAdvent Calendar6日目は、@fnobiがお送りします。 最近の業務ではいけてるSDKを作るため、Javaを書いたりC#を書いたりC++を書いたりしつつ、 Webを作るのも大好きなのでJavasciptをがりがりしたりしています。雑食エンジニアです。 さて今回のブログですが、専門的な話をしても、弊社のもっと専門的な人に踏み潰されそうな予感がするので、 こちらも雑食な話をしようと思います。 テーマはズバリ、 ガワネイティブアプリです！ ガワネイティブアプリとは ガワネイティブとは 「側ネイティブ, ガワだけネイティブ, ガワだけアプリ, ハイブリッドアプリ」： - IT用語辞典バイナリ ガワネイティブアプリとはつまり、 ガワ(外側)はスマホアプリとして書くけれど、コンテンツはほとんどWebViewっていうアプリのことです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.bluearrowslab.com/smartphone/topicks/190/
jQuery: Hide popup if click detected elsewhere
https://qiita.com/kenokabe/items/618692858044a89adbc0
家庭を支える技術 Advent Calendar 2014 - Adventar