絶対買うんだよ→初心者でも3時間もあればプログラミングできる「enchant.js」のバイブル本発売 【増田(@maskin)真樹】 : TechWave
[読了時間:2分] 「アプリやウェブサイトがどんな風にプログラムされているか知りたい」「プログラミングしてみたい」そう思う人がジワジワ増えている。TechWaveでは、そんな初心者の夢を実現するのに最適といえるUEI(ユビキタスエンターテインメント)の「enchant.js」に注目してきたが、そのバイブルとも言える教科書本「HTML5とJavaScriptでスマートフォンゲーム作成！ ゼロからはじめるenchant.js入門【公式ガイド】」が遂に発売となった。 若干技術用語が入ってくるが、検索しながら、かつ投稿コンテストサイト「9leap」などで公開されている大量のサンプルコードを見ながら進めれば表題の通り3時間あれば誰でもゲームを作れてしまう良書だ。「またまた、マスダさん御冗談を」という人も是非書店で手に取って頂きたい。 プログラミングの興奮を全ての人に 実際、enchant.jsでは小
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
2130703450443574201?keyword=HTML5
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
Shutter Effect Portfolio with jQuery and Canvas
In today's tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website. The Idea The canvas element is a special area on which you can draw with JavaScript and apply all sort
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
HTML5 + Canvas + JavaScriptによるWebベースの顔認識「ccv」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
ccvはHTML5とCanvasタグを使ってWeb上で顔認識を行う。C言語によるライブラリもある。 [/s2If] ccvはWebベースまたはC言語製のオープンソース・ソフトウェア。最近の写真管理ソフトウェアの流行として顔認識がある。デジカメやプリンタでも顔認識機能を搭載し、自動的に明るくしたりするものもある。風景写真なども良いが、やはり人が写っている写真のが楽しいのだ。 そんな顔認識技術はWebベースでも提供されるようになっている。特にFacebookのようにSNSの中で使う場合は友人を自動認識させることでより活発な交流を促せるのだ。Webベースでの顔認識をHTML5/Canvasで行うのがccvだ。 実行例 via Tibetan Girl near Mount Everest | Flickr - Photo Sharing! ccvは元々C言語で開発されているコンピュータビジョンラ
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
JavaScriptでSVGのレーダーチャートを描画するライブラリ Raphael Radar をつくった - I CAN ’CAUSE I THINK I CAN!
概要 JavaScriptでSVGを描画するライブラリRaphael.jsを使って、 操作可能なレーダーチャートを描画するライブラリ Raphael Radar を作りました。 Raphael Radar は次の2つの機能を持ちます。 レーダーチャートをSVGで表示 レーダーチャートの各軸の値をフォームと対応づけて、インタラクティブに値を選択 (2)の機能は任意で無効化して単純なレーダーチャートとして利用することもできます。 入手と使い方 依存ライブラリ Raphael Radar を使う前に、2つのライブラリをインストールする必要があります。 Raphael.js (1.3.1 以降) jQuery (1.4.2 以降) もしうまく動作しない場合、Raphael.jsとjQueryのバージョンを合わせてみてください。 インストール方法 上記の依存ライブラリをインストール Raphael
レーダーチャート - JavaScript ライブラリー - HTML5.JP
JavaScriptからレーダーチャートをcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みのレーダーチャートを柔軟に描画できます。 ダウンロード Release Date Size (byte) Download 使い方 graph_radar_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。 <div><canvas width="400" height="300" id="sample"></canvas></div> 上記タグは次の点に注意してください。 canvas要素は、必ずdiv要素で囲んでください。 canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。 canvas要素には、必ずid属
HTML5ベースの音楽ストリーミングシステムを構築するオープンソースのソフトウェア・streemeがなにやら凄そう - かちびと.net
iPhone等にも対応した音楽サーバー を構築できるHTML5ベースのソフト ウェアがMITライセンスのもとで配布 されていました。まだ未検証ですが、 なんだかHTML5製もいろいろ出てき ますね。まだまだこれからかもしれま せんが色々楽しみです。 まだ未検証ですけどデモが凄かったので勢いでご紹介。中も見てないので「こんなのあったよ」、程度に見て頂ければ。レビュー記事とかではないです。 本当は検証したいんですけどメインで使ってる端末、音出さないようにしてるので検証出来ないんです。ごめんなさい。 Windows、Mac、Linux対応、ライセンスはMITで無償配布されていますよ。「個人で構築できる音楽サーバー」という趣旨みたいです。 PHP&MySQLで動くそうですよ。インターフェースも判りやすそうですね。 モバイルでのインターフェース。コード変換メディアにFFMPEGライブラリを利用してい
HTML5を実際に使用しているサイトを集めたHTML5専門のWebギャラリー5つ - かちびと.net
ふと、HTML5を実際に使用しているサイトの 現状が気になって調べ物をしたので、ついで にシェアします。HTML5を使っているWebサ イトのギャラリーを5つほどご紹介します。 実例からIEへの対応なども学べるので導入 予定の方はチェックしてみては如何でしょう。 日本でもHTML5で作られたサイトを稀に見かけるようになってきました例えばローソンのサイトはHTML5ですね。Twitterでも一部のユーザーに人気のie6botのサイトもHTML5です。 海外では結構な数になってきているようですので実例を見て学びたいと思い、ギャラリーから探しました。 101 Best HTML5 Sites HTML5で出来たサイトのベスト100を掲載しているサイトです。サムネイルも中くらいのサイズで見やすいのでお勧め。 このサイトはシリーズ化していて、他にもTwitterアプリ、iPhoneアプリサイト、An
「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blog | Brightcove
Loading...
HTML5とCSS3を使いこなしたくなるフレームワーク15選
IDEA * IDEA