HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。 トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート
html5から新しく採用された要素にheader要素とfooter要素があります。 これら2つの要素は、しばしばウェブページ全体のヘッダーとフッターというこれまでdiv要素で区分してきた部分を置き換えるものだという話を聞きます。私自身もそう考えていたのですが、今回改めて仕様書を見てみたところ、どうもそういう単純な話ではないようです。 自分用のメモ、という意味も込めて、ここで改めてheader要素とfooter要素について、整理しておきたいと思います。 header要素まずheader要素です。html5のワーキングドラフトには以下のように書かれています。 The header element represents a group of introductory or navigational aids.（header要素は導入部ないしナビゲーションの補助を表します。） Note:A hea
リセットCSSとは 各ブラウザ(IE・FireFox・safariなど)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートのことを『リセットCSS』と呼んでいます。 ブラウザ毎のデフォルトスタイルをリセットする理由 例えばデフォルトのまま文字を表示すると、ブラウザ毎に文字サイズが変わってしまいます。そこで、デフォルトのスタイルをすべてリセットするCSSを読み込み解決します。 ※ただし、リセットCSSは必ず必要というわけではありません。今回、詳しい説明などはいたしませんが、ブラウザのデフォルトスタイルを有効に使っていこうという考え方もあります。 HTML5のリセットCSS XHTML1.0でのリセットCSS いままでのXHTML1.0で主に使用しされていた代表的なリセットCSSは、 YUI LibraryのCSS Reset Eric Meyer’s
JQueryMobileでらくらくアプリ開発をはじめよう(2)
前回JQueryMobileのサンプルプログラムとしてToDo管理アプリのUIを作るところまで説明しました。 今回は、JavaScript(JQuery)とHTML5のWebStorageを使って実際にToDoを入力し、保存できるところまで つくりアプリを完成させます。 まずサンプルコードを書く前に、WebStorageについて少し説明します。 HTML5のWebStorageについて WebStorageはHTML5から新たに搭載された規格で、 Cookieのような働きをします。ローカルストレージという端末ごとの データ保存領域に（キー、バリュー）の組み合わせを保存できます。 しかし、Cookieと違う点としては、 ・CookieはHTTPリクエストを使ってサーバに値を送信するのに対して、 WebStorageはサーバ通信は必要とせず、ローカルで完結している。 ・サイズ制限が無い ・有効
getCurrentPositionとwatchPositionは、どちらもほぼ同じような使い方で、非常に単純です。が、より使いこなす上で覚えておきたい機能も幾つか用意されています。それらについて整理して行きましょう。 ■オプションの設定 これらのメソッドでは、第３引数にオプション設定を用意することができます。これは連想配列の形でオプションの値をまとめて渡します。用意できる値には以下のようなものがあります。 enableHighAccuracy――高精度のGPS値を取得するかどうか。真偽値で指定し、trueならばこれを利用します。ただしGPS値の取得により時間がかかります。 timeout――GPS取得のタイムアウトするまでのミリ秒数。これを過ぎると取得できないと判断しエラーになります。 maximumAge――キャッシュしたGPS情報の保管期間（ミリ秒数）。これが経過するとキャッシュが破
HTML5のモバイルアプリを“ネイティブアプリ化”する「PhoneGap」が正式版に。オンラインでの変換サービスも発表 HTML5、CSS、JavaScriptなどのWeb標準の技術で作成したモバイルアプリケーションを、iPhoneやAndroidなどのデバイスにインストール可能なネイティブアプリケーションへと変換するフレームワーク「PhoneGap」が、正式版「PhoneGap 1.0」になったと開発元のnitobiより発表されました。 PhoneGapはオープンソースソフトウェアとして開発されているソフトウェアで、無料でダウンロードし利用することができます。 デバイスごとのネイティブアプリケーションに変換 PhoneGapを、jQuery Mobileのようなマルチデバイスに対応したモバイルアプリケーション用フレームワークと組み合わせると、HTMLやJavaScriptなどのWeb標準
昨日、Publickeyのモバイル対応版「Publickey Smart Edition」を発表しました。Publickeyのモバイル対応はずっと課題だったのですが、jQuery Mobileが登場したとき「これで簡単にモバイル対応ができる」と思い、jQuery Mobileが安定するタイミングを待っていました。 8月に「そろそろ大丈夫だろう」と思って開発を始めたところわずか1週間程度でモバイル対応ができあがってしまい、今週jQuery Mobileのβ3が出てフィーチャーフリーズになったのに合わせて試験運用を開始しました。 Publikceyのモバイル版の開発は、おおむね3つのステップ「モバイル用HTMLの生成」「jQuery Mobileによるタッチインターフェイスの構築」「小さな画面に合わせた画像縮小」から構成されています。ここではその裏側を少し紹介しましょう。 CMSでモバイル用H
HTML5 および、それに関連する仕様に規定された API がブラウザーに実装されているかをチェックします。 HTML5 HTML Canvas 2D Context Web Storage File API HTML5 Web Messaging Selectors API Level 1 Selectors API Level 2 Web Workers Geolocation API Server-Sent Events Element Traversal この API チェッカーは、厳密に、HTML5 仕様に準拠しているかどうかを調べているわけではありません。IDL 属性（プロパティ）については、得られたオブジェクトのコンストラクタ名または型を評価しています。メソッドについては、それが Function 型かどうかを評価しているだけです。そのため、実装していると結果が出たとしても、
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
サイト内検索 この記事は、html5doctor に掲載されている記事「HTML5 Reset Stylesheet」を日本語訳したものです。この記事では、HTML5 でマークアップしたページにも対応した、リセット・スタイルシートについて解説しています。最後に、HTML5 向けのリセット・スタイルシートもダウンロードできます。 原文タイトル HTML5 Reset Stylesheet 原文ページ URL http://html5doctor.com/html-5-reset-stylesheet/ 著者 Richard Clark 氏 原文投稿日 2009-07-27 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア（コーダー）と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの？ HTML5とCSS3を使うメリットは？ HTML5とCSS3で何ができるの？ そもそも、HTML5とCSS3ってもう使えるの？ 使えます。 （※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません） 現在のスマ
This presentation is an HTML5 website Press → key to advance. Zoom in/out: Ctrl or Command + +/- Having issues seeing the presentation? Read the disclaimer HTML5* Web Development to the next level *Including other next generation technologies of the Web Development stack Rough Timeline of Web Technologies 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tablel
アドビ システムズは、これからHTML5/CSS3を学ぶ人向けのサイト「HTML5/CSS3 特設サイト -Adobe Dreamweaver CS5-」を開設した。 同サイトは、HTML5/CSS3に関する多様な情報をまとめたサイト。「Dreamweaver CS5」を使ったHTML5制作がすぐにわかるチュートリアルや、HTML5制作の為のダウンロード可能なサンプル素材など、様々なコンテンツが用意されている。 なお、この特設サイトは、実際にHTML5/CSS3を利用して作成されており、シンプルながらメディアクエリを使用して、アクセスするデバイスに合わせたレイアウト表示ができる仕組みとなっている。これによりPCだけでなく、スマートフォンなどさまざまなデバイスからアクセスして、マルチデバイス対応のDreamweaver CS5でのHTML5制作を体験することができる。同サイトの制作はブラウザ
Tech Drive-in - Technology, Linux, Ubuntu FTW 主要ブラウザの対応が進んでいることもあり、HTML5の技術を活用したデモンストレーションサイトが増えている。現在主流の技術と互換性が高いことから、すでにHTML5を採用すべきという意見もある。ブラウザの更新頻度は早まる傾向にあり、HTML5/CSS3の対応は日進月歩で進んでいくことになるとみられる。 HTML5やCSS3のデモンストレーションサイトやテクニック紹介ブログはこれまで何度も取り上げてきた。15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flash - Tech Drive-inにおいて、HTML5デモンストレーションサイトがまとめられており参考になる。中にはこれまでマイコミジャーナルで取り上げたサイトも含められている。紹介されて
さて、モダシンラジオのデータをホスティングしてもらっているSpotify for Podcasters(旧Anchor）の私のページはこちらです。 https://podcasters.spotify.com/pod/show/kazuyoshi-nagasawa このSpotify for PodcastersページのRSSは以下になります。こちらのRSSではenclosureタグなどでlength値などがしっかり入っているのでこれを購読しておくとよいかと思います。 https://anchor.fm/s/66ff2830/podcast/rss ここで聴く！という人は以下のプレイヤーからどうぞ。 んで、これまではGoogle Drive上に保存したmp3ファイルを聞きたい方は以下のリンクをクリックしてください。ブラウザ内で聞けます。 https://drive.google.com/f
HTML5 では、Canvas, Web Storage, Web Socket, Web Workers などの API がよく注目されます。しかし、HTML5 が規定する API は、このような全く新しい API だけではありません。これまで仕様が存在していないけれども、すでに広く使われてきた API や、特定のブラウザーだけが実装していた独自の API も、HTML5 仕様に盛り込まれています。実際に、Web アプリケーションを作る上では、このような基礎的な API も非常に重要となります。 W3C においては、HTML5 のさまざまな API が、独立した仕様書として分離されました。しかし、かなり多くの地味な API たちが、HTML5 仕様の中に盛り込まれています。window オブジェクト、document オブジェクト、そして、要素ごとに規定されたインタフェースは、Web ア
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleはiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
