タグ

HTML5に関するred_snowのブックマーク (9)

  • HTML5/CSS3のテンプレートのまとめ | コリス

    商用でも無料でいいの?というくらい美しくデザインされたHTML5/CSS3のテンプレートを紹介します。 デザインだけでなく、ページ内に取り入れたエフェクトもなかなか面白いものが揃っていますよ。 Brushed デモ ミニマルなデザインが美しい1ページスクロール。パララックスの使い方、固定ヘッダの配置方法、ナビゲーションやパネルのエフェクトなど、随所にセンスが光ります。 個人・商用利用無料。

  • 続・よくある3つのデザインから考える、マークアップの最適解

    マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初

    続・よくある3つのデザインから考える、マークアップの最適解
  • Chart.js

    New in 4.0 Colors plugin Default palette of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.

    Chart.js
  • HTML5をすぐハイブリッドアプリとして試せる無料のツール「Monaca」を使ってみた

    HTML5/JavaScriptで作成したアプリケーションをラップし、ネイティブアプリケーションとして扱える「ハイブリッドアプリケーション」は、高い生産性でモバイルアプリケーションを開発できるといったメリットから注目されています。 しかし実際に自分でハイブリッドアプリケーションを開発しようとすると、例えばiOS用ならMacOSのマシンを用意してPhoneGapの環境を整え、ビルドしたアプリケーションをいちいちiPadiPhoneに転送して試すなど、それなりの手間がかかります。Publickeyでは以前からハイブリッドアプリケーションに注目して紹介してきたため、時間があれば自分でもHTML5とJavaScriptで作ったアプリケーションをハイブリッド化しみてみようと思いつつ、なかなか開発環境を整備するに至りませんでした。 そこで思い出したのが「Monaca」です。Webブラウザ上でHTML

    HTML5をすぐハイブリッドアプリとして試せる無料のツール「Monaca」を使ってみた
  • スマートフォン向けのHTML5製フレームワーク・Lungo.js

    今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js

    スマートフォン向けのHTML5製フレームワーク・Lungo.js
  • 人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ! | Chrome Life

    みなさんは、サイトをスクラッチで作る時にどうされていますか? HTMLCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか? それは、 パーツが完璧に揃いすぎている! のが原因です。 Twitter Bootstrapがバージ

    人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ! | Chrome Life
  • 管理画面からはじめるHTML5対応·HTML5 ADMIN MOONGIFT

    HTML5 ADMINはHTML5で作られた管理画面用テンプレートです。 格好いい管理者専用のWebページが作ってみたいならばお勧めしたいのがHTML5 ADMINです。 デモの画面です。シンプルで分かりやすい画面構成になっています。 ツリービューを広げた場合です。 レイアウトは柔軟に設定されています。 アコーディオンやタブ、シャドーも用意されています。 ダイアログです。 アイコン、スライダー、カレンダー、プログレスバーもあります。 テーブル表示です。 プロフィール的な表示にも対応しています。 メッセージ表示も考慮されています。 フォームのサンプルもあります。 細かな部分にも気を配られたデザインです。 HTML5 ADMINはjQuery、jQuery UIを使っており、無限の階層メニュー、追加ナビゲーションなどの機能があります。 HTML5 ADMINはHTML5/JavaScript

  • 1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering

    初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初

    1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
  • 「スマートフォン版GREE HTML5+JavaScript & Android」講演資料公開いたしました | GREE Engineering

    こんにちは。グリーの田尻です。 先日1月9日(日)東京大学で行われたAndroid Bazaar and Conference 2011 Winterにて、弊社エンジニア@kuが登壇させて頂きました。テーマは「スマートフォン版GREE HTML5+JavaScript & Android」です。 当日の会場は満員で、お越しくださったみなさま、当にありがとうございました! 好評につき日は講演当日の資料を公開いたしましたので、当日参加できなかった方にもぜひご参考にして頂ければと思っております。 Android Bazaar and Conference 2011 Winter

    「スマートフォン版GREE HTML5+JavaScript & Android」講演資料公開いたしました | GREE Engineering
  • 1