aタグの中にdivやpタグ,aタグの中にaタグは可能か
【可能】aタグの中にdivやpタグを入れる 結論から言うとaタグの中にdivタグを入れることは可能です。 divタグどころかpタグやh1～h6タグもaタグの中にいれることができます。 これは無理やりなのではなく、html5から可能になった正式なものです。 これによりクリック範囲を大きくすることができます。 aタグの中にdivを入れる例 aタグにdivやhタグ、pタグを入れる例を作ってみました。 aタグをカードのようにして、その中に画像やタイトル、説明を入れるという作りはよくあるものです。 写真タイトル 写真の説明写真の説明写真の説明写真の説明写真の説明 <style> a.cardsample{ display: block; width: 200px; border: 1px solid #333; padding: 10px; border-radius: 10px; backgrou
【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。（コピペで動くサンプルコード付き） - KAYAC engineers' blog
お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま
日本版Hulu、Microsoftも使用中止を勧告しているSilverlightを新たに導入 | スラド YRO
日本独自のシステムを導入した結果HDCPが必須になり騒動となった動画配信サービス「Hulu」日本版だが、Internet Explorerでの視聴向けにはSilverlightプラグインを使用しているようだ（Huluのヘルプセンターページ）。SilverlightはMicrosoftが開発したWebブラウザ向けプラグイン技術だが、最近の多くのWebブラウザではサポートされておらず、2015年にはMicrosoftが使用中止を推奨する事態になっている。 また、リニューアルによってHDCPが必須になるという話だったが、IE＋SilverlightならHDCPに対応していないディスプレイでも視聴でき、画面キャプチャも行えるという話も出ている（「かやのみ日記帳」ブログ、「T.Ishiiのソフト開発記」ブログ、「S-Pegasus」ブログ）。
第68回 HTML5とか勉強会「Webパフォーマンス」
「Webパフォーマンス」特集です！Webパフォーマンスにおけるサマリーや関連仕様、最新のテクニックなどを幅広く紹介します！https://html5j.connpass.com/event/50524/
WebmentionがW3C勧告に | フロントエンドBlog | ミツエーリンクス
2017年1月12日、WebmentionがW3C勧告になりました。 WebmentionはTrackbackに類似したプロトコルのひとつで、サイト上での言及を任意のURLに通知する方法です。 通知の受信側からみれば、他サイトにおいて言及された際、その通知を受信する方法の1つです。 Webmention仕様は、Pingback仕様の簡略版として策定が始まりました。 今ではPingbackのモダンなアップデート版であると言及されています。 WebmentionはHTTPとx-www-form-urlencoded（パーセントエンコーディング）を用いた、HTMLにおけるformの形式で送信されます。 これが、XML-RPCを用いているPingbackとの大きな違いであり、簡略化されているといわれるゆえんです。 すでにWordPressのプラグインが存在している（GitHub）など、各方面での実
フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
Here | The University of Sydney 360º tour
Flip your phone back at any time to learn more about your surroundings. Click and drag to look around in 360° Pause at any time to learn more about your surroundings. Play
Service Workers: Dynamic Responsive Images using WebP Images
Service Workers: Dynamic Responsive Images using WebP Images 02 Nov 2015 Images play an important role on the web today. Imagine a world without images on our web pages! High quality images can really make a website stand out, but unfortunately they come with a price to pay. Due to their large file sizes, they are bulky to download and result in slow page load times. If I'm a user with a low bandw
これからのモバイルWebと最新動向
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
JavaScriptプログラミング講座【Blob URL Scheme について】
ArrayBuffer は物理メモリが確保できなければ問答無用で失敗しますが、Blob は柔軟に動作します。ブラウザによっては、ローカルストレージを駆使してでも超巨大なバイナリの取り扱いを試みます。
Fullscreen API と 闇 - Browser
Fullscreen API は動画再生やゲームなど全画面にし没入させたい時などに使います。 iOS Safari と Opera Mini, Android Browser 以外のモダンブラウザで動作するようです。 Can I use... Support tables for HTML5, CSS3, etc サンプル 下のボタンを押してみたください。 フルスクリーン対象は真ん中の DIV タグ部分となっています。 Fullscreen API 使い方 document."プレフィックス"FullscreenEnabled で Fullscreen API が使えるかどうかを調べて、 document."プレフィックス"RequestFullscreen() でフルスクリーン表示を開始します。 今回使っていませんが、"プレフィックス"ExitFullscreen() でフルスクリーン表
Cut and copy commands | Blog | Chrome for Developers
IE10 and above added support for the 'cut' and 'copy' commands through the Document.execCommand() method. As of Chrome version 43, these commands are also supported in Chrome. Any text selected in the browser when one of these commands is executed will be cut or copied to the user's clipboard. This lets you offer the user a simple way to select a portion of text and copy it to the clipboard. This
Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita
Chrome 43およびそれ以降のバージョンにおいて、DOMの属性（値）がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日本語訳をしてみました。心当たりがある方は、ぜひ以下の内容を読んでいただいて、コードの修正などに取り込んでいただければと思います。 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性は今後プロトタイプチェーンに Chromeチームは、最近「DOM属性をプロトタイプチェーンに移動しています」とアナウンスしてい
ブラウザのみで音声認識とテキスト読み上げを実現する Web Speech API | CYOKODOG
HTML5 の Web Speech API をご存知でしょうか？ ブラウザベースで音声認識とテキストの読み上げを実現する API です。 今回はこの Web Speech API について試したことをまとめてみました。 ちなみに少し前の Chrome では Speech Input API という INPUT 要素に x-webkit-speech という属性を記述するのみで、手軽に音声認識を実現できるという機能がありましたが現バージョンでは廃止されてるようです・・・ Web Speech API の対応ブラウザは Can I Use よりご確認ください。 テキストの読み上げを行う Speech Synthesis API Speech Synthesis API を使用すると、指定したテキストを PC に読み上げさせることできます。 使い方は非常に簡単で、new SpeechSynth
60fps on the mobile web — Flipboard Engineering
Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we’re coming full circle and bringing Flipboard to the web. Much of what we do at Flipboard has value independent of what device it’s consumed on: curating the bes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Authentication (WebAuthn) Credential and Login Demo
jsdo.it
Ionic Framework - The Cross-Platform App Development Leader
キャンバスを使用した動画の操作 - Web API | MDN