2,980円、出版社：翔泳社、著：Wynn Netherland / Nathan Weizenbaum / Chris Eppstein / Brandon Mathis
HTML5/CSS3のニュースやTIPSなどのまとめ (2014年4月16日)
2,980円、出版社：翔泳社、著：Wynn Netherland / Nathan Weizenbaum / Chris Eppstein / Brandon Mathis
html5shiv.jsとselectivizr.js導入でIE8以下のレイアウトずれから解放…されるかもしれない - euphoLab
最近またバリバリとコーディングしているわけですが、どうしようもない凡ミスから意外な発見がありました。 HTML5でコーディングして、html5shiv.jsとselectivizr.jsやPIE.htcを使えば、IE7だろうが8だろうが、IEの面倒くさいレイアウトずれに悩まされなくてすむ！ということです。 はじめの凡ミス 最新のブラウザだけ対応すればいいよ、なーんて仕事はありません。だいたいIE7や6から対応です。でもHTML5でコーディングしちゃいます。HTML5は古いIEに対応してませんが、そのあたりはこちらの記事参照【[IEよ滅べ！の意味がわからない方] いざ、爆速と美麗のWWWへ！IEがダメな理由教えます】。 HTML5を古いIEに対応させるためには、html5shiv.jsというファイルを使います。これを入れると<header>や<footer>など、HTML5から出てきたタグを
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
HTML5 | MDN
HTML5 は HTML で定義されている最新の標準仕様の名称です。この用語は、 2 つの異なる概念を表しています。これは HTML 言語の新しいバージョンであり、新しい要素、属性、動作、およびより多彩でパワフルなウェブサイトやアプリケーションを構築することができるより大きな一連の技術でもあります。このセットは HTML5 & friends と呼ばれることがあり、よく HTML5 と短縮されます。 このリファレンスは、すべてのオープンウェブ開発者に便利になるように設計されており、機能に基づいていくつかのグループに分類された数多くの HTML5 の技術についてのリソースにリンクしています。 Semantics: そのコンテンツが何であるかをよりはっきりと表現することを可能にします。 Connectivity: 新しい革新的な方法でサーバーと通信することができます。 Offline and
HTML5の「Web Workers API」を，別ファイルを使わずページ単体で利用するサンプル （createObjectURLがあれば，1ファイルでマルチスレッドのJSコーディングが可能） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ HTML5の「Web Workers API」（非同期処理の仕組み）を，外部スクリプトを使わずに，１ファイルだけで実行するサンプルコード。 ワンライナーで（たった１行で）Workerスレッドを起動できる。 簡単に書くとこんな感じ。 // スレッド内容を別ファイルに分離しなくてよい new Worker( window.URL.createObjectURL( new Blob([ elem.innerHTML ],{type:"text/javascript"}) ) ); 以下は解説。 Web Workers APIは，JavaScriptでマルチスレッド・プログラミングをするための仕組み。 正確に言えば，UIとは別に裏側で，重い処理を非同期で実行してくれるAPI。 Workerというオブジェクトに「外部スクリプト・ファイルのURL」を渡せば
not found | wixblog-ja
We can’t find the page you’re looking for. Check the URL, or head back home.
Web プログラマー向け｜HTML5 テンプレートジェネレーター 3 選 - Naifix
HTML をゼロからプログラミングしていくのが手間に感じていないでしょうか。 そんなときは、HTML5 のページを一瞬で生成できるジェネレーターを使うと便利です。ジェネレーターで生成したあと、自分でよく使うスニペットとして保存しておけば時間を短縮できますね。 HTML5 テンプレートジェネレーターを 3 つご紹介します。 HTML Code Generator｜Quackit 「HTML Code Generator」は、title や meta description をあらかじめ入力して HTML5 テンプレートを生成できます。 CSS がインラインで吐き出されるので、ファーストビューの表示を高速化したい場合はよいかもしれません。必要に応じて外部ファイルに変更しましょう。 実際にこのようなコードが生成されます。 <!DOCTYPE html> <html> <head> <!-- HT
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法：HTML5時代の「新しいセキュリティ・エチケット」（3）（1/2 ページ） 連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。前回は、同一オリジンポリシーを突破する攻撃の代表的事例であるXSSについて、特にDOM based XSSと呼ばれるものについて解説しました。今回はその続きとして、XMLHttpRequestによるXSSを解説します。 XHR Level 2によるリモートからのコード挿入によるXSS 従来、XMLHttpRequest（以下、XHR）は、表示しているドキュメントと同じオリジン（オリジンについては第1回を参照）としか通信できませんでしたが、現在の主要なブラウザーではXHR Level 2と呼ばれる実装により、オリジンを超えて通信することが可能になっています。 これは、Jav
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ - ICS MEDIA
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ 「インタラクティブコンテンツをワンソースでクロスプラットフォームに対応させたい」、それはフロントエンドのデベロッパーであれば誰もが望むことではないでしょうか。一昔前はAdobe Flashが「Open Screen Project」と題して一歩手前まで実現していましたが、iPhoneからFlashを締め出そうとするAppleの強硬な姿勢によって頓挫することになりました。 尾野さん(しっぽさん)からの勧めもあり調べたのですが、「OpenFL」（オープンエフエル）というテクノロジーはさまざまな形式にインタラクティブコンテンツを出力できます。つまりOpenFLを使えばワンソースでクロスプラットフォームを実現できるのです。今回はOpenFLからHTML5とFlashを出力することによってクロス
OpenFL - Creative expression for desktop, mobile, web and console platforms
Desktop, mobile, and web. From enterprise applications to best-selling games, your creativity can be expressed with OpenFL. Publish to native C++ on desktops, phones, or tablets, or deploy to the web with JS and WebGL. Do it all using one seamless toolset. Get Started » Download » Familiar. Easy-to-use. OpenFL implements the Flash Player API, but goes everywhere that browser plug-ins cannot. Use a
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
ActLink Co,.Ltd | Webサイト制作、webサイトデザイン、SEO対策ならアクトリンク株式会社へ
ホームページ制作のデザインや、アクセス解析を含めたSEO対策、ECサイトと言われるオンラインショッピング、ブログや日記などのCMS、そして携帯コンテンツからデータベースまで、機能したデザインを提供するホームページ会社です。
Pinterest風グリッドレイアウトを作ってみよう (1/4) - ＠IT
Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と
HTML5、CSS3だけじゃない！ブラウザで実装できるスゴい技術14選 【WebGL】 | らふらく^^ ~ブログで飯を食う~
2 CSSだけでかわいいボタン最近のトレンドともいえる画像を使わずにCSSだけでリッチな素材をつくった作品。 スマホサイトでは、読み込みを速くするためにこうした技術が必要になってくるので、ぜひ覚えたい所です。 ハートの部分は難しそうだなー。 かわいいふきだし 3 CSSだけでゲーム！CSSだけでシューティングゲームがつくれてしまうという驚きを与えてくれる作品。 :hover, :cehecked をうまく使っています。 CSS3 OF THE DEAD 4 CSSでワニワニパニックCSSだけでワニワニパニックがつくれてしまうんですね！驚きです。 ゲームセンターにいる感覚を味わせてくれます。 CSS PANIC 5 実写と見間違う桜桜が舞う美しすぎるアニメーションです。 動画と見分けがつかないくらいにキレイ！ WebGLを使っているようです。 Amazing Sakura 6 「デザインあ」
Liveweave HTMLエディター
Initializing... Liveweave expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward build Tools expand_more restart_alt Load base template post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format JavaScript library_add Library expand_more AAlgolia JS Animate CSS Apex Charts JS BBulma C
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Initializr - HTML5 project - template
HTML5 Boilerplate: The web’s most popular front-end template
10 Best Resources To Learn HTML5
IDEA * IDEA
