【決定版】HTML5のmetaタグなど 総まとめ description、keywordsからtitleまで
【決定版】HTML5のmetaタグなど 総まとめ description、keywordsからtitleまで ウェブサイト（ホームページ）をつくるときに、<head> ～ </head>内に必ず書くのがmetaタグです。 <title>や、<style>、<script>は言わずもがなですが、metaタグに関しては ◆『おまじない』のように書いている ◆よくわからないから、コピペしている なんてことありませんか？ もし、そういう人がいたら、この記事を見てマスターしてください。 普段あまり使わないマニアック（？）なものまで紹介しています。 metaタグとは？ 紹介へ移る前に、まず基本的なことを押さえましょう。 『metaタグとは何か』ということです。 metaタグとはhtmlページの<head>～</head>内に記述される、ページの各種付加情報を定義するタグのことを言います。 公開されてい
HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)-
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、EveryWhere開発部の久下孝順、高橋淳史と申します。 先日リリースされました、iPad用Webアプリ「えほんのじかん」（iPad版）の紹介をさせていただきます。 このサービスの内容はごく単純で、たくさん並んだサムネイルから気に入ったものを選択すると、アニメーションと朗読によって構成された絵本風の動画が流れる、というものです。 もともとこの「えほんのじかん」の元祖は、「テレビ版」でした。 インターネット対応テレビ向けに提供しているテレビ版Yahoo! JAPANやYahoo! JAPAN for AQUOSなどからみることができます。 iPad版より作品収録数は多く、30作品以上を掲載しています。 テレビ
[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要
![[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4edf0eaf5e8f4c77408f10ba236c93f8031449d/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F03%2Fhtml5-right-figure-01-150x150.png)
JavaScriptでデスクトップ通知（HTML5 Notification） - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Desktop Notification</title> </head> <body> <script> // Notification対応しているかどうか if (window.Notification) { alert('Notificationは有効です'); // Permissionの確認 if (Notification.permission === 'granted') { // 許可されている場合はNotificationで通知 alert('通知許可されています'); var n = new Notification("Hello World"); } else if (Notification.permission === 'denied') { al
gestureイベントでrotate（回転）・scale（拡大縮小）
CSSのtransformで特定要素を簡単にrotate（回転）したりscale（拡大／縮小）する事が出来るようになりましたが、 ユーザーの操作に応じて動的に値を変化させるには座標を取得・計算する必要があると思っていました。 ところがgestureイベント（gesturestart、gesturechange、gestureend）を使えば、gesture（2本指）で操作した際に、 scaleの倍率とrotateの角度が取得可能で、JSでガリガリ座標計算する事なく動的に変化させることが出来ます。 gestureイベントの種類 2013年6月現在、下記イベントが実装されています。 Androidは対応していませんのでiOSのみが対象の場合か、Android対応が必要な場合は自前実装する必要があります。 gesturestart（指が2本以上触れた時に発火） gesturechange（2本以
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
Ugoira Tech Talks: ugoku player
ugoira HTML5 zip player @marcan42 What format? GIFs are old, limited to 256 colors Nobody supports APNG Nobody supports MNG Nobody agrees on a codec for <video> (and this isn't pikupikudouga) Nobody wants to use Flash Then what? HTML5 to the rescue Custom animation format Use <canvas> to draw frames on the screen Supported by all modern browsers But how do we package up the frames? ZIP bundles JPE
JavaScriptでバイナリファイルを扱う方法 - Tech-Sketch
HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。 各ブラウザ毎に対応状況は異なりますが、これらの機能を有効活用するためAjaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。 はじめに HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。 ということで、各ブラウザ毎に対応状況は異なりますが、Ajaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。サンプルは音声ファイルの受信、再生をCoffee Scriptで書いたものですが、バイナリファイルを取得した後の処理
HTML5 conferenceのオフラインアプリケーションの話がすごく良かったのでまとめ - んずろぐ
HTML5 conference 2013に参加してきました。 賑わいのある、大変楽しいイベントでした。 講演も、どれもこれも勉強になるものでしたが、 中でも @kyo_ago さんの オフラインWebアプリケーションの「選択肢」 という講演がすごく良かったのでまとめます。 プレゼン資料・動画は、下記で公開されていますので、合わせてご覧ください。 動画 (1:07:00 あたりから): ルーム5B - HTML5 カンファレンス 2013 - YouTube 資料: http://0-9.sakura.ne.jp/pub/html5conf201311/start.html まとめ スマホユーザーはオンラインとオフラインを意識するのが難しいので、 アプリケーション側でユーザーの状態を判断して、適切に処理してあげる事が大切 ■変化するオンライン/オフライン事情 PCのユーザー オンライン/オ
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
『canvas』要素の勉強をする時の参考サイトまとめました | HTML5でサイトをつくろう
HTML5の『canvas』要素 今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。 まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に多いのですがちゃんとしたサイトでの事例はまだまだ少ないのが現状だということも知ることができました。まずは焦らず基礎から勉強していこうと思います。 『canvas』要素のサンプルまとめ 今回調べた『canvas』要素を使ったコンテンツをいくつかピックアップしましたのでご紹介します。 HTML5 Canvas and Audio Experiment 音楽に合わせて複数のオブジェクトが円になったり、マ
ASCII.jp：HTML5のCanvasで作る、Flash不要のお絵かきツール｜古籏一浩のJavaScriptラボ
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
HTML5でこんなに変わったinput要素を徹底解説 (1/5)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 前回は、一般的なWebサイト制作で比較的使用頻度が高い要素や、ルビ関連の要素を紹介しました。第7回は、HTML5で追加されたフォーム関連の要素と属性をまとめてチェックします。これらの中には、スマートフォンサイト用のブラウザーなどですでに実用できるものも含まれています。 各要素の解説では、冒頭に「カテゴリー」と「コンテン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GoogleがHTML5構文解析ライブラリGumboをオープンソース化
How to draw a stroke with pressure sensitive on canvas with html5/javascript?
大規模 JavaScript その設計と実装と現実
https://sites.google.com/site/gorogoronyan/Home/html5-iroiro/html5-canvas