HTMLだけでスマホのカメラにアクセスできるの知ってた？ 前面・背面カメラにアクセスできるHTMLのcapture属性
HTMLだけでスマホやタブレットのカメラにアクセスできる、HTMLのcapture属性を紹介します。 私はこの属性を知らなかったのですが、実際にiPhoneとiPadで試してみたところ、前面カメラにも背面カメラにもアクセスできました。JavaScriptなどは必要なく、簡単なHTMLでできます。 You Can Access A User’s Camera with Just HTML by Austin Gil (@heyAustinGil) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのcapture属性とは capture属性のサポート状況 終わりに はじめに 私は先日、今までに見たことがないHTMLの属性、captureに出会いました。capture属性は非常にクールなので、動画と記事を書くことにし
CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ
WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。 /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - デスクトップ（デフォルトのグリッド） 1024-768 - タブレット横長 768-480 - タブレット縦長 480-less - スマホ --------------------------------------------*/ @media all and (min-width: 1024px) and (max-width: 1280px) { } @media all
iPadのビューポートをパソコンと一緒にする方法 - by Takumi Hirashima
iPadのビューポートをパソコンと一緒にする方法を紹介します。 例えば、スマホとiPadでビューポートの指定を変えたい時に便利な方法です。 iPadの表示をパソコンと一緒にする方法 iPadの横持ちを判別する方法 タブレットの表示をパソコンと一緒にする方法 サイト閲覧時にiPadの表示をパソコンと一緒にする方法を紹介します。 userAgent の分岐を使って、iPadはビューポートの横幅を指定してパソコンの表示を再現します。 次のコードをページの head タグ内に追加してください。 <script> if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { docum
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4c7ac634fac67a537ad7d80cba26b2cc5d00bc0/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F12c38ee53f8c04a39cfdba97bf59af7b09cafc72%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fh%252Fhashimotoblog%252F20190528%252F20190528165147.png)
iPadにPC向けデザインを縮小表示するときにも！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 以前の記事で、iPhone SEなど幅320px表示端末での縮小表示に便利なViewport Extraを紹介しました。 Viewport Extra おかげさまで、CDNに対して1日約20,000回、公開以来約1,430,000回ものリクエストをいただいております！ たくさんのページでご利用いただいているようで嬉しいです。ありがとうございます！ (2021/2/19 3:00 追記) なんと、CDNへの総リクエスト数が 150,000,000回（1.5億回）を突破しました！ ありがとうございます！ このライブラリ、実はiPadなどタブレット端末での縮小表示にも使うことができます。 さっそくですが、実例とともに紹介していきましょう。 たとえばこんなとき レスポンシブデザイン タブレットでは、デスクトップ向けデザインを表示したい デスクト
ブラウザからデバイスに、OSまで！UA判定に便利なライブラリ「UAParser.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 UA判定処理って、自分で書くのは面倒ですよね。条件をそのたび調べたり、微妙に書き間違えて正しく動作しなかったり……。 今回は、そんなUA判定に便利なライブラリ、UAParser.jsについて取り上げたいと思います。 UAParser.jsの特徴 UAParser.jsは、下記のような特徴をそなえたjavascriptライブラリです。 導入方法が豊富 判定可能な要素が多い 簡単に使える まず、導入方法としてはCDNから取得、Node.jsでバンドルなど、さまざまな選択肢があります（今回の記事では一般的な2つの導入方法をご紹介していきます）。 そしてこのUAParser.jsは、ブラウザだけでなく、デバイス情報、OSまで、多くの要素を判定可能です。そう聞くとなんだか処理が面倒くさそう、と思ってしまいますが、使い方はとても簡単です。 参考UR
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
