The picture element Stay organized with collections Save and categorize content based on your preferences. The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the picture element. In the same way that srcset b
今日は小ネタです。Android(やiPhoneも、たぶん)のブラウザで、Firebugを使ったり、「ソースを表示」をする方法を解説します。 スマートフォンでブラウザを使っていて、表示しているページのHTMLソースを表示したり、DOMツリーを見たりしたくなることはありませんか? といってもChromeモバイルにはFirebugや開発者ツールがあるわけでもないですし、わざわざデスクトップPCに接続して開発者ツールでリモートデバッグするのも面倒ですよね。 そこで、次のブックマークレットを使います。 Google ChromeモバイルでFirebug Liteを使うためのブックマークレット Firebug LiteGoogle ChromeモバイルでHTMLソースを表示するためのブックマークレット HTMLソースを表示ブックマーク作成は、デスクトップ版のChromeでリンクをブックマークバーにド
HTML5では、最新のWebアプリケーションに必要となる数々の新機能が提供されています。また、これまで長い間使われてきたが、標準化はおろか文書化もされていなかったWebプラットフォームの多くの機能が標準化されています。本書は、HTML5の新機能だけでなく、仕様の背景から、基本テクニックや実践的なアプローチまでをまとめたHTML5の手引書です。HTML5についての著者の深い理解を背景に解説されており、HTML5の入門者から、すでに知識のある開発者まで、幅広い読者にとって価値のある書籍です。 正誤表 ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下のリストに記載の年月は、正誤表を作成し、増刷書籍を印刷した月です。お手持ちの書籍では、すでに修正が施されている場合がありますので、書籍最終ページの奥付でお手持ちの書籍の刷版、刷り年月日をご確認の上、ご利用くださ
はじめまして、株式会社キクミミの富田宏昭と申します。おもにWebアプリケーションを開発しています。この連載では、PhoneGapを使ったiOSおよびAndroidアプリケーションの開発方法について全4回に分けて紹介していきます。どうぞお楽しみください。 PhoneGapとは PhoneGapはNitobiが開発、公開しているクロスプラットフォーム・モバイルアプリケーションの開発フレームワークです。スマートフォン向けアプリケーションの開発では、各OSごとに特定の言語を使用をして開発をおこなうことになります。たとえばiOSの場合はObjective-C、AndroidやBlackBerryの場合はJava、Windows Phone 7の場合はC#・Vidual Basicなどです。複数のスマートフォンに対応するアプリケーションを開発する場合、デベロッパは複数の言語をもちいてそれぞれの開発環境
「DevDocs」はHTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイトです。MacにDashというドキュメントを高速に横断検索できるツールがありますが、それに似たサービスですね。オンラインで検索できるので、便利です。検索するとリアルタイムに検索結果が絞りこまれ、必要なドキュメントの内容が表示されます。 使うには、まずDevDocsへアクセスしましょう。左側のメニューに検索対象の言語が並んでいます。 プルダウンを開くとカテゴリごとにドキュメントが整理されています。左上の検索ボックスから対象のタグやメソッドを入力すると絞り込むことができますよ。高速に検索できるので、必要な情報がすぐに手に入るのがうれしいですね。ウェブ開発をしている方はドキュメントを読むことが頻繁にあると思います。DevDocsをブックマークしておくと、いざというときに便利ですよ。 DevDocs
Content-Security-Policy の nonce を利用すると、XSS の脅威をかなり軽減できます。 そこで、Web Application Framework ではデフォルトで対応したほうがよいのではないか、という旨を @hasegawayosuke さんから教えて頂いたので、実装について考えてみました。 とりあえず CSP の nonce はどういうものなのかを考慮するために、コード例を探していたのですが、実際に動くサンプルというものが nonce 関連のもので見当たりませんでした。 そこで、実際に動くサンプルを用意しました。 https://github.com/tokuhirom/csp-nonce-sample 以下は Sinatra で書かれたサンプルコードです。 require 'sinatra' require 'securerandom' get '/' d
最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの! デモページ:2ページ目 ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq
SIの現場では、未だにテーブルでのレイアウトが多勢を占めてる気がします。フォントの色とかサイズとかも、CSS使わず書くことが多い気もしてます。 そんな訳で、少なくとも僕はモダンなHTMLやCSSがわかりません。で、お勉強しつつ、ここにアウトプットを残そうというのが今回の趣旨です。 HTMLの種類 昨今のメジャーどころでは、以下の様になるのかな と。HTML5がすでに主流と言っても良い気がするので、お勉強もHTML5に則ってやっていこうと思ってます。 HTML4.01 ちょっと前までの主流。yahooはまだHTML4.01。Windows XP使い続けてるおじーちゃんおばーちゃんもターゲットだからなのかな?古いブラウザでも観れるように配慮するなら、このバージョンを選ぶことになる XHTML 若干空気。古いブラウザでもそれなりに対応している。XMLのように厳格に書きましょ という企画。利用して
HTML5は、これから利用が一気に進むと期待されている技術です。多くの企業が取り組みを表明、また実際に取り組み初めており、熱い注目を集めています。本書ではHTML5のテクニックを網羅する90のTipsを紹介します。HTML5の持つ威力を体感でき、またHTML5で何ができるのかという可能性を示します。サンプルコードが豊富で、ほぼすべてダウンロード可能。実践的、実用的な一冊です。日本語版ではブラウザ対応状況を示すアイコンを各Hackに付けているため、対応/未対応が一目でわかるようになっています。 目次 訳者まえがき まえがき 1章 セマンテック的にHackする 1. 正しい<doctype>を使って文書を簡素化する 2. 共通の構造を使う 3. 古いブラウザでも新しいHTML5タグを正しく表示する 4. <input>タグを蘇らせる 5. JavaScriptを使わずに簡単にフォームの妥当性検
2010年のJavaScriptと題しまして、JavaScript周辺の「これまで」と「これから」についてまとめてみたいと思います。 2009年までのJavaScript JavaScriptは各ブラウザベンダなどが個別に実装するという特殊性から、ブラウザ(実装)ごとの非互換性の問題に悩まされ続けてきた言語です。まず、そのJavaScriptの歴史を簡単に振り返ってみます。 ECMA-262 3rd editionとスピードコンテスト JavaScriptはNetscape社によってLiveScriptという名前で誕生し、その後ECMAScriptとして標準化が進みました。1999年12月にECMA-262 3rd editionが策定されてから、Internet ExplorerのJScript、MozillaのSpiderMonkey(TraceMonkey)、SafariのJav
11:10~ 課題ページの確認&PageSpeed Insightsの実行目的:チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20~ 画像ファイルの最適化目的:画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの
HTML5で開発をするために必要な実践的なコードを提供します。基本的な構文からプログレッシブなマークアップ、フォーム、各種メディア、マイクロデータ、位置情報、canvasなど幅広い内容をカバー。 また、どのブラウザが仕様のどの部分をサポートしているのかを調べるためのヒントやブラウザによるサポートにばらつきがある場合の対応策と、それらが必要かどうかを見きわめる方法についても解説。これによって、読者はそれらの機能が開発中の案件に必要かどうかを判断できるようになるでしょう。実践的な解決策を求めるエンジニアのためのレシピ集です。 本書に寄せて はじめに 1章 基本的な構文とセマンティクス はじめに レシピ1.1 DOCTYPEを指定する レシピ1.2 文字セットを指定する レシピ1.3 言語を指定する レシピ1.4 <script>と<link>を最適化する レシピ1.5 HTML5の新しい要素を
2014年でも html を解析してゴニョゴニョするなんて要件はまだまだある訳で、そんな時に便利なのが pup というコマンドです。 EricChiang/pup - GitHub README.md pup pup is a command line tool for processing HTML. It reads from stdin, prints to stdout,... https://github.com/EricChiang/pup 通常、こういったツールは perl や ruby、python 等で提供されランタイムがインストールされていない環境で動かすのはちょっとした手間が発生していました。しかし pup ならば golang で出来ているのでバイナリ1つあれば動かせます。 使い方は、例えばこのサイトのパーマリンクのHTMLを得たいならば curl -s http:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く