『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

8月17日、HTML5開発者コミュニティhtml5-developers-jp主催の「第9回 HTML5とか勉強会」が開催されました。本稿では、本勉強会の録画とともにレポートします。 今回は普段とは趣向を変え、前半には本勉強会スタッフが開発したHTML5によるデモアプリの紹介を、後半はLT大会ということで5名のスピーカーの方々にお話いただきました。 なお、本勉強会では初の、8月初旬に移転したばかりのGoogleの東京オフィス(六本木ヒルズ)をお借りさせていただきました[1]。 1週間日めくりお絵かき日記 最初に、スタッフの一條さんより、canvas API, localStorage, CSS3を活用した絵日記デモが紹介されました。 デモでは、canvasを用いフリーハンドで描いた絵日記をlocalStorageに保存し、日めくりで確認できることが示されました。canvasの装飾をCSS
パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーをjQueryとCSS3で実装するチュートリアルを紹介します。 実装 実装方法はポイントを説明します。 HTML 各パネルは「sl-slide」のclassを持ったdiv要素で実装されており、カラーは「sl-slide-dark」で管理されています。 <section id="sl-slider" class="sl-slider"> <div class="sl-slide"> <div class="sl-deco" data-icon="6"></div> <h2>A bene placito</h2> <blockquote> <p>You have just dined, and however scrupulously the slaughterhouse is conceale
はじめに はじめまして。株式会社ピクセルグリッドの外村です。今回この連載では、マークアップエンジニアやデザイナを対象に、『jsdo.it -Share JavaScript,HTML5 and CSS-』(以下、jsdo.it)というサイトを使ってユーザ参加型のJavaScriptやCSS3の学習コンテンツを提供していきます。今回は初回ですので、jsdo.itというサイトの概要や連載に向けての事前準備を解説します。 jsdo.itとは jsdo.itというのは2010年に株式会社カヤックがリリースしたWebサービスで、Web上でHTML5、CSS、JavaScriptを書いてその場で実行することができます。書いたコードは誰でも見ることができ、トップページに並んでいる人気のコードを見るだけでも楽しむことができます。 また、単にコードを書いたり人が書いたコードを見たりするだけでなく、他にも
「DevDocs」はHTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイトです。MacにDashというドキュメントを高速に横断検索できるツールがありますが、それに似たサービスですね。オンラインで検索できるので、便利です。検索するとリアルタイムに検索結果が絞りこまれ、必要なドキュメントの内容が表示されます。 使うには、まずDevDocsへアクセスしましょう。左側のメニューに検索対象の言語が並んでいます。 プルダウンを開くとカテゴリごとにドキュメントが整理されています。左上の検索ボックスから対象のタグやメソッドを入力すると絞り込むことができますよ。高速に検索できるので、必要な情報がすぐに手に入るのがうれしいですね。ウェブ開発をしている方はドキュメントを読むことが頻繁にあると思います。DevDocsをブックマークしておくと、いざというときに便利ですよ。 DevDocs
Move the Web Forward You can make the web as awesome as you want it to be. You love web standards. You want to give back to the community. Curious about where to start? We're here to help. Whether you're a talented web developer, web-slinging since the days of tables and font tags, or you're a hobbyist hacker, there are a number ways for you to give back. Below, we list some of the ways that anyon
帳票・レポート 日本仕様の帳票開発に必要な機能を搭載したコンポーネント ActiveReports for .NET ActiveReportsJS 表計算・グリッド Excel風のビューと表計算機能を実現するUIコンポーネント SPREAD for Windows Forms SPREAD for ASP.NET SPREAD for WPF SpreadJS 入力支援 快適な入力を実現する日本仕様入力コンポーネントセット InputManPlus for Windows Forms InputManPlus for ASP.NET InputManPlus for WPF InputManJS 多段明細 1レコード複数行&日付表示に 最適なグリッドコンポーネント MultiRowPlus for Windows Forms 戻る コンポーネントセット Visual Studioで利用す
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
The Expressive Web is an Adobe-curated resource website for the advocacy, support, and advancement of HTML5 and CSS3 web development.Copyright © 2011 Adobe Systems incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of User and Online Privacy Policy. Resources About Adobe and HTML5
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
新年、あけましておめでとうございます。 HTML5開発者コミュニティ、html5j.orgを運営している白石俊平です。 この記事では、「2013年、Webがこうなったら面白い」というテーマで、今年のWebがどう変わっていくか、予想めいたことを執筆する機会をいただきました。タイトルに「面白い」と含まれていることからもお分かりの通り、真剣に業界を予想してみるというものでもなく、少し力を抜いた雰囲気で、発展の著しいWebの未来をあれこれ述べてみたいと思います。どうか読者のみなさんも、リラックスしてお読みください。 とはいえ、現在のWebは広く深く、3次元的に発展している状況で、どのような切り口で述べるべきか悩みました。悩んだ挙句、ここでは以下の3つの切り口から見ていきたいと思います。 注目に値する最先端仕様 プラットフォームとしてのWeb Web制作・開発はどう変わるか 注目に値する最先端仕様
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。 HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 <form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> <
JavaScriptのスマホ対応時に知らないと損する16のコト:スマホ向けサイト制作で泣かないための秘伝ノウハウ(3)(1/3 ページ) スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS/機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit(クロスフィット)の開発・販売や、実機での
ダウンロードできるデモファイル ローカル環境でデモファイルを見る時は、Chromeでは「file://」で読み込むとフレームレートの変更する時のバグがあるため動作しません。オンラインかFirefoxでご覧ください。 実装は、詳しいドキュメントが公開されていませんが、コードを見ると簡単にできそうです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="charlie.js"></script> Step 2: HTML まずは、動画をvideo要素で配置。 <video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" muted> <source id="mp4" src="http://media.w3
Webアニメーションを高速化するために知っておくべき10のこと(後編) 斉藤 祐也(株式会社リッチメディア) 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く