[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 datalist要素とは HTML5で新しく加わったdatalist要素は、list属性で紐付けられたinput要素にユーザーが入力する際に、datalist要素内に置かれたoption要素の値をその入力候補として表示させる為の要素です。 datalistタグ内に入力候補としたいワードをvalue属性に持つoptionタグを複数記述します。 <form method="get" action=""> <input type="text" list="tools"> <datalist id="tools"> <option value="手裏剣"> <option value="まきびし"> <option value="煙玉"> </datalist> <input type="s
![[HTML5]datalist要素の基本的な使い方・応用(WordPressで全タグを検索の入力候補にしたりする)](https://cdn-ak-scissors.b.st-hatena.com/image/square/778ae00a3dda92b39324406dab3406d3736f6df8/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F04%2Fhtml5-tag-datalist-01-150x150.png)
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
Fullscreen API を簡単に試してみた
Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。 例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、
HTML5とjQueryでRotate｜スクロールに応じて画像を回転させる方法 – How to rotate the image by scroll | Stronghold Archive
HTML5とjQueryでRotate｜スクロールに応じて画像を回転させる方法 – How to rotate the image by scroll どうもこんにちは！今日は【HTML&jQueryでRotate スクロールに応じて画像を回転させる方法】について書きたいと思います。このところscroll連動系のサイトが多くなったのでちょっと作ってみました。個人的に直線的なパララックスサイトを作っといてなんですが回転の方が楽しいです。特定の位置で回転開始等も簡単にできていいですね。（追記：jQueryのみで画像回転を実装する方法も記事にしました。） Rotate v1 – DEMO スクロールのタイミングでキャンバスに画像に回転を付けていくバージョンです。増加のみ。fillStyle,fillRect,clearRectで残像の調整も可能です。 HTML – 共通 <div id="scr
<meter> polyfill (jQuery プラグイン) - JavaScript ライブラリー - HTML5.JP
使い方 JavaScript/CSS <script src="jquery.min.js"></script> <script src="jquery.html5jpMeterPolyfill.js"></script> <script> $(document).ready(function() { $('meter').html5jpMeterPolyfill(); }); </script> <style> meter { display: inline-block; width: 5em; height: 1em; vertical-align: -0.2em; } </style> HTML <meter value="20" min="0" low="30" high="70" max="100" optimum="100"></meter> <meter value="50"
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
ブラウザゲームを作るならHTML5対応フレームワーク『Impact』で | iPhone | iPad iPhone Wire
このiOSアプリ＊サービスに学ぶ! ブラウザゲームを作るならHTML5対応フレームワーク『Impact』で 中津川篤司 2011/01/18 『このiOSアプリ＊サービスに学ぶ!』は、オープンソース情報ブログ「MOONGIFT」管理人の視点から捉えたiOSアプリや周辺サービスから、ユニークなもの、興味深いものをピックアップし、そのポイントを解説していきます。iOS(iPhone/ iPad/ iPod touch)デバイスの利用者、その環境向けのアプリやサービスを開発している方はぜひお読みください! iPod touchの登場以来、iOSデバイスは大きな画面、位置情報、マルチタッチ、加速度センサーといった先進的技術が盛り込まれ、これらを活用したゲームアプリがとても人気を集めている。通常、ゲームアプリはネイティブなObjective-Cを駆使して開発されているが、今回はHTML5を使って開発
HTML5 Cheat Sheets
With new additions or changes to HTML5 happening quite frequently, it can become hard to remember all the new various features. These nice up-to-date cheat sheets, created for WDL by InMotion Hosting, can help web designers and developers keep track of it all. The cheat sheets are broken up into three graphics: Tags Event Handler Content Attributes Browser Support Each differentiates between the n
HTML5を使うためのチートシート「HTML5 Cheat Sheets」
今年一年で多くの話題を振りまいたHTML5。今年から覚えてみよう、活用してみようという方も多いと思います。今日紹介するのは、HTML5を使うためのチートシート「HTML5 Cheat Sheets」です。 HTML5 Tags Cheat Sheet HTML5のタグ、イベントの定義にあわせて、それを処理するイベントハンドラ属性の一覧、HTML5がサポートされているブラウザが一目で分かるシートと3枚セットになったチートシートです。 詳しくは以下 HTML5 Event Handler Content Attribute Cheat Sheet HTML5 Browser Support Cheat Sheet タグのチートシートではHTML4とHTML5とタグと併記されており、こちらを見ればコーディングの際に迷う事も少なくなるはずです。新年からHTML5を覚えていこうという方は是非どうぞ。
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に（勝手に）リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
【レポート】HTML5新機能、Microdataとは | エンタープライズ | マイコミジャーナル
Ext JS is now Sencha HTML5の策定とともに進められている機能に「Microdata」がある。2009年末ごろにHTML5本体から分離し、今はHTML5関連技術として5 Microdata - HTML 5にそのドラフトが公開されている。MicrodataはHTMLコンテンツに特定のメタデータを追加するためのもの。類似の技術にはMicroformatsやRDFaなどがある。 Microdataは名前と値をひとつの組みとする。Microdataでは名前と値の組みをアイテムと読んでいる。5 Microdata - HTML 5に掲載されているサンプルによれば、次のように記述する。 <div itemscope> <p>My name is <span itemprop="name">Elizabeth</span>.</p> </div> itemscope属性でアイテム
Webデザイナー&UIデベロッパー向けのHTML5/CSS3/jQuery/PHPフレームワーク・G5 Framework
Webデザイナーやフロントエンドデベロッパー 向けのフレームワークが登場したようですね。 HTML5/CSS3/jQuery/PHPを使って構成さ れており、シンプルで軽量。小規模レベルの プロジェクトのスターターキット等にも利用して 欲しい、とのことです。 話題を集めるHTML5やCSS3、jQueryで構成されているので勉強がてら触ってみるのもいいかもしれません。ライセンスはGPLとMITのデュアルライセンスです。 (X)HTML5, CSS3, PHP & jQuery Front-End Development Frameworkとのこと。PHPファイル1枚にHTML5/css3/jQueryを詰め込んだシンプルな構成です。 簡単に始められますよ。最初からそこそこ作られています。 マルチカラムのデモなんかも。 上記はIETesterを使用したIE7のキャプチャ。CSS-PIEなども
[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。 HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 <form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
CSS 20 stunning examples of CSS 3D transforms
Photoshop VIP ☞ HTML5とCSS3でデザインされた無料テンプレート素材15個まとめ (PSDファイル付)
