ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめウェブ制作、主にフロントエンドの開発者に役立つチートシートを紹介します。 順番は、iOS, HTML5, CSS, jQuery, WordPress, .htaccess, Git です。 HTML5での美しいコードの書き方、Sass、Zen Coding、jQueryのパフォーマンス、Gitの使い方などもありますよ。
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
2012年に流行りそうなWebデザイントレンド厳選10個まとめ
2011年もあとわずかとなりましたが、今年はWebデザインに関する新しいテクニックやアイデアなどがたくさん登場した年でもありました。 海外デザインブログWeb Design Ledgerで、2012年に流行しそうなWebデザインのトレンド10個をまとめたエントリー「Web Design Trends in 2012」が公開されていたので、今回はご紹介します。 既に利用され始めている手法、トレンドから、今後利用機会が増えそうなテクニックまでまとめられています。 詳細は以下から。 大予想、2012年に流行しそうなWebデザイントレンド厳選10個まとめ 1. レスポンシブWebデザイン パソコンだけでなく、iPadなどのタブレット、iPhoneなどのスマートフォンなどスクリーンサイズに応じて、レイアウトが変化するレスポンシブWebデザイン。 ようやく「レスポンシブWebデザイン」というワードが聞
MdN Design｜総合情報サイト
Webデザイン 1-03 canvasを使ってグラフを描く canvasは、JavaScriptを用いてブラウザ上に線や図形を描画することができる。ここでは簡単なグラフを作成しながら基本的なメソッドの使い方を学んでみよう。 制作・文／藤沢立也（Suika Cube Inc.） Browser IE 9over Firefox 3.5over Safari 3.2over Chrome 2over 01 まず、絵を描くのに紙と筆が必要なようにcanvasタグで紙の部分に当たる描画領域のサイズを決める【1-1】。筆に当たるのがJavaScript。getElementByIdメソッドを使いcanvas のid を取得しgetContextメソッドで描画用のコンテキストを取得する。取得したコンテキストをctxというオブジェクトに格納しておく（オブジェクト名は何でもよい）。このctxオブジェクトに
canvasにグラフを描画する
グラフを描画するには、canvas要素に「四角形を描く」や「線を描く」等で紹介したメソッドを使って地道に書いていくか、ライブラリを使います。 ライブラリの説明はそれぞれのサイトをご覧下さい。 RGraph html5.jp マウスを乗せるとグラフを描画します。 <canvas id="drawGraphCanvas1" onmouseover="drawGraph1();" style="border: 1px solid;" width="400" height="300"> </canvas> <script language="Javascript" type="text/javascript"> function drawGraph1() { var c = document.getElementById("drawGraphCanvas1"); var context = c.g
MdN Design｜総合情報サイト
まずはCANVAS タグで描画するスペースのサイズを決める【1-1】。そのスペースにグラフを描画するための筆にあたるのがJavaScriptだ。getElementByIdメソッドを使いCANVASのidを取得、getContextメソッドで描画用のコンテキストを取得する。取得したコンテキストはctxというオブジェクトに格納（オブジェクト名は何でもかまわない）。このctxオブジェクトにグラフを描画していくことになる【1-2】。 【1-1】CANVASタグには、幅（width属性）と高さ（height属性）、範囲（描画領域）を指定する。またJavaScriptで使用するid属性も設定する。タグの間には非対応ブラウザ用の注意書きを入れておこう 【1-2】CANVASタグのidをgetElementByIdの引数に指定する。なお、getContext()の引数は現在では「2D」しか選択できないよ
棒グラフのアニメーション
［数表をアニメーションへ：image］ プログラミングの話題をひとつ・・・ 無味乾燥な数表を楽しい棒グラフのアニメーションにしようという試み。 こちらのようなアニメーションにしようというわけ。 HTML5 や CSS3 だけで出来るという。次のサイトでプログラミングコードが公開されている。興味のある方はぜひどうぞ。 Smashing Coding: “Create An Animated Bar Graph With HTML, CSS And jQuery” by Derek Mack: 23 September 2011 プログラミングはさっぱりだが、とてもクールに見えるので自分でも出来たらいいなあと思う。 ［via The Loop］ ★ →［原文を見る：Original Text］
棒グラフ（垂直） - JavaScript ライブラリー - HTML5.JP
JavaScriptから棒グラフ（垂直）をcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの棒グラフ（垂直）を柔軟に描画できます。 ダウンロード Release Date Size (byte) Download 使い方 graph_vbar_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。 <div><canvas width="400" height="300" id="sample"></canvas></div> 上記タグは次の点に注意してください。 canvas要素は、必ずdiv要素で囲んでください。 canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。 canvas要素には、必ずid属性
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
1要素1クラス、画像を一切使わずCSSで実装するiPhone UI
1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。 最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・) ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません) 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS ちなみにiPhoneで実際に見るとこんな感じに見えます↓ iPhoneで実際に見るには、以下のURLから見れます↓ (jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました) http://goo.gl/s5fV 1要素1クラスで実現する 今回のサンプル作成でこだわったのは、1要素に1クラスを指定すること
1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - Share JavaScript, HTML5 and CSS
基本的に、ひとつの要素にクラスを追加するだけでiPhone風のUIを実装できるCSSを定義したライブラリです。 さらに画像をまったく使っていないので、このCSSを読み込むだけですぐにiPhone風UIが実装できます。 ※iPhoneおよびSafariで最適化されています。 <article> <header id="header"> <div class="toolbarBox"> <h1 class="toolbar">CSS3 UIテンプレート</h1> <nav> <ul> <li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li> <li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li> </ul> </nav> <!-- /
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
Web Storageによるテキストデータの保存(2/6):JavaScriptによるHTML5プログラミング入門 - libro
では、script.jsにスクリプトを作成しましょう。以下に、セッションストレージを使った場合と、ローカルストレージを使った場合の２通りのリストを掲載しておきます。いずれも、テキストを書いて「保存」ボタンを押すとストレージに値が保管され、「読み込み」ボタンを押すと保存した値をロードして表示します。 実際に両者を使って、動作の違いを確かめてみましょう。セッションストレージを使った場合、ブラウザを閉じると、もう値は消えてしまいます。次にブラウザを起動し、「読み込み」ボタンを押しても値は表示されません。 ローカルストレージを使った場合、ブラウザを終了してからまた起動してもちゃんと値がロードされます。ただし、値はブラウザごとに保管されますから、ローカルボリュームに保管したといっても、別のブラウザから読み込むことはできません。使えるのは、あくまで保存したブラウザだけです。 では、データの読み書きをし
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
SVGは普及する。WebデザイナーはCSSとともにSVGが必須科目に
Internet Explorer 9では、Webブラウザ上にベクター形式で画像を描画できるSVG（Scalable Vector Graphics）のサポートが表明されています。ITproの記事「IE9の登場で画像フォーマットの本命に浮上するSVG」では、IE9がSVGをサポートすることでSVGの普及が始まるのではないかと予想しています。同意します。 SVGはHTML、CSS、JavaScriptと並ぶWebの要素に SVGは2001年にバージョン1.0、2003年にバージョン1.1がW3Cの勧告として策定されました。しかしマイクロソフトはIE6、IE7、IE8とずっとSVGに対応せず、一方でSVG策定以前から同社などが推進していたVML（Vector Markup Language）と呼ばれるベクター形式の言語を実装してきました。 Webブラウザで最大シェアを持つIEで使えないSVGは
第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
【第22回 HTML5とか勉強会レポート】 Processing.js、SVG、WebGL。HTML5周辺のグラフィック関連技術
HTML5による最新Webアプリ 2011年10月26日、品川グランドセントラルタワーのマイクロソフト品川本社にて、「第22回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会だ。今回のテーマは「グラフィック関連API」。当日の様子をお伝えしよう。 Processing.jsってなんだ？ まず、ゼロベースの田中氏（@dotimpact）からプレゼンがスタートした。田中氏は美術大学で非常勤講師をしたり、Processingの入門書執筆なども手掛けている。 Processingとは 田中氏のプレゼンは、Processingの紹介から始まった。 田中氏の＠ITでのProcessingの記事「Processingの対話式スケッチプログラミングで遊ぼう」も参照いただきたい。 Processingは2001年、MITメディア
iPadでHTML5でWebアプリを作ってみました。
こんばんは。LatLongLabの河合（@inuro）です。 ようやくiPadが日本でも発売されましたね。入手された方もたくさんいらっしゃることかと思います。 ヤフーではこのiPad国内発売にタイミングを合わせ、Yahoo!ラボで「yubichiz」というiPad専用の地図Webアプリを公開しました。 Yahoo!ラボ - yubichiz（ゆびちず） 詳しい機能はリンク先ページを見ていただくとして、 地図に書かれた文字（大塚家具、とか紀伊國屋書店、とか）をタップするだけでその店舗の詳細情報が表示されます 地図を指でなぞるだけで、なぞったラインの距離を測定できます 同様に地図を指でなぞるだけで、道沿いのお店を検索できます といった特徴があります。 またyubichizは、App Storeからダウンロードするいわゆる「アプリ」ではなく、HTML5を用いてiPadのSafari上で動作するW
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
WebRTC
