今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
メディアの種類と形式のガイド: 画像、音声、動画コンテンツ - ウェブメディア技術 | MDN
ほぼ最初の頃から、ウェブは何らかの形で視覚メディアのプレゼンテーションに対応してきました。当初、これらの機能は制限されていましたが、さまざまなブラウザーがウェブ上の静止画や動画の画像を含むことに関する問題に対して独自の解決策を見つけたため、有機的に拡張されました。現代のウェブは、メディアのプレゼンテーションや操作をサポートする強力な機能を備えており、さまざまな種類のコンテンツに対応するいくつかのメディア関連 API を備えています。一般的に、ブラウザーが対応するメディア形式は、ブラウザーの作成者に委ねられており、ウェブ開発者の作業を複雑にしています。 このガイドでは、ウェブ上で使用されるメディアを構成する可能性のあるメディアファイルの種類、コーデック、アルゴリズムの概要を説明します。また、これらの様々な組み合わせに対するブラウザーの対応情報や、ファイル形式の優先順位の提案、特定の種類のコン
[HTML5] WebSocketを使ってスライドショーをつくってみる | DevelopersIO
はじめに つい先日まではリアルタイム通信といえばAjaxポーリングやCometを使用していました。 しかし、最近はノータイムでWebSocket使用を決定することが多くなっています。 Googleトレンドを見てもわかるように、WebSocketは数年前から日を追うごとに注目されてきおり、 今ではリアルタイム通信を実現するためのスタンダードな技術となっているといっても過言ではありません。 いままでWebSocket採用の障壁だったIE対応についても、去年から今年にかけてHTML5に対応し、WebsSocketも動くようになりました。 本記事ではWebSocketやそれに関連する技術の簡単な解説、Websocketを使用したサービスについて紹介し、 WebSocketを使った簡単なデモの説明を行います。 WebSocketとそれに関連する概要 まずはWebSocketおよびそれに関する技術につ
![[HTML5] WebSocketを使ってスライドショーをつくってみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/a18d742778bb675192c3331b71122e80fc5dc1fa/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Fhtml5.png)
Ajaxと組み合わせて便利なHistory APIを使おう - PR TIMESデザイナー&エンジニアブログ BREAK TIMES
こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にアクセスしたり、ブラウザのBACKボタンで前に戻ったりできないので不便です。そんな時に使えるのが、Hisotry API。これはブラウザの履歴をJavascriptから管理、操作できる便利なAPIです。 まず以下の4つは以前からあり、古いブラウザでも動作します。 history.back();//表示した履歴の1つ前のページにもどる history.go(4);//表示した履歴の4つ前のページにもどる history.go(2);//表示した履歴の2つ先のページに進む history.forward();//表示
スマートフォンとposition:fixedのバグ
スマートフォンとposition:fixedのバグ iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。 Androidではuser-scalable=noが必須 <meta name="viewport" content="user-scalable=no" /> Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動きません。iPhoneではuser-scalable=noの指定がなくてもposition:fixedが動きますがけっこう挙動が微妙なのでuser-scalable=noは指定しておいたほうが良いでしょう。 サンプル（user-scalable=noあり） サンプル（us
HTML5で生じる脆弱性と対策は？ JPCERT/CCが報告書公開
HTML5で生じる脆弱性と対策は？ JPCERT/CCが報告書公開：HTML5を利用した安全なWebアプリ開発のために JPCERTコーディネーションセンターは、HTML5およびその周辺技術の利用によって生じ得る脆弱性とその対策、HTML5で追加されたセキュリティ機能などについてまとめた調査報告書を公開した。 JPCERTコーディネーションセンター（JPCERT/CC）は2013年10月30日、HTML5およびその周辺技術の利用によって生じ得る脆弱性とその対策、HTML5で追加されたセキュリティ機能などについてまとめた「HTML5を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」を公開した。調査作業の一部は、ネットエージェントが委託を受けて実施した。報告書は、JPCERT/CCのWebサイトから無償でダウンロード可能だ。 次世代のHTMLとして注目を集めるHTML5は、
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
iOS7におけるMobile Safariの主な変更点
iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0）だそうです… UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに Webブラウジングをしている
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
iPad上でのvideoタグの挙動 | コノルブログ
iPadやiPhoneではHTML5の採用によって<video>タグで動画が設置出来るようになりました。 FLASHや各種プラグインが表示出来ないため、その代替の一つに当たる機能です。 今回はその中の一つ、<video>タグについて書きたいと思います。 【注意！】 この記事を書いている現時点（iOS4.2.1）の記事のため バージョンが上がった場合は、この限りではありません。 — 現時点で再生可能なiPadの形式はmp4、H.264形式となっています。 なのでHTMLで表示するためには <video src="ビデオのパス" controls></video> と記述をすれば、表示可能になります。 controls属性を付ける事でプレイヤーとして動作させる事が可能になります。 映像：ＮＨＫクリエイティブ・ライブラリー iPad上で単純に表示させる場合は、上記で十分問題ないのですが 見ている
Androidでvideoタグによる動画再生を実装する際の落とし穴 - 玄鵬の地下室
HTML5ではvideoタグにより、動画を簡単に埋込める。スマートフォンサイトで動画を埋込む方法は検索すれば、役に立つ情報を掲載しているサイトがいくつも出てくるので、詳しいことはそれらを参照してもらうとして、結論から言うと以下のタグでiPhoneおよびAndroidに対応できるようだ。 参考ページ http://sogitani.baigie.me/2011/07/smart-phone-movie/ http://today-only.net/html5-video/ （この２ページがとくに分かりやすくまとまっている） <video src=”xxxxx.mp4″ preload=”none” poster=”xxxxx.jpg” onclick=”this.play();” controls > <source src=”xxxxx.mp4″$gt; </video> iOSだと比較的
HTML5のAudioタグとイベント処理 - pekeqのブログ
HTML5のAudioタグを使ったサイトを作っていて、ブラウザごとにイベントの挙動が違うことに気づいたのでまとめました。 結論から先に書くと、audioタグで同じファイルを何度も再生させる場合、play,playingイベントに頼ってはいけないということがわかりました。 やったこと 以下の単純なスクリプトを各環境で動かして、それぞれどのイベントが発生するかを調べました。 スクリプトの動きは、以下の一連の動きの中で、Audio関連のイベントを拾って画面に表示しているというものです。 ロード後に、オーディオファイルを自動再生 再生が終わったら、PLAYを押して同じファイルを再度再生 <!DOCTYPE html> <html><head> <meta charset="UTF-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jqu
2maru.com
2maru.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5におけるinput要素のpattern、type属性のおさらい - Qiita
web.dev
http://blog.techboon.info/archives/429
W3C Developer Meetup - Tokyo のアーカイブ情報
大規模 JavaScript その設計と実装と現実
