【知ってた？ Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法（拡張機能も不要！） | Chrome | できるネット

2018/08/12 337 users Chrome スクショ スクリーンショット ブラウザー ネット

拡張機能を使わずに縦長ページのスクショが取れる！ Webページのスクリーンショット（画面キャプチャー、スクショ）を撮る際に、ブラウザーの画面上に表示されている部分だけでなく、スクロールした先も含めたページ全体を撮りたいことがあります。今回は、そんなときに便利なテクニックを紹介します。 Chromeブラウザー... 続きを読む

【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法！

2018/08/01 1360 users Chrome モバ スクリーンショット 拡張 プレゼン資料

拡張機能を使わずに、Chromeでスクロールするページ全体のスクリーンショットを撮る方法を紹介します。 例えばプレゼン資料を作っているときに、PCサイトでページ全体のスクリーンショットが必要なことがあります。 また、モバ... 続きを読む

Python: Selenium + Headless Chrome で Web ページ全体のスクリーンショットを撮る - CUBE SUGAR CONTAINER

2018/07/27 317 users Selenium ProductName Python スク

スクレイピングした Web サイトからページ全体のスクリーンショットを撮影したい機会があった。 そこで Selenium の Python バインディングと Headless Chrome を使ったところ実現できたのでメモしておく。 使った環境は次の通り。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.13.5 BuildVersion: 17F77 $ pyth... 続きを読む

通信の最適化の実施内容について | スタッフブログ | マイネ王

2018/05/07 262 users マイネ王 バッファリング 通信 YouTube mineo

新参者＠運営事務局です。今回は現在mineoにて実施している通信の最適化の内容について説明いたします。 最適化の基本的な考え方について 最適化を実施するにあたり、基本的な考え方は、「混雑時の通信速度を改善する」というものです。最適化を行うことで、昼休みにWeb閲覧する際、静止画のダウンロードがもたつきページ全体の表示に時間がかかる、とか、YouTubeを見る際、バッファリングに時間がかかり再生が始... 続きを読む

Webデザインが圧倒的に捗るChromeの拡張機能12選 | UX MILK

2016/03/10 618 users Chrome キャプチャ UX MILK webデザイン 効率

みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL： FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます... 続きを読む

[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js | コリス

2015/03/04 150 users コリス jQuery モーダルウインドウ スクリプト 操作

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.j... 続きを読む

[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium | コリス

2013/06/09 381 users jQuery Helium セレクタ コリス CSS

ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリ... 続きを読む

[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス

2013/04/09 101 users コリス スクロールバー CSS Step ボーダー

ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲... 続きを読む

[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide | コリス

2012/03/12 135 users PageSlide コリス stylesheet スクリプト

デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleap... 続きを読む

[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス

2011/04/18 346 users コリス box-shadow ウェブデザイン シャドウ CSS

CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることが... 続きを読む

プロレベルのサイト作成時に使える実用Photoshopチュートリアル集:phpspot開発日誌

2008/12/21 304 users phpspot開発日誌 ヘッダー ナビゲーション 個別 プロ

25 Photoshop Tutorials for Web Designers - Six Revisions プロレベルのサイト作成時に使える実用Photoshopチュートリアル集。 ページ全体だけではなく、ヘッダーやナビゲーション等、パーツによって個別に別れているので使いやすそうです。 テンプレート作成のチュートリアル Photoshop Paper Texture from Scratch... 続きを読む

[JS]チョー簡単にサイトをAJAX対応にするスクリプト -com.bydust.ajax | コリス

2008/11/10 186 users コリス スタティック チョー AJAX対応 スクリプト

com.bydust.ajaxは、スタティックなサイトでもWordPressのようなサイトでも、ページ全体のロードをせずに必要な箇所のみロードして表示するAJAX対応にするスクリプトです。 com.bydust.ajax demo サイトをAJAX対応にする基本的なスクリプトの設置方法は、下記の通りです。 下記は、対象となる全ページに適用します。 ダウンロードした２つのスクリプト（com.bydu... 続きを読む

Web2.0の挑戦者：ウェブ上の情報の断片を「クリップ」で整理して共有できるClipmarks - CNET Japan

2006/08/28 135 users Clipmarks 断片 グリップ ウェブページ上 フック

ClipmarksのEric Goldsteinとそのチームがメールでのインタビューに応じてくれた（2006年2月8日）。 Clipmarksはどのようなサービスを提供するWebアプリケーションですか。 Clipmarksは、ウェブページ上にある情報の断片を、ページ全体をブックマークせずにクリップして、タグをつけることを可能にする無料サービスです（編集部注：このクリップされた情報を「クリップマーク... 続きを読む

CSSとHTMLをリアルタイムに書き換えてプレビューできる「rendr」 - GIGAZINE

2006/06/14 261 users GIGAZINE rendr Markup CSS HTML

「CSS」タブをクリックして、中のコードを書き換えると、リロードせずにそのままリアルタイムにページ全体を再レンダリングしてくれます。「Markup」タブをクリックすればHTMLコード自体を書き換え可能。元に戻すには「clear markup and css」をクリック。 Firefoxの拡張である「greaseMonkey」バージョンもあるので、自分のサイトで同じようなことができるようになり、CS... 続きを読む

ウェブページを見る目の動きは「F」パターン - GIGAZINE

2006/04/19 648 users 被験者 GIGAZINE 経路 視線 ウェブページ

つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体... 続きを読む

StarChartLog: ページ全体のスクリーンショットも簡単に保存できるFirefox拡張

2006/04/01 233 users Java エイプリルフール Firefox 拡張 拡張機能

エイプリルフールでトップページ変更になったサイトのスクリーンショットを取ろうとして、スクロールしないと全体が見えないサイトだとさすがにWEBIMAGERでは荷が重いなあと思い、Firefoxの拡張機能でそういうのがないか探しました。 以前Screen grab!を使おうとしてなんだかうまくいかない（JAVAがらみだろうか。でもJAVAインストールしてあるのに）ことがあったので、他にも同様の拡張がな... 続きを読む