「Web Scroll Capture」は、ウェブページ全体のスクリーンショットが撮れるiPhoneアプリです。URLを指定するだけで、ウェブページを上から下までスクリーンショットとして保存できます。 以下に使ってみた様子を載せておきます。 まず、Web Scroll Captureへアクセスしましょう。インストールしたら、起動して設定を行います。 「Scroll」をONにしましょう。これでウェブページ全体のスクリーンショットが撮れますよ。 スクリーンショットは、iPhoneのカメラロールに保存するか、メールするか選ぶことが可能です。試してみたところ、スクリーンショットは横幅が320pxで保存されていました。 iPhoneでウェブページ全体のスクリーンショットを撮りたいときは、是非活用してみてください。 Web Scroll Capture (カメきち)
複数のコンテンツをサムネイルで配置し、ローテーションで打ち出しエリアに拡大表示するフィチャーボックスを実装するチュートリアルを紹介します。 Rotating Feature Boxes デモページ [ad#ad-2] デモでは右側に配置されたサムネイルのコンテンツをクリックすると、打ち出しエリアにアニメーションでスライド移動して、全文が表示されます。 ※アニメーションはCSS3で実装されているためChrome, Safariのみで、非対応ブラウザはアニメーション無しです。 デモページ 2番をクリックして、2番が打ち出しエリアに。 [ad#ad-2] ローテーションするフィチャーボックスの実装 HTML 3つのコンテンツはdiv要素で実装されており、それぞれidとclassを付与し、全部をdiv要素で内包します。 <div id="rotator"> <div id="block-1" cl
本題に入る前に、noindex robots metaタグとnofollow robots metaタグについて簡単に確認しておきます。 noindex robots metaタグ: このタグを記述したページを検索結果に表示させないようにする目的で使う。 nofollow robots metaタグ: このタグを記述したページに存在するリンクを検索エンジンがたどることを禁止する目的で使う。 禁止を意味する“no”が付かない、index robots metaタグとfollow robots metaタグというのも利用することができて、それぞれ「インデックスを許可する」、「リンクをたどるのを許可する」という目的で使います。 さて本題です。 <meta name="robots" content="noindex,follow" /> 上のタグは、インデックス(検索結果での表示)を拒否するがリ
[レベル:中〜上級] ページネーション(ページ分割・ページ送り)による問題発生を防ぐために、rel=”prev” 要素と rel=”next” 要素のサポートをGoogleが始めたことを先週解説しました。 ※余談ですが、“Pagination”の発音は日本語で書くなら「パァジネィシュン」が近いため「パージネーション」と表記しています。少なくとも「ページネーション」は本来の発音からさらにかけ離れていると僕は感じます。 Googleが提示した、ページネーション問題を解決するもう1つの方法を今日は解説します。 それは、分割したページのコンテンツがすべて載っているページを作成することです。 全コンテンツを1ページで閲覧できる、分割していない状態のページを“view-all pages”とGoogleは記事の中で呼んでいます。 適当な日本語訳を思いつかないので、ここではそのまま「ビューオールページ」
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) <前へ 次へ>(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
Today we have a collection of some incredible and impressive HTML5 canvas and java-script experiments. Enjoy! Coil Google Gravity Canvas ribbon & iOS4.2 device orientation Sketch 404 BreakDOM Move. Pick Up. Drop Fight or Flight? (HTML5 game) Make3D: Native Drag & Drop in browser FlowerPower Conductor Z type webGL water Fish Tree HTML5 logo Test Canvascycle Asteroids – HTML5 Canvas and JavaScript g
『ソーシャルメディア調査報告書2011』 からWeb担の読者向けにピックアップしてデータを紹介するこのコーナー、この記事では、4.3「ソーシャルメディア利用者の利用実態」から、4.3.1「利用中のソーシャルメディア」のデータを紹介する。 利用中のソーシャルメディア本調査の対象者(なにかしらのソーシャルメディアを利用している人)が利用中のソーシャルメディアを表している。全体では「YouTube」が78.1%でトップであり、「Yahoo!知恵袋」が58.4%、「価格.comの「レビュー」や「クチコミ」」が42.6%で続く。 ジャンル別にみていくと、SNSでは、「mixi」(35.1%)、「GREE」(14.1%)、「Facebook」(13.7%)、「Mobage」(12.7%)の順である。 クチコミサイトや商品等のレビューサイトでは、「価格.com」が42.6%でトップであり、「クックパッド
今週、気になった iPhone 用 アプリです。 ※iPod touch / iPad でも動作するものもあり。 ♪なーめこー、なーめこー。あ、あれはタラコか(笑) なめこをひたすら栽培するアプリ。暇つぶしに持ってこい(^^) ついにというか、待ってましたと言いましょうか(^^; ハマリゲーの一つ ZOOKEEPER が iPhone にも登場ですね〜。今更感は否めなくはないんですけど、やっぱりシンプルで無駄なアクション(ポイント溜めてボーナスアイテム買ったり使ったり)があまりないのでハマりやすいんですよね。やったことない人もパズルゲーム好きならハマルかなと。 うちのサイトは新作レビューだけではないので、突然かなり前の App も引っ張ってきます(^^) と、いうことで、電車時刻を調べるのに便利ですね。ほとんどアップデートしてないし無料と言うこともあって有料のものに比べると劣るのかもしれま
「apple-touch-icon」を指定した場合は、iPhoneとAndroidどちらも同じアイコンになりますが、「apple-touch-icon-precomposed」を指定した場合は、それぞれ異なるアイコンになります。 iPhoneは、「apple-touch-icon」「apple-touch-icon-precomposed」ともに、最初に指定したアイコンが有効になるようです。一方Androidは、「apple-touch-icon」の場合は最初に指定したアイコン、「apple-touch-icon-precomposed」の場合は最後に指定したアイコンが有効になるようです。 この違いを利用して、次のような順序で記入すると、iPhoneとAndroidに異なるアイコンを指定できます。 <link rel="apple-touch-icon-precomposed" href=
JEPG画像の見た目の品質を維持しつつ、ファイルサイズを1/5に軽量化するオンラインサービスを紹介します。 ※1/5は画像によって差があります。 JPEGmini 左:オリジナル(3662KB)、右:JPEGmini(628KB) [ad#ad-2] サイトではデモのJPEG画像が4種類あり、中央のスライダーを操作することで左:オリジナル、右:JPEGmini、見た目の品質を比較することができます。
拡大しないと、見えないなぁ・・・ 皆さんがお持ちのサイト、スマホから見たときどんな風に見えるかご存知ですか? これらのキャプチャは、有名なニュースサイトのもので、各ニュースサイト名を検索して、まず表示されるページ(ランディングページ)です。この中で、真ん中の「毎日jp」だけが、スマホ対応されているのですが、いかがですか?どのサイトが見やすいか、使いやすそうか、一目瞭然ですね。中にはアプリが用意されていているサイトもありますが、実際、まずサイトを探すにはスマホのブラウザから検索してアクセスすることの方が多いと思います。ただでさえ狭くて小さいスマホのブラウザにパソコン向けのサイトが出てきたら・・・。他の見やすいサイトを探すのではないでしょうか? スマホのブラウザで検索してみるとわかるのですが、大手企業のサイトですら、まだまだスマホ未対応ものが多く見られます。・・・ということは、早めにスマホ対策
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
今日はGoogle Analyticsのレポート表示に関する便利なTIPSを紹介します。 Google Analyticsで使える「セカンダリディメンション」はなかなか便利な機能なのですが、なかには選択できないディメンションもあります。 たとえば上位のコンテンツではもっとも閲覧数の多い順にページの「URL」が表示されます しかしセカンダリディメンションとして「ページタイトル」を指定することはできません。 でもセカンダリディメンションとしてタイトルを表示させることができるのです。 やり方は簡単です。 “&segkey=request_uri|page_title“、このパラメータをGoogle Analyticsで「上位のコンテンツ」を閲覧しているときのURLに挿入します。 挿入する場所は、”id=XXXXXXX”の後です。 XXXXXXXにはあなたのGoogle Analyticsのプロフ
他人のブックマークって気になりませんか?特に同じ業界の人のブックマークってすごく気になりますよね。 興味本位でWEB屋友人のブックマークしてるサイトを教えてもらうことも多いですが、なんだか狙いすましたように、いろんな人が同じようなサイトをブックマークしていることに気がついて、「あぁー、このサイトはみんな良く見てるのかも」って思ったサイトがいくつかあったんですね。 そこで、WEB屋のブックマークをまとめて、北米WEB屋ならこれはたぶん皆みてるんだろうなってサイトをまとめてみましたので(独断と偏見で)ご紹介。 海外でWEB屋をやる方、いち早く海外のWEBデザイン情報をゲットしたい方、知っていて損はないと思います。 Smashing Magazine まずは王道?Smashing Magazine。このサイトは日本でも有名かなと思います。よくWEBまとめ記事とかで取り上げられてますよね。WEBの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く