画一的なプレゼンテーションにさよならを。HTML5/JavaScript/CSS3によるプレゼン·CSSS MOONGIFT
CSSSはHTML5/JavaScript/CSS3で作られたWebベースのプレゼンテーションテンプレート。 CSSSはHTML5/JavaScript/CSS3によるオープンソース・ソフトウェア。最近はHTMLやJavaScriptを使って作られたプレゼンテーションが増えている。JavaScriptでキーの動きに合わせてスライドを動かす類のものだ。 奇麗なHTMLプレゼン コンテンツがHTMLベース、つまりテキストで作れるのが大きな魅力だろう。そして最新のWeb技術を盛り込んで作られたのがCSSSだ。 CSSSは矢印キーによるスライドと切り替えと、Ctrlキーと組み合わせたキーボードショートカットをサポートしている。Ctrl+Hでスライドのサムネイル一覧を作ることもできる。矢印を押すたびに文字が追加表示されていくと言ったアクションも実装できる。 スライド一覧 良いと思ったのは、スライドの
フォーム関連要素（1） HTML5で既存のinputタイプに加わった6つの変更点
HTML5はフォーム関連要素もパワーアップ！ HTML5へのバージョンアップに当たり、＜form＞要素や＜input＞要素に代表される「入力フォーム」についても、非常に多くの変更が行われました。 もともとアプリケーションプラットフォームを志向していなかったこともあり、HTMLにおける入力フォームは非常に貧弱で、ユーザーにとっても使いやすいものではありませんでした。それを補うため、JavaScriptを用いてリッチな入力フォームを実現するのが一般的でしたが、JavaScriptを用いる方法には「セマンティックが不明確になる」「JavaScriptが動作しない環境では利用できない」といった弱点もありました。 そこで、HTML5ではさまざまな点から入力フォームを見直し、さまざまな機能強化が図られました。具体的には、以下のような点が挙げられます。
作成時間15秒！HTML5サイトを目的に合わせて簡単に作成出来るサイト「Initializr」
HTML5、CSS3、Javascriptを使用したサイトを簡単につくることが出来るテンプレートサイト「HTML5 Boilerplate」。このBoilerplateを利用してさらに簡単に15秒程度で目的に合わせてHTML5のテンプレートを作ることが出来るサイト「Initializr」の紹介です。Javascript、Modernizr、webサーバの設定などを簡単に組み込んだり、外したり出来ます。 使用方法は、とても簡単で必要に合わせていくつかのオプションを選択します。多くの場合、デフォルトの設定で問題ないと思います。 まずは、こちらのサイト「Initializr – Start your HTML5 project in 15 seconds!」にアクセスします。 サンプルページが必要な場合は、「Initializr sample page」を選択してください。(デフォルトで選択され
HTML5の文法 World of granshe.
HTML5について学んでみました。 参考にさせていただいたサイト(敬称略) HTML5 W3C working draft HTML5.JP HTML 5 ― HTML 4 からの変更点 翻訳系の記事では常々申しておりますが、 基本的に、W3Cのワーキングドラフト（英文）を読んでいるので、ここに書かれていることが原文と全く同じとは限りません。翻訳に際して生じる間違いがある場合がございます。 以上をご理解いただけると助かります。 間違いを発見した場合、ご連絡いただけると勉強になるのでとても嬉しいです。 連絡先：granshe@jcom.home.ne.jp 今回は、DOCTYPE宣言と文法について。 HTML4.01では、HTMLの先頭にDOCTYPE宣言がなければならないというようなことが仕様書に記載されていました。 A valid HTML document declares what
JavaScript、HTML5、 CSSの投稿共有コミュニティサイト「jsdo.it」をリリース | 面白法人カヤック
株式会社カヤック（本社：神奈川県鎌倉市、代表取締役：柳澤大輔 貝畑政徳 久場智喜、http://www.kayac.com/ 以下「同社」 ）は、2010年6月18日、JavaScript、HTML5、CSSを投稿して共有するコミュニティサイト「jsdo.it」をリリースいたしました。 「jsdo.it」は、Web制作において話題となっている次世代開発言語「HTML5」と、「JavaScript」「CSS」のソースコードを投稿してユーザー間で共有できるWebサービスです。 同社はFlashを投稿して共有できるWeb サービス「wonderfl build Flash online」を2008年12月より運営しており、国内外合わせて2万3000人のユーザーと8万9000の投稿数を獲得しています。HTML5、 JavaScript、CSSにおいても簡単に投稿ができたり、ノウハウを共有したりで
フリーで使える15のHTML5＋CSS3なテンプレートファイル:phpspot開発日誌
15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com フリーで使える15のHTML5＋CSS3なテンプレートファイルが公開されています。 それぞれ地味なようでいて、HTML5やCSS3のテクニックをふんだんに使っています。 素材として使ってもよいですし、１つの学習用リソースとして活用してみるのも有益ですね。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 CSSテンプレート配布サイト色々まとめ フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」 フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 使えるCSSレイアウトテンプレート集「mycelly.com」
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
HTML5の凄さを理解できるHTML5製のプレゼンテーション·HTML5 Slides MOONGIFT
HTML5 SlidesはHTML製のオープンソース・ソフトウェア。2010年秋に仕様の確定が予定されているHTML5。ビデオタグなどの一部混乱はあるものの、大筋で仕様は固まってきており、SafariやGoogle Chromeなどは率先してHTML5に取り組んでいる。 HTML5に関するプレゼン HTML5で目玉機能になっているのがローカルストレージやオフラインアクセス、データベース、位置情報、SVG/Canvasなどだろう。そんなHTML5の魅力を知ることが出来るプレゼンテーションとしてHTML5 Slidesを紹介しよう。 HTML5 SlidesはHTMLで作られたプレゼンテーションだ。左右の矢印キーを使って読み進めることが出来、Ctrlキーと+/-キーで拡大、縮小表示ができる。内容はずばり、HTML5に関する説明で、プレゼンの途中でHTML5を試せるようになっている。 プレゼン上
HTML 5 and CSS 3: The Techniques You'll Soon Be Using | Envato Tuts+
In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. Before we get started, consider using one of our HTML5 Templates or CSS
【HTML5】HTML5で追加されたformの新要素をいろいろなブラウザで試してみた : アシアルブログ
こんにちは、橋本です。 最近巷ではHTML5が盛り上がりを見せている気がします。 「世界的ですもんね。乗るしかない、このビックウエーブに！」 とはいえ、HTML5のすべてに触れると膨大な量になってしまうので、今日はHTML5の中でも、多くの変更が行われた、form要素について、実際に新しく追加された機能を使っていってみたいと思います。 まずは以下を参考に、どのような修正が加えられたか見てみましょう。 W3C – HTML 5 differences from HTML 4 日本語訳 formに関する変更はこのあたりでしょうか。 以下に列挙してみます。 ・inputタグに以下のtype要素が追加。 tel search url email datetime date month week time datetime-local number range color ・以下の属性が追加 inp
HTML5対応がもっとも進んでいるのはChrome5 | エンタープライズ | マイコミジャーナル
The HTML5 test ? how well does your browser support HTML5? ブラウザがどの程度HTML5をサポートしているかどうか表示するサイトThe HTML5 testがローンチしている。ブラウザでアクセスするとDOCTYPE、Canvas、ビデオ、オーディオ、位置情報、ストレージ、オフライン機能、Web Worker、セクション、コンテンツグルーピング、セマンティック要素、フォーム、ユーザインタラクションについて対応状況をチェック。対応数が表示される仕組みになっている。次に、開発版も含め主要ブラウザの閲覧結果を掲載しておく。 The HTML5 test ブラウザスコアグラフ ブラウザ The HTML5 testスコア Chrome5 137 Opera 10.52-6306 107 Opera 10.51 102 Firefox 3.7
ASCII.jpリファレンス
サービス終了のお知らせ ASCII.jpリファレンスはサービスを終了しました。2009年のサービス開始以来、長きにわたりご利用いただき、ありがとうございました。 2017年10月5日 株式会社KADOKAWA Web Professional編集部
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
HTML5対応のリファレンスサイトがオープン！
アスキー・メディアワークスは、HTMLの次世代版「HTML5」のドラフト版にいち早く対応した『ASCII.jp HTMLリファレンス』とCSS 2.1に対応した『ASCII.jp CSSリファレンス』を本日より公開しました。 ASCII.jp HTMLリファレンス 「ASCII.jp HTMLリファレンス」は、HTMLの各タグの定義や使い方を解説したものです。書籍『超図解 HTML ＆ CSSリファレンス』（エクスメディア、2006年1月刊行）をベースに大幅に加筆。現在提案されているHTML5の仕様まで含め、合計123項目を収録しリファレンス性を高めています。WebデザイナーからWebプログラマーまで、幅広く、末永くご利用いただける内容に改訂しました。 ASCII.jp CSSリファレンス 「ASCII.jp CSSリファレンス」は、CSS（Cascading Style Sheets ）
HTML5のクールなサイト – creamu
DIVE INTO HTML5というサイトを見つけました。 HTML5でサイトを作っていますね。フォントには@font-faceを使って、EOTファイルを使っています。 HTML5からWeb Fontsとして、サーバにフォントファイルをアップロードすることで、ユーザのPCにインストールされていないフォントでも利用できますが、IEはライセンス情報を埋め込んだ特殊なフォントファイル（EOTファイル）のみ認識するため、別途EOTファイルの作成が必要です。その対応をしているようですね。 デザインフォントに見えるところも、テキストになっているので、なかなかいい感じです。 DOCTYPE宣言と文字コード指定もシンプルですね。 HTML5の参考に、ぜひ見てみてください。 Dive Into HTML5 ウィンドウのサイドにFollow meボタンをつけました。と思ったらフォロワーが一気に、いつもより多い
【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 (5) 大幅に強化されたフォーム要素 | エンタープライズ | マイコミジャーナル
Webアプリケーションを作成する上で必ずお世話になるのが、テキストフィールドやボタンなどのフォーム要素である。HTML 5では、もともとWeb Forms2として策定が進められてきた仕様を取り込み、フォーム要素に対して大幅な機能強化が加えられている。 以下に、それらの強化点を順不同で挙げていく(あまりに細かいと思われる変更点は除く)。また、各ブラウザの現時点での対応状況も合わせて記載する。 placeholder placeholderとは、未入力状態の入力フィールドに表示されるヒント情報のことだ。たとえばテキストフィールドであれば、未入力時は以下のように文字列が薄く表示される。 実現方法は簡単で、placeholder属性にヒント文字列を指定するだけだ。 <input type="text" placeholder="input me"> 現時点で対応しているブラウザはSafari 4
HTML5 で試しに Web ページを組んでみた – VERSIONFIVE
先日、WCAN mini Markupの第8回がありました。前回の「デザインを(X)HTML化しました」に続いて、今回は「CSS ココにこだわってみました」というテーマで前回組んだHTMLを(一部でもいいので)CSSで装飾してみよう、ということをしたのですが、フツーにXHTML+CSSで組むのもつまらないなーと思って最近話題になりつつあるHTML5でページを組んでみました。主に以下のサイトを参考にしました。 HTML 5 (W3C Working Draft 10 June 2008) HTML 5 (Editor’s Draft 12 December 2008) HTML 5 における HTML 4 からの変更点 (Working Draft 22 January 2008) HTML 5 の新要素 HTML5が話題になっているので試しに書いてみた。｜CSS HappyLife 試しに
最新ブラウザのHTML5タグへの対応状況をまとめてみた - IT-Walker on hatena
ちょっとしたプログラムを書いて、各メジャーブラウザのHTML5タグへの対応状況を調べてみました。現時点でのHTML5仕様に含まれているタグが、ブラウザにUI要素として認識されるかどうかを調べただけです。これだけでは、HTML5の対応状況としては一部しか調べられませんが、一応の参考として。 間違いがありましたらご連絡ください。 具体的に行った調査方法は、記事の最後を参照してください。 IE8Chrome2Chrome3(Beta)Safari4Firefox3.5Opera10(Beta) div○○○○○○ section×××××× nav×○○○×× article×××××× aside×○○○×× h1○○○○○○ h2○○○○○○ h3○○○○○○ h4○○○○○○ h5○○○○○○ h6○○○○○○ hgroup×○○○×× header×○○○×× footer×○○○××
[Think IT] 第1回：結構良さそうだぞHTML 5！ (1/3)
【即実践！HTML+CSS】ポストWebコーディング 第1回：結構良さそうだぞHTML 5！ 著者：吉田 光利 公開日：2008/04/07（月） HTML 5時代はすぐそこまで来ている！ HTML 5と聞いたとき、皆さんはどう思ったでしょうか。 筆者の場合は「え？HTML 5？また覚えなきゃいけないことが出てくるの？」「もうHTMLはいいだろ」「今あるサイトはどうなっちゃうの？」「W3Cの勧告なんてあてにならないからなぁ」などというネガティブな感じです。 しかし、HTML 5について学んでいくと「おお！結構良さそうだぞHTML 5」「これは来るな！」という気持ちに変わりました。 2010年の正式勧告される予定で、そこに向かってすごいスピードで広がっています。もしかしたら、それくらいの時期には定着しているのではないかと筆者は考えています。なぜならばあのInternet Exploreもこの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI design of HTML5 Forms