［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に 米アドビは24日（日本時間24日深夜）、サンフランシスコでイベント「Create the Web」を開催。CSSやJavaScriptを使ったアニメーション作成、画面の大きさによって動的にレイアウトが変化するレスポンシブなWebデザイン、複数のモバイルデバイスへの対応、HTML5やCSS3に対応したコーディングなど、最新のWeb技術に対応した開発を支援する新ツール群「Adobe Edge Tools & Services」を発表しました。 発表された新ツールやサービスを日本語で解説するWebサイトもすでに公開されています。サンフランシスコで開催されたイベントの内容を、ダイジェストで紹介しましょう。 Adobe
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
CSS3で作るスマートフォン用ページ
スマートフォンサイトの基本のマークアップ スマートフォンサイトは、特に理由がない限りHTML5とCSS3で制作するのが一般的です。スマートフォンに搭載されているブラウザは、HTML5やCSS3の対応が比較的進んでいるため、PCサイトのように古いブラウザを意識しながら制作する必要はありません。これまでの総まとめとして、新しい技術を試すのにちょうど良いスマートフォンサイトを作ってみましょう。 基本のHTML5テンプレート ベースとなるマークアップは次の通りです。スマートフォンならではの記述がありますので、順を追って説明していきます。 ［リスト01］スマホ用のHTML5テンプレート <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
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>
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+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
[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の要素のスタイリング
HTML5/CSS3に関する便利ツールやチーとシート、リソース２５:phpspot開発日誌
25 Useful HTML5/CSS3 Tools, Cheat Sheets and Resources HTML5/CSS3に関する便利ツールやチーとシート、リソース２５。 HTML5やCSS3に関する勉強用や効率化に役立ちそうなエントリのご紹介です。 以下に一部をご紹介。 CSS3 Selectors Test CSS3のどのセレクタが効いているかテスト Web Browser CSS Support ブラウザごとのCSS対応状況をテーブルで表示 HTML5 Security Cheatsheet HTML5に関するセキュリティのチーとシート HTML5 Gallery HTML5で書かれたいい感じのサイトギャラリー HTML5 CheatSheet HTML5のタグのチートシート CSS3 Please! クロスブラウザでCSS3を動かせるためのプロパティジェネレーター CSS3
TechCrunch | Startup and Technology News
Infra.Market, an Indian startup that helps construction and real estate firms procure materials, has raised $50M from MARS Unicorn Fund.
iPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組み色々:phpspot開発日誌
iPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組み色々 2010年10月21日- HTML5/CSS3やJavaScript、Flashを使ってiPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組みを色々と調査してみました。 スマートフォンアプリを作るのであれば効率的にクロスプラットフォーム上で動く物で作りたい、というのは開発者の誰もが思うことではないでしょうか？ そんな技術の現時点でのまとめ、更にHTML5によるモバイルアプリ作成のフレームワークについても軽くまとめてみました。 Titanium Mobile HTML5/CSS3やJavaScriptベース→Native並の速度のiPhoneアプリ変換。javascriptをベースとしてアプリ開発を行うスタイルを実現する仕組み naoyaさんの「Titani
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
http://www.html5canvastutorials.com/
実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins
グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイントとは