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属性は非常にクールなので、動画と記事を書くことにし
スマホ・タブレットのviewport設定メモ | SHINGO IRIE
一般的なスマホサイトをつくろうとすると <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> の設定を使うことが多い。デバイスいっぱいに表示させ、拡大縮小をさせない。 横向きへの対応しかし、このままだとスマホを横向きにすると文字が余計に拡大されてみづらい。 そこで、以下のCSSをbodyに設定。 -webkit-text-size-adjust: 100%; これがデフォルトではautoになっているため、文字が大きくなるのだが、ここを100%にすると自動調整を解除できる。 横向きへの対応さらに、Androidではこれだけでは足りないことがある。device-widthでデバイスの幅に合わせてコンテンツ
スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法
去年地元のイベントのホームページを作ったのですが、Google Analyticsで調べてみると、スマホからのアクセスが全体の3/4もありました。 スマホでも問題なく見れたのですが、小さくて見にくいので、スマホで見た場合に1カラムになるなど若干スマホに対応しました。 その際にリンクであることを表す矢印をCSSだけで作りました。スマホはマウスを乗せるという行為がないので、リンクであるということがすぐに分かるようにするのは大切ですね。 Webフォントでもいいのですが、矢印１つのためにWebフォントを読み込むのはパフォーマンス的にどうなのかと思うのでCSSにしました。 他のサイトでもよく紹介されていますが、とても便利なので解説します。 サンプルを用意していますのでご覧ください。 では解説していきます。 HTML まず、HTMLです。 <ul id="menu01"> <li><a href="#
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
