Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログCSSのフォントの種類を指定する際に使用する「Font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントなどの技術の変化などで日々変わっています。 今回は最新のトレンドも踏まえた上で基本的なFont−familyの指定方法を再定義してみたいと思います。
CSSのmix-blend-modeで実現するドローイング表現 - ICS MEDIA
CSSはPhotoshopライクなグラフィカルなブレンドモードを搭載しています。デザイナーやモーションクリエイターにとっては直感的に利用しやすいのではないでしょうか。しかし、CSSのブレンドモードは執筆時点（2015年9月現在）はMicrosoft EdgeやInternet Explorerが対応していないのがデメリットです（追記：2022年現在はほぼすべてのブラウザで利用できます）。 Canvas要素は旧式ブラウザを含め多くのブラウザで利用できるものの、Canvas要素はブレンドモードの種類が少ないという制約があります。ここで挙げたように、それぞれのテクノロジーには一長一短があるのでコンテンツに応じて最適な手段を検討するのが現実解となります。 デモ作成で選んだのはCSS3のブレンドモード デモ作成にあたり2つのレイヤーを作成しました。1つはカラフルな背景のレイヤー、もう1つはドローイン
[69-12] Canvasをサイトの背景に使おう
[69-12] Canvasをサイトの背景に使おう 最終更新日：2019年02月06日 （初回投稿日：2015年03月20日） ここまで Canvasの基本をいろいろやってみましたが、実際に「Canvasを何に使うか」を考えると、デザイナー的にはサイトの背景に使ってみたいですよね。やっぱり。 これってウィンドウサイズと Canvasサイズを一致させて、一番下に敷くことですよね。それさえできればこっちのもんだ！と試行錯誤した結果をご覧ください。 本日のINDEX Canvasのサイズをウィンドウサイズと一致させる（サンプル1） HTMLとCSSの準備 Canvasにウィンドウサイズを取得する Canvasへの描画 CanvasをjavaScriptで生成する方法（サンプル2） HTMLとCSSの準備 javaScriptで新しくCanvasとdivを作る DOMとノード 新しく作ったdivの
![[69-12] Canvasをサイトの背景に使おう](https://cdn-ak-scissors.b.st-hatena.com/image/square/9fd4d1be46d0da15be3c92c90ad3703dc1204edf/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-74.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F150117_1.jpg)
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
東京メトロリアルタイムシミュレーションwebアプリ metrogram
NFC (9) Arduino (13) Kinect (5) Craft (6) App (1) Windows Phone (1) Flash (4) Gainer (1) HTML5 (14) Physical Computing (5) Windows8 (4) memo (32) Award (26) Bluetooth (4) Connective Design (2) DIGITAL DIVERZ (3) DIGITAL FRAGMENTS (8) DeepLearning (2) Device (8) FirefoxOS (2) Hack (3) LINE Creators Market (1) MachineLearning (3) Mixed Reality (1) Multi Screen (1) NUI (2) Node.js (14) PerC (1) SXSW
metrogram3D
metrogramは東京の地下鉄に関するデータ（路線/位置/時刻表などの情報）をもとに、普段見る事の出来ない人と電車の流れを視覚的にとらえるプロジェクトです。 ※ 当コンテンツは、WebGLという技術を用いております。最新のブラウザ環境でご覧ください。 metrogram is a Metro-based information visualized project. Including the metro lines, location and so on that normally the object which can not be visualized such as people and metro flow. ※ This work is using the WebGL web technology. Please use the latest version of your
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
Canvasと戯れる 第1話「画像の切り貼りでアニメーションを作る」DevJam
今年は月1でこのブログで記事を書くことを目標にしました、新人ディベロッパーのtsukasaです。 最近ちょくちょく案件でcanvasをいじることが多いので、練習がてら小出しにプラグイン化して公開することにしました。 先日公開されたキャンペーンサイト「YOUR ANA – もっとあなたのビジネスクラスへ。」でも使われています。 第一弾はCanvasSplitMovie、CanvasFilmMovie、SimpleWinterSnowです。それぞれのプラグインはいたってシンプルな描画だけですが、cssアニメーション等と組み合わせるとそれなりに表現の幅が出るかもしれません。 CanvasSplitMovie、CanvasFilmMovieはcanvasの描画の速さを活かして、ムービーをスプライトで分割した画像を高速で描き直すことでスプリットムービーを実現しています。 また、SimpleWinte
1年間で50個も作ったパズル・アクション・シューティングゲームなどがプレイし放題
面白いゲームを作るためにゲーム開発に力を注いでいたABAさんが、1年かけて作った50個ものゲームを公開しています。ゲームはブラウザで遊べるFlash＆HTML5のミニゲームで、レトロな感じがあふれているだけでなく、ゲーム内容が一癖も二癖もあるとのことなので、実際に少しずつプレイしてみました。 I have created 50 games in 2014 - ABA Games http://www.asahi-net.or.jp/~cs8k-cyu/blog/2014/12/12/games-in-2014/ ◆01：SCAFFOLD NOW SCAFFOLD NOWはパズルとアクションが一体になったゲーム。キーボードで次々と出てくるブロックを落として足場にし、黄色いキャラクターを操作して上へ上へと登っていきます。ブロックにつぶされたり、画面の一番下に当たってしまうとゲームオーバー。 ◆
［速報］HTML5、ついにW3Cの勧告となる
W3Cが発表したプレスリリース（日本語）の冒頭を引用します。 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の
Takazudolog - 地獄のvideo／audio要素
video／audioにハマりまくったメモ。作ってたのは、Flashでやってたような、複数の動画ファイルを、途中の選択肢によって色々変えながら見せるというようなインタラクティブムービーみたいなの。なので、ハードにvideoを使いまくるという意味で、普通に一本動画を見せるという用途よりももっと色々する必要があったわけだけれども、そうでない場合でも、videoが色々厄介であるということは知っておく必要があると思う。 とりあえず、videoやaudioを使いたい人は、以下の2ページを熟読せよ。 プラグインは要らない！音声／動画対応したHTML5 - audio／video要素 | Think IT Video - Dive Into HTML5 videoのイベントは HTML5 Video を眺めてるとなんとなく分かる。 audioライブラリ試してうまくいったやつはこれ。 SoundJS vi
srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
Foundation for Emails | A Responsive Email Framework from ZURB
Foundation for Emails 2 Quickly create responsive HTML emails that work. Even on Outlook. Get Started (Formerly Ink) 5.3k GitHub stars @ZURBfoundation Making Emails Suck Less We know building HTML emails is hard, especially responsive emails. That's why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Use Foundation for Emails to spend less time coding
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。 しかし、そのやり方だとトラブルが多いんです、なぜか。 ブレイクポイントとかで揉めたりすることが多いです。 早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。 allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。 実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。 最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせ
HTML5の3D表現を身につけよう！簡単なJSではじめるWebGL版Away3D入門 - ICS MEDIA
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ（HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
blog.kageyama — 東京てら子 vol.20 でお話してきた話
[2013/09/03] 9/1 に渋谷で行われた東京てら子でスマートフォンをコントローラーにして Web サイトを操作するという話をしてきました。 今回は気まぐれでニートなデブハゲではなく ちゃんとフリーランスの景山さんとして出かけてきました。 ちょっとここ最近バタバタしていて、 サンプルをあげるサーバーを用意し忘れて 結局まだ用意出来ていないのですが 技術的な細かいことを解説するときにでも改めて紹介できたらと思います。 というわけで発表で使ったスライドとその内容を 書いていこうと思います。 入力デバイスの多様化最近は Kinect や LeapMotion と言った マウスやキーボード以外の入力デバイスが話題になることが多いですね。 また、メーカー品の Windows8 搭載 PC でも ディスプレイがタッチパネルだったりと ユーザーが今までとは違った動作による入力ができるようになって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いけだともこのマスクをずらす
Perfume 5th Tour 2014「ぐるんぐるん」
尻時計うぉーる