タグ ページ全体
人気順 5 users 10 users 100 users 500 users 1000 usersDeepL翻訳やGoogle翻訳を超える精度の無料翻訳サービス「Kagi Translate」が登場
新たな翻訳サービス「Kagi Translate」が登場しました。無料で使えてページ全体の翻訳も可能なうえ、DeepL翻訳やGoogle翻訳など既存の翻訳サービスを超える精度で翻訳できるとのことなので、実際に使って試してみました。 Kagi Translate https://translate.kagi.com/ Kagi Translate - We speak your language | Kagi B... 続きを読む
Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap | コリス
Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。 pagemap pagemap -GitHub pagemapの特徴 pagemapのデモ pagemapの使い方 pagemapの特徴 pagemapはページ全体の構成を取得し、全体を把握できるマップを自動生成... 続きを読む
【知ってた? Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法(拡張機能も不要!) | Chrome | できるネット
拡張機能を使わずに縦長ページのスクショが取れる! Webページのスクリーンショット(画面キャプチャー、スクショ)を撮る際に、ブラウザーの画面上に表示されている部分だけでなく、スクロールした先も含めたページ全体を撮りたいことがあります。今回は、そんなときに便利なテクニックを紹介します。 Chromeブラウザー... 続きを読む
【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法!
拡張機能を使わずに、Chromeでスクロールするページ全体のスクリーンショットを撮る方法を紹介します。 例えばプレゼン資料を作っているときに、PCサイトでページ全体のスクリーンショットが必要なことがあります。 また、モバ... 続きを読む
Python: Selenium + Headless Chrome で Web ページ全体のスクリーンショットを撮る - CUBE SUGAR CONTAINER
スクレイピングした Web サイトからページ全体のスクリーンショットを撮影したい機会があった。 そこで Selenium の Python バインディングと Headless Chrome を使ったところ実現できたのでメモしておく。 使った環境は次の通り。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.13.5 BuildVersion: 17F77 $ pyth... 続きを読む
通信の最適化の実施内容について | スタッフブログ | マイネ王
新参者@運営事務局です。今回は現在mineoにて実施している通信の最適化の内容について説明いたします。 最適化の基本的な考え方について 最適化を実施するにあたり、基本的な考え方は、「混雑時の通信速度を改善する」というものです。最適化を行うことで、昼休みにWeb閲覧する際、静止画のダウンロードがもたつきページ全体の表示に時間がかかる、とか、YouTubeを見る際、バッファリングに時間がかかり再生が始... 続きを読む
Webスクレイピングをする時に便利なnode.jsライブラリ「article-parser」 | cupOF Interests
2017年 9月12日 01時20分 3ヶ月前 Webスクレイピングをする時に便利な node.js用ライブラリ「 article-parser 」の紹介です。 " Webスクレイピング "、簡単に言えば、Webサイトからコンテンツの情報を抜き出すことです。RSSなどのフィードとは違いページ全体を抜き取ります。あまり聞こえはよくありませんが、Webサイトを巡回する クローラー や ソーシャルブック... 続きを読む
Webデザインが圧倒的に捗るChromeの拡張機能12選 | UX MILK
みなさんはChromeの拡張機能を活用していますか? 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL: FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます... 続きを読む
[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js | コリス
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい~んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.j... 続きを読む
[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル | コリス
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモペー... 続きを読む
Chrome拡張「Awesome Screenshot」ページ全体のスクショが撮れ、書き込みや加工までできる!
Chrome lapel pin / stshank とある事情でブログ記事全体のキャプチャ(スクリーンショット)を撮りたいなと思っていたのですが、スクロールして撮る、またスクロールして・・・なんて非効率的なことはなるべくやりたくない。何枚にも分かれてしまうのは見る方も面倒ですし。 そう思って何か方法はないか探していたところ、発見したのが「Awesome Screenshot」というChrome拡... 続きを読む
[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay | コリス
ページ全体、ページ上のさまざまな要素にオーバーレイをアニメーションでかっこよく表示するjQueryのプラグインを紹介します。 実装は非常にシンプルで、オーバーレイのカラーや不透明度、アニメーションなどのカスタマイズも簡単です。 plainOverlay plainOverlay -GitHub plainOverlayのデモ plainOverlayの使い方 plainOverlayのデモ デモで... 続きを読む
Windows XPだとページ全体に警告表示するJavaScriptを配布します | Stocker.jp / diary
Web技術 Windows XPだとページ全体に警告表示するJavaScriptを配布します Top diary Tuesday, January 14th, 2014 Microsoft による Windows XP のサポートはあと数十日で終了します。 サポート終了後はどのような脆弱性が見つかったとしても修正されません。 参考: 警察庁も注意喚起、サポート終了後のWindows XP利用は危険... 続きを読む
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium | コリス
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリ... 続きを読む
[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む(スクロール非対応) Step 2: ページ全体を角丸で囲む(スクロール対応) Step 3: ページ全体を角丸で囲む(スクロールバーを変更) Step 1: ページ全体を角丸で囲... 続きを読む
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね ... 続きを読む
[JS]ページ全体やコンテンツ(画像や動画)をフルスクリーンで表示するだけのシンプルなスクリプト -BigScreen | コリス
指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量(1KB)のスクリプトを紹介します。 BigScreen BigScreenの特徴 BigScreenのデモ BigScreenの使い方 BigScreenの特徴 BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量(minified:1KB... 続きを読む
[CSS]モーダルウインドウをCSS3アニメーションを使ってエレガントに表示するチュートリアル | コリス
モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ:ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>He... 続きを読む
ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」:phpspot開発日誌
jQuery jQSlider :: Example Slimple ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 ブラウザを紙芝居っぽくしたスライドショーが作れます。この手のプラグインでは当然ですが、1ファイルのHTML内に全スライドを書けます。 ブラウザ幅が変わっても伸縮するレスポンシブな仕様になっています ブロック要素内にスライドショーを入れ込んだり... 続きを読む
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide | コリス
デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下(</body>の上)にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleap... 続きを読む
フルスクリーン背景がスライドショーになるCSS3サンプル:phpspot開発日誌
Fullscreen Background Image Slideshow with CSS3 | Codrops フルスクリーン背景がスライドショーになるCSS3サンプル。 ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。 画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強にな... 続きを読む
指定したウェブページを丸ごととりこみ、カスタマイズして保存できるサービス「BO.LT」*二十歳街道まっしぐら
BO.LT 短縮URL+ページ保存+編集 「BO.LT」は指定したウェブページのURLを短縮し、その後ページ全体を保存できるサービスです。 さらに、保存したページを自由にカスタマイズすることが可能。 HTMLの divタグで囲まれた部分をささっと削除できたり。 指定した部分に新しくリンクを貼れたり。 ウェブ魚拓というサービスがありますが、それに編集機能が加わった感じですね。 以下に使ってみた様子を... 続きを読む
[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることが... 続きを読む
はてなハイクをバージョンアップしました - はてなハイク日記
14:41 | 本日、はてなのミニブログサービス「はてなハイク」をバージョンアップしました。ユーザーの皆さまに、より快適にお使いいただけるように、数多くの改良と不具合の修正を施しました。より軽快に動作し、ストレスなく利用できるサービスに システムを全面的に再設計して、処理速度が大幅に向上しました。投稿や閲覧も、ページ全体の再読み込みを行わずに実行できます。さまざまなデバイスからいつでも利用できるサ... 続きを読む
プロレベルのサイト作成時に使える実用Photoshopチュートリアル集:phpspot開発日誌
25 Photoshop Tutorials for Web Designers - Six Revisions プロレベルのサイト作成時に使える実用Photoshopチュートリアル集。 ページ全体だけではなく、ヘッダーやナビゲーション等、パーツによって個別に別れているので使いやすそうです。 テンプレート作成のチュートリアル Photoshop Paper Texture from Scratch... 続きを読む