With so many exciting things happening at all levels of the web “stack”, we wanted to create a single place where we can share everything we are working on with the community to improve what is possible on the web and simplify how you work with HTML, CSS, SVG and JavaScript. アドビのHTML5関連の新技術として、いま策定中のCSS Regions、CSS Shards、CSS Shadersや、そしてアドビが支援しているオープンソースのCordva(PhoneGap)、jQuery Mobile、WebKit、そしてD
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
昨年11月にjQuery Mobile 1.0として最初の正式版が登場してからわずか5カ月。最初の大きなバージョンアップとなるjQuery Mobile 1.1.0がリリースされました。 jQuery Mobileは、HTML5のタグを書くだけでプログラミングをせずにモバイルアプリケーションが作れるJavaScriptのフレームワーク。開発されたアプリケーションは、iOS、Android、WebOS、Windows Moblie、Symbianなどさまざまなモバイルプラットフォームで動作します。 jQuery Mobile 1.1では、画面上部もしくは下部につねに表示されるFixed Toolar(固定ツールバー)のちらつきがなくなった点、画面遷移がよりスムーズになった点などの改善が行われています。 固定ツールバーがCSSベースに モバイルデバイスのユーザーインターフェイスとして、画面上部
岩手県大槌町は、東日本大震災により最も大きな被害を受けた自治体の一つだ。震災前の人口約1万6000人のうち、1割近くが死亡もしくは行方不明。6割の家屋が被災し、6000人以上が避難。町役場そのものが津波の直撃を受け、町長を含む職員の約4分の1を失った。 もちろん町の情報システムもサーバーも全壊した。現在、小学校の校庭に設置されたプレハブ住宅が仮設の町役場になっている。 その大槌町のホームページが2012年3月1日、新しくなった。このホームページには、亡くなった町の職員、大槌町出身で東京で働いている技術者、震災後に復興を支援したいと東京から応募して大槌町の職員になった技術者の思いが込められている。その物語を紹介したい。 大槌町出身の技術者がボランティアで復旧 庁舎を壊滅させた津波は大槌町のホームページを置いていたサーバーも水没し、震災後、大槌町のホームページは消滅してしまった。だが、大槌町は
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか? デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。 今Web上で配布されて利用可能なCSS Framworkが非常に増えて
こんな僻地で退職エントリーもどうかと思うけど。 5年間勤めたサイボウズを本日2/29で退職しました。最終出社日は2/24だったけど。 この3年くらいずっとkintoneという製品を作ってきたのですが、UI設計やクライアントサイドどうするな話など、自分が初めてやりたいようにできた(というと語弊があるけど)のでとても思い入れが大きい製品です。 まだ昨年の11月に販売されたばかりで機能数も少ないですが、「誰でも早く作れる」というコンセプトにおいてはかなり自信を持って作っていましたし、お手軽でいい製品だと思います。 Excelの管理めんどくさいからWebで共有したいなーとか、5人くらいでサクッとタスクフロー回せるアプリが欲しい!という方がいらっしゃいましたらぜひお試しください(お試し1ヶ月無料です)! 毎月リリースという結構なリリースサイクルの中、毎月とんでもない量のタスクが積まれる中、それでも楽
JSer.info #57 - JavaScriptのデザインパターンについて書かれたEssential JavaScript Design Patterns For Beginnersがアップデートされたようです。どのへんが更新されたかについての記事はまだかかれてないので、gitのログを確認するしかないです。(多分そのうちEssential JavaScript And jQuery Design Patterns – A Free New Bookあたりに更新内容が書かれそうな気がします) addyosmani/essential-js-design-patterns - GitHub HTML5ROCKSのリニューアルにともなってAppward’s Field Guide to Web Applicationsという電子書籍風になってるドキュメントが公開されています。こちらもかなり量
CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開 CSSはこれまで変数が使えなかったため、例えばページ内の複数箇所を同じ色で揃えようとしたときには、同じカラーコードをCSSの複数箇所に書き込む必要があり、色に変更があるたびにすべての箇所を確実に修正しなければなりませんでした。 CSS Variables Module Level 1は、CSSに変数を持ち込むことによって、変数の値を買い換えるだけで複数箇所のカラーコードが自動的に書き換わる、といったことを可能にします。 色のコードを簡単に使いまわせる 変数を記述するときには「data-変数名」と記述します。例えば変数名が「var」のときには、CSSファイル内で「data-var」と記述します。接頭辞が「data-」なのは、HTML5の「Custom Data Attribute」と
2012年02月09日 13時58分更新 文●斉藤祐也/<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
この特集では、現在利用者が急増している2大スマートフォン、iPhoneおよびAndroid端末向けのアプリケーションを作ります。と言っても、それぞれのOSにネイティブなアプリケーションではなく、iPhone/Androidが搭載するWebブラウザの上で動くWebアプリケーションです。具体的には、HTMLおよびCSSの最新バージョンであるHTML5とCSS3を使ってiPhone/Androidアプリケーションを作成する方法、およびその際のポイントを説明します*1。 iPhone/AndroidならHTML5とCSS3でアプリを作れる Webアプリケーションは、OSやプラットフォームに依存しないと言われています。確かに、Webアプリケーションの動作や見栄えは、OSやプラットフォームにはあまり依存しません。しかし、Webブラウザの種類やバージョンに強く依存します。異なるWebブラウザで同じように
Six months ago we open-sourced Twitter Bootstrap, an extensive front-end toolkit for developing web sites and applications. Woohoo! Twitter Bootstrap, an open-sourced CSS/HTML framework from myself and @fat, just went live: dev.twitter.com/blog/bootstrap… #kaboom— Mark Otto (@mdo) August 19, 2011 Since then, Bootstrap has grown to be one of the most popular projects on GitHub, the largest open sou
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
JSer.info #50 - 今週は年末だったからか振り返り系の記事が多かったので、新しい記事は少なめ。 Google Documentの仕組みについての話(Google Documentの入力欄を僕達はまだ知らない。)Google Documentで公開されていて、どういうふうに調べていったかも書かれているので結構興味深い感じです。 impress.jsというプレゼンスライドを表示するHTML,JS,CSSなフレームワークが結構面白い感じでPrezisのようなぐりぐり動く感じのHTMLスライドが作成できます。まだオーサリングツールなどは無いので手動で配置などを考えないとダメですが、landslideのテーマの仕組みを利用してlandslide-theme / impress、自動で適当な配置をやっても面白い感じになります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く