トップ  > メモ一覧  > カテゴリ「HTML5」の絞り込み結果 : 8件

8件中 1 〜 8 表示  1 

No.4696【引用】2011-06-16



■ [ HTML5/CSS ]Modernizr.jsを使ってHTML5のクロスブラウザ問題に立ち向かう!
.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: Consolas, "Courier New", Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }....

引用元

更新:2013/03/08 11:37 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.4366【引用】HTML5 の microdata について調べた

HTML5 の microdata について調べた

9 tweets retweet

Time to Read
5分

microdata というものがある。いわゆるセマンティック(笑)ウェブ(爆)だ。セマンティックウェブの話が出た3年前ぐらいは、概念はすごいけど画餅みたいなところが あり、胡散臭いコンサルやスタートアップが出現してて怪しいイメージもあったが、 Google さんをはじめとした検索エンジンの技術向上とか、似たような規格として facebook とか SNS 系で人気の OGP(Open Graph Protocol) も出てきていて、ウェッブペ~ジにメタデ...

引用元

更新:2012/03/26 20:52 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.3431 HTML5のソース:スマートフォン用基本ページ


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />
    <style>
      p { font-size: 20px; }
    </style>
    <title>スマートフォン用基本ページ</title>
  </head>
  <body>
    <p>スマートフォン用基本ページだよ!</p>
  </body>
</html>

更新:2011/02/14 23:46 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.3429 HTML5のソース:最小限


<!DOCTYPE html>
<meta charset="utf-8" />
<title>HTML5学習</title>
<p>最も基本のページだよ</p>

更新:2011/02/14 22:44 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.3402 HTML5で忘れられがち&マイナーだが便利な3つの要素

HTML5で忘れられがち&マイナーだが便利な3つの要素

 

A vocabulary and associated APIs for HTML and XHTML

最新技術を追っているWebデベロッパであれば、本番環境に導入するかどうかは別として、すでにHTML5やCSS3で策定が進められている新機能 のいくつかは試用しただろう。HTML5といえば最近はvideoやcanvasの機能が取り上げられることが多い。HTML5そのものに突っ込んだ記事 では加えてarticle、section、header、footer、navなどの階層化に関する要素も紹介される。しかし実際にHTML5で導入が 進められている要素はさらに多く、注目されることは少ないが重要なものがある。

SitePointのDon't Forget About HTML5's "Little Guys"において、そうしたマイナーに扱われがちだが便利な要素が3つ紹介されている。HTML5の技術を追っていく過程で、こうした機能についても軽くおさえておきたいところだ。紹介されている機能は次のとおり。

hgroup要素

<hgroup>
<h1>ここのタイトルが表示される</h1>
<h2>副題などを表記したり</h2>
<h3>さらに副題を追加したり</h3>
</hgroup>

HTML5にはヘッダをグループ化するhgroupという要素が用意されている。h1、h2、h3、h4、h5、h6をまとめるための要素で、まと めた要素のうちもっともレベルの高いもの(たとえばh1)のみが表示されるという振る舞いをする。副題を記述したいがそれがアウトラインに表示されるのは 困るといった場合に利用できる。たとえばタイトルと副題をそれぞれh1およびh2に記入して、2つをhgroupで囲めばいい。一見するとh1しか使われ ていないように振る舞うようになる。なお、同じレベルのヘッダが使われている場合には先に出てきた方が優先される決まりになっている。

aside要素

本文とまったく関係がないわけではないが、それほど重要でもないといったコンテンツをまとめる場合に使われるのがaside要素。aside要素で 囲むようなコンテンツは、それ単体ではポータブルなコンテンツとして扱えないようなものといえる。ブログでいえばサイドバーのエリアに表示されるようなも のが該当し、たとえば注釈や用語解説、著者紹介、本文抜粋見出しなどが当てはまる。

mark要素

主に検索結果を表示するページでキーワードをハイライトするために使われる要素がmarkとなる。これまでこうした要素ではstrongやemが使 われていたが、これはほかに適切な要素がなかったためであり、markはこの用途における代替え要素となる。検索結果ページにおけるキーワードハイライト 以外にはあまり積極的に用いられることがないが、強調したいワードがある場合の指定として利用できる。

引用元

更新:2011/01/31 11:08 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.2644 HTML5ビデオを埋め込む。またiPhone,iPadで自動再生(autoplay)を行う

HTML5ビデオを埋め込む。またiPhone, iPadで自動再生(autoplay)を行う

HTML5ビデオを埋め込むコードは
<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer autoplay> 
</video> 

iPhone, iPadでautoplayを行うには
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.3");</script>
<script type="text/javascript"> 
jQuery.noConflict(); var j$ = jQuery;
function fakeClick(fn) {
	var $a = j$('<a href="#" id="fakeClick"></a>');
		$a.bind("click", function(e) {
			e.preventDefault();
			fn();
		});
	j$("body").append($a);
	var evt, 
		el = j$("#fakeClick").get(0);
	if (document.createEvent) {
		evt = document.createEvent("MouseEvents");
		if (evt.initMouseEvent) {
			evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			el.dispatchEvent(evt);
		}
	}
	j$(el).remove();
}
j$(function() {
	var video = j$("#myvideo").get(0);
	fakeClick(function() {
		video.play();
	});
});
</script>

とする。

引用元

更新:2010/06/09 10:00 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.2400 HTML5のClient-sidedatabase(JavaScriptDatabase)のSQL文サンプル

HTML5のClient-side database(JavaScript Database)のSQL文サンプル

テーブルの作成
CREATE TABLE `test_dt ` (
  test_id   INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
  test_name  TEXT    NOT NULL ,
)
データのINSERT
INSERT INTO
test_dt ( test_name, test_date ) 
VALUES ( "日本語データのテスト" , datetime("now","localtime") )
テーブルの削除
DROP TABLE test_dt;

引用元

更新:2010/05/04 13:26 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.2353 HTML5のClient-sidedatabasestorage(WebDatabase)を試す

HTML5のClient-side database storage(Web Database)を試す

HTML5で導入されるClient-side databaseが使用できるブラウザは以下の通り

( 一部ブラウザではHTML5未対応でも GoogleGears をインストールすると使えます。)

http://gears.google.com/

Win + IE6,7,8(Gears使用)
Win + Firefox3.6(Gears使用)
Win + Chrome(Gears使用)
Win + Opera10以降
Mac + Safari 3.1 , Safari 4以降
Mac + Chrome

使用できないのは

Mac + Firefox 3.6(Google Gears 未対応)
Mac + Opera 10.10(Google Gears 未対応)

だけですね。


サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="http://gear5.googlecode.com/hg/src/javascript/gear5.js"></script>
    <script type="text/javascript" src="jkl-dumper.js"></script> 
	<title>HTML 5 DB</title>
	<meta charset="utf-8" />
</head>
<body>


<script>

var db;

  try {
    if (window.openDatabase) {
      db = window.openDatabase("sampledb", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
      else{
        alert('db ok');
      }
    } else {
      alert("データベースストレージはサポートされていません。");
    }
  } catch (error) {
    // ...
  }

// select
db.transaction(
    function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS AddressList(name TEXT, address TEXT)');
        var id = 12113;
        var name = 'ziddy';
        tx.executeSql("INSERT INTO AddressList VALUES (?, ?)", [id,name] ,
            function(tx, rs) { 
                alert(rs.insertId);
                var dumper = new JKL.Dumper();
                alert( dumper.dump( rs ) );
            }
        );
    } ,
    function(error) {
        alert( 'transaction error : ' + error.message');
      }
);

</script>
 
</body>
</html>

http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20385468,00.htm

引用元

更新:2010/04/27 10:30 カテゴリ: HTML・CSS  > HTML5 ▲トップ
8件中 1 〜 8 表示  1 

FuelPHP

Mac

web開発

プロマネ

マネタイズ

プレゼン

webサービス運用

webサービス

Linux

サーバ管理

MySQL

ソース・開発

svn・git

PHP

HTML・CSS

JavaScript

ツール, ライブラリ

ビジネス

テンプレート

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0