HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
Trumbowyg·軽量、HTML5対応のWYSIWYGエディタ MOONGIFT
Web上でHTMLコンテンツを編集する際にWYSIWYGなエディタがよく使われますが、多機能である分読み込むファイルサイズが大きくなったり、動作が重くなってしまったりします。そのほとんどの場合において使いたい機能はそこまで多くないはずです。 そこで紹介したいのがTrumbowygです。HTML5に対応した、軽量なWYSIWYGエディタです。 Trumbowygの使い方 こちらがデモです。すっきりとしたデザインですね。 メニューアイコンをクリックするとさらにサブメニューも表示できます。 リンクを追加する画面です。 画像もURLを指定する形式です。 リスト。日本語も使えます。 Trumbowygの特徴はIE8以上に対応し、HTML5に最適化されています。さらに高速で軽量（15KB）です。オプションも多く、カスタマイズした利用が容易になっています。jQueryプラグインなので使うのは簡単です。例
Initializr - HTML5のWebアプリケーション開発をはじめるならここからスタート！ MOONGIFT
Webアプリケーションを作り始めようと思った時に、色々なファイルをダウンロードしたり配置しないといけないと思うとげんなりしてしまいますよね。作りたい！と思った勢いをそのままに開発に入りたいものです。 そこで使ってみたいのがInitializrです。HTML5アプリケーションを開発する際に使って欲しい、スタートアップキットになります。 Initializrの使い方 ベースは3つ用意されています。素のHTML5、レスポンシブそしてBootstrapベースです。 ベースを選んだら細かな機能を選択できます。 こんな感じにファイル一式がダウンロードできます。 Bootstrapベース。 レスポンシブ。 素のHTML5。 InitializrではModernizrやHTML5shiv、Google Analyticsなど様々なノウハウが詰まったテンプレートがダウンロードできます。カスタマイズも簡単なの
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();//表示
HTML5-Packer – HTML5アプリケーションを1ファイルにパッキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションはブラウザさえあればどの環境でも動かせる便利な仕組みですが、大きな欠点としてはネットワークがないといけないというのがあります。オフラインでも対応しようと思うとダウンロードと設定がとても面倒です。 その点、バイナリの実行ファイルはダウンロードしてすぐに実行できます。同じような仕組みをWebアプリケーションでも可能にするのがHTML5-Packerです。 HTML5-Packerのインストール まずはインストールします。npmでインストールできます。 $ npm install html5-packer --save-dev これで準備は完了です。 HTML5-Packerの使い方 ローカルにあるWebアプリケーションをパッキングします。この時、gruntと組み合
にゃんたこす！徒然草。: HTML5 + JavaScript でバーコードリーダーを作ってみた
最近、HTML5 + JavaScript で Web Camera を入力とした画像処理ができることを知り、度肝を抜かれました。（参考１．～２．） ブラウザだけでWEBカメラ画像処理システムが出来てしまうのか、と思うと非常に興味深く思います。 そのうち全てのアプリケーションはWEBアプリに置き換わる、という説もなんとなく説得力を帯びてきた気がします。 さて、今回のブログでは、そんな機能を使って遊んでみたというお話です。 このブログでも以前扱いました（参考３．～４．）が、バーコードリーダーのロジックをJavaScript言語に移植して使ってみました。 結論としては、ブラウザのみでバーコードが読めました！ もっと色々試してみたくなりますね！ （※Chromeブラウザ バージョン 33.0.1750.154 m でのみ動作確認済みです） ■動作方法 ※まず、USBカメラなどの Web Came
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
多彩なデバイスに対応したWebサイト構築に最適なデザインフレームワーク·Centurion MOONGIFT
CenturionはレスポンシブWebデザインに対応したCSSフレームワークです。 レスポンシブなWebサイトを構築するためには様々なデバイスでの表示を考慮したり、そのためのノウハウが必要になります。そこでベースとして取り入れてみたいのがCenturionです。 デスクトップでの表示です。 スマートフォンレベルまで幅を狭めた場合。 メニューはスライドして表示されます。 タブレットはこれくらい。 グリッドもあります。 Centurionはシンプルなフレームワークなので、それほど束縛は強くないと思います。カスタマイズ性も考慮されているとのことなので、Centurionをベースにしつつ独自の要素を盛り込んでWebサイトを構築できるでしょう。 CenturionはHTML5製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る Bootstrapは個人
Sencha Touchの本を書きました - きしだのHatena
JavaScriptリッチクライアントフレームワークのSencha Touch解説本を書きました。 Sencha Touchではじめるモバイルアプリ開発―無料で使える「HTML5」&「JavaScript」開発フレームワーク (I・O BOOKS) 作者: きしだなおき出版社/メーカー: 工学社発売日: 2012/11メディア: 単行本購入: 1人 クリック: 24回この商品を含むブログ (7件) を見る 表紙になぜかコーヒーカップとJavaって書いてあるのは、ぼくの管轄外です・・・。あと、キャプチャ画面、もすこしいい感じのを使ってもらうことはできなかったのか・・・。ただ、実物の色合いはもうすこし落ち着いています。 Amazonでは15日発売だけど、公式サイトによると19日発売、らしいです。どっちが正しいかは、まだ聞いてません・・・ ともあれ、目次はこちらから。 ���Ҿ�����Senc
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション·reveal.js MOONGIFT
reveal.jsはCSS3/JavaScriptで作られたプレゼンテーションソフトウェアです。 reveal.jsはHTML5/CSS3を使ったプレゼンテーションソフトウェアです。まずは言うに及ばず、そのクールな画面を見てもらいましょう。 トップです。この雰囲気からして格好いいです。 スライドを切り替える時に3Dイフェクトがかかります。これまた格好いいです。 水平に動くのが基本ですが、垂直にスライドさせる指定もできます。 デモ動画です。スペースキーでスライド一覧が出せます。 reveal.jsはスライドの切り替えがとにかく格好いいので、これでプレゼンテーションを行えば観衆の注目を引くこと間違いないでしょう（もちろん内容が大事ですが）。 reveal.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る プレゼンテー
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
HTML5+jQuery製の管理画面を作るためのテンプレート・HTML5 ADMIN
なかなかユニークだったのでメモ的に。 HTML5+jQueryで使いやすい管理画面を 作るためのテンプレート・HTML5 ADMIN です。管理画面は見た目よりも機能性 のみに焦点が絞られるのでこういった テンプレートは結構貴重ですね。 テンプレートそのものを使う予定は無いですけど、管理画面におけるUI構築は、見た目ではなく、利便性、ユーザービリティのみに焦点が当てられるのでこういうテンプレで学べることも割と多いです。贔屓するわけじゃ無いですけど、WordPressの管理画面は他のCMSやブログエンジンよりはるかに万人に分かりやすく使いやすいように出来ていてとても参考になる点が多いです。機能を意識せずとも使える、というのは秀逸なデザインであるともいえます。 画像だけじゃ全然利便性が伝わりませんがｗ よく使われるUIが一式揃っている、という感じです。fluidレイアウトにも対応。modern
必見。D&Dにも対応したJS/HTML5製マルチファイルアップローダー「jQuery File Upload」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
jQuery File UploadはHTML5を使って複数ファイルを選択できるファイルアップローダー。ドラッグアンドドロップにも対応。 [/s2If] jQuery File UploadはjQuery/JavaScript/HTML5製のオープンソース・ソフトウェア。Webの仕様の中には面倒だと思うものが幾つかあるが、ユーザとして使っている中で感じるのはファイルアップロードに手間がかかりすぎることだ。 アップロード中 ファイルボックスでは一つしかファイルが選べず、ダイアログをいちいち出して選ばないといけない。Flashで解決する手法もあるが、JavaScriptとの組み合わせに問題があったり導入が若干面倒だった。だがそれを解決する素晴らしいライブラリがjQuery File Uploadだ。 jQuery File UploadはHTML5を使っており、Flashに頼らない複数ファイル
ファイルアップロードステータスも取得できるjQuery製HTML5用マルチファイルアップローダー·jQuery HTML5 Upload MOONGIFT
jQuery HTML5 UploadはHTML5/JavaScriptによるマルチファイルアップローダーライブラリ。 jQuery HTML5 UploadはJavaScript/jQuery製のオープンソース・ソフトウェア。HTML5の魅力の一つにinputのfileを使って、複数ファイルの一括アップロードができるというのがある。実際にはファイルダイアログの関係上、一つのディレクトリからしか選べないのだがそれでも便利だ。 アップロード中 そんな複数ファイルアップロードを使うとどんな操作ができるだろうか。それは文章にしただけでは分かりづらい。やはり動いているものを見るのが一番良い。という訳で見てほしいがjQuery HTML5 Uploadになる。 jQuery HTML5 UploadはjQueryによるHTML5のファイルアップローダー実装だ。まずファイルを選ぶとonStartが呼ば
html5doctor - HTML5.JP
サイト内検索 html5doctor ( http://html5doctor.com/ )とは、Richard Clark 氏、Bruce Lawson 氏、Jack Osborne 氏、Mike Robinson 氏、Remy Sharp 氏、Tom Leadbetter 氏といった HTML5 に関して著名な方々が共同で運営しているサイトです。<html>5doctor は、HTML5 を使おうとする人に、さまざまなリソースを提供することを目的として運営されているサイトです。このサイトで掲載されている記事は、HTML5 を習得する上で、非常に有益なものばかりです。特に、マークアップに関する記事が充実しています。 HTML5.JP では、html5doctor の許可を頂き、記事アーカイブの日本語訳を掲載しましたので、ぜひ、HTML5 の理解にお役立てください。 一部、直訳ではなく意訳
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 5の仕様が一覧できるクィックリファレンス