サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
CSS3で採用されるプロパティを記述する際に、先行実装したブラウザ用としてベンダープレフィックス（プロパティに加える接頭辞）を使用することになります。主なブラウザ用は、「-webkit-」、「-moz-」、「-o-」、「-ms-」となり、これにベンダープレフィックス無しのものを加えて計5種類のCSSを記述することになります。機械的に書いていけばよいとはいえ、けっこう面倒な作業です。この煩わしさから解放してくれるのが、「prefixfree.js」です。これを利用すると、アクセスしてきたブラウザを判別して、それ用のベンダープレフィックスのみを、必要なプロパティ部分に自動で追加してくれます。 「prefixfree.js」をテストするため用意したのは、「HTML5で廃止された<marquee>タグのかわりにCSS3でマーキー」ページで使用したCSS3animationで動くマーキーのサンプル
はてなブログでは、本日までに以下の改善および機能追加を行いました。 ページ表示の高速化はてなフォトライフの利用量を編集サイドバーに表示楽天の広告を最適化させるHTMLタグに対応 ページ表示の高速化 ページに読み込まれるスクリプトの配置など、ブログの表示に関する複数の改善を行いました。これにより、ブログを表示する速度が、平均で2倍程度高速化されています。 なお、JavaScriptやCSSの読み込み方法を変更したため、自作のスクリプトやデザインCSSが想定通りに動作しなくなることがあるかもしれません。このうちスクリプトについては記事末の付記をお読みください。不明点については 問い合わせフォーム よりお問い合わせください。はてなフォトライフの利用量を編集サイドバーに表示 編集サイドバーの「写真を投稿」タブに、画像の投稿先となるウェブアルバムサービスはてなフォトライフ のファイル利用量が
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
LEADING BRANDS TO DIGITAL WE ARE A DATA-DRIVEN MARKETING AGENCY FICCはデータに基づく論理的なマーケティングを提供するデジタルエージェンシーです。 消費者に価値あるコンテンツと体験を届けるため、戦略立案から施策実行まで一貫して提供しています。
iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0）だそうです…UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに Webブラウジングをしている
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
[ This article is forWindows 8.x andWindows Phone 8.x developers writingWindows Runtime apps. If you’re developing forWindows 10, see the latest documentation ] TheWindows Runtime apps usingJavaScript platform allows you tobuild apps withHTML,CSS, andJavaScript. While a lot ofWindows Runtime app usingJavaScriptprogramming is identical to writing markup and code for a website,Windows
blingbling DSLはJavaScriptでHTML構造をレンダリングするDSLです。HTMLでは表示（HTML）とデザイン（スタイルシート）、そしてプログラミング（JavaScript）が混在して動作します。それらを全て一つにまとめあげ、高速に動作するDSLがblingblin DSLです。 デモのコードです。Hello Worldと表示されています。HTMLソースです。出力の記述はありません。 出力はJavaScriptで行っています。JavaScriptがそのままHTML構造と出力内容を兼ねています。 出力されたHTML構造です。一つ前のコードの内容が出力されています。blingblin DSLにはblingblingHTMLとblingblingCSSの二種類があります。blingblingCSSを使えばより可読性の高い構造化されたスタイル記述ができるでしょう。
ここでは、デフォルトのブックマークである「iPhone用Yahoo!Japan」を取り上げます。 今回取り上げるiPhone用Yahoo!Japanの特徴 実際のiPhone用Yahoo!Japanは、Javascriptによるニュースのスクロールや、CSSでの画像のレイヤー構築など複雑な処理がありますが、 今回はこのうちの一部として以下を取り上げます。iPhoneを回転させても拡大・縮小しないiPhone用Safariで文字を拡大させないiPhone回転ごとに処理を行うiPhone縦持ち・横持ち用のスタイルを使い分ける 結果とソース 上記のようにほぼ再現することが出来ました。（実際のページはこちら）ソースは以下です。 スケールで縛りを設け、回転時に拡大･縮小を防ぐ 回転時に処理を行う 回転時のイベントを設定 要点 ポイントは以下です。 initial-scale=1, minim
Sometimes you should ask yourself, why you need to do the same thing everyday when there’s a new bridge to shorten the path. Think of web frameworks as bridges that will help you code faster and easier. Did you notice I didn’t include the word “better” in the last sentence? Faster and easier doesn’t always mean better, but we will get to that later. First things first, so what is a framework reall
Sunlightは30以上の言語に対応したWebベースのコードハイライトライブラリ。 SunlightはJavaScript/CSS製のフリーウェア（ライセンスはWTFPL）。ブログやWebサイトでソースコードを載せたいと思うことは多い。だがただ貼付けただけではとても見づらいものだ。やはりソースコードはハイライト処理されている方が良い。PHPコード 既に幾つものハイライト処理を行うライブラリがあるが、対応している言語の数、機能においてお勧めできるのがSunlightだ。 Sunlightが対応する言語はアセンブラ、ActionScript、Bash、Brainfuck、C/C++、C#、CSS、Diff、DOS batch、Erlang、Haskell、Apache設定ファイル、Java、JavaScript、Lisp、Lua、MySQL、nginx、Objective-C、Perl、P
Introducing Assetic (NYPHP) View more presentations from Kris Wallsmith ニューヨークのPHPコミュニティ、NYPHPに参加してきました。今回はSymfony Liveでも行われたAsseticのセッションに興味があったので参加してきました。（前回はカンファレンス2日目の最終セッションだったので疲れてあまり内容が頭に入らなかったので）今回は内容もすっきり理解できたのでセッションの内容を簡単にまとめて紹介します。 複数のCSSやJavaScriptを連結して1つにするAssetic サイトの構造が複雑化するとさまざまなJSファイル(JQuery本体やプラグイン、独自のコード、アクセス解析用コードetc)やCSSファイルを外部ファイルとしてロードするようになります。そうする事によって簡単にリッチな機能を実現できる反面、ペ
既存のフォームにも簡単に適用できる、各ブラウザ、各OSや各モバイルごとのフォームの異なるデザインのギャップを埋め、美しくするフレームワークを紹介します。 FormalizeCSS デモページ [ad#ad-2] サポートしているOSはWindow,Mac OS X,Linux、ブラウザはIE6/7/8/9, Firefox,Chrome, Safari, Opera、モバイルはAndroid, iOS(iPhone,iPad)などです。 下記のキャプチャは、Windows XP + Firefox 3.6のものです。 他の各ブラウザやモバイルでの表示は、元記事の下部「Screenshots」に掲載されています。 FormalizeCSS FormalizeCSS：ノーマル時の表示
デザイン、HTML/CSSマークアップ、JavaScript実装、サーバサイド実装等と開発項目があるなかで、UIエンジニアとプログラマはどこをどのように分担すれば開発効率がよいかを考えてみた
■iFingerScrollを公開したあと、GmailのiPadビューのペインスクロールが自分のに比べて相当サクサクなのに気付き、どうやってんだろと思ってPCからiPadのUAを送ってソースをちょっと見てみたところ、” -webkit-transform: translate3d “をつかってdivをスクロールさせてるらしいことがわかりました。 ということでiFingerScrollもCSSTransitionでabsoluteの座標を動かすのではなく、translate3dの指定をjavaScript側の制御で動かすように再実装したところ、いい感じになりました。translate系の指定はもともとtransitionやanimation目的でGPUサポートありで実装されてるので、CSSTransition/Animationとして使わなくても速いのかもしれません（憶測）。レガシーCS
Googleで使用されているようなグラデーションのスタイリッシュなボタンを画像を使用しないで実装するスクリプトを紹介します。 jQuery imageless buttons a laGoogle デモページ サポートしているブラウザも多く、下記の通りです。 Opera 10 beta Opera 9.6x Firefox 3 Firefox 2 Safari 4 Safari 3 Internet Explorer 8 beta Internet Explorer 7 Internet Explorer 6Chrome AdobeAIR 1.5+ 実装方法は簡単で、スクリプトとスタイルシートを外部ファイルとして記述し、適用するボタンのpaddingやfont-sizeを指定します。UI的にはあまり浸透していないものもあるので、その際は文言など一工夫が必要かもしれません。 styl
サイトパフォーマンス計測ツールの PageSpeed や YSlow を使うと、JavaScript やCSS を 1 つにして圧縮しろしろ、怒られ？ます。圧縮するには、Eclipse プラグインやGUI ツールなどもありますが、ant のコマンドでお手軽にしたい場合はこんなのでいけます。呼び出している yuicompressor はYahoo! のJava 製圧縮ライブラリーです。 <?xml version="1.0" encoding="UTF-8"?> <project default="build"> <target name="build"> <!--JavaScript 連結 --> <concat destfile="httpdocs/all.js" encoding="UTF-8" fixlastline="yes" eol="lf"> <filelist di
WebOSGoodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOSGoodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 昨日、HTML5 勉強会で Opera の開発者向け機能についてプレゼンしてきました。会場が Opera の目黒オフィスということで急遽駆り出されました（笑）。 こういったプレゼンをするときに必要なのがプレゼン資料（スライド）の作成。これまではGoogle Docs や OpenOffice.org で作っていたのですが、これがどうにも不便。ちょっとしたことを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
