CSSでスクロールバーをカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント | コリス

2021/07/29 32 users スクロールバー コリス CSS デフォルト 実装

スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時... 続きを読む

CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css | コリス

2020/04/23 26 users ジグザク コリス 罫線 グリッド ドット

ページ全体、テキストやボックスなどのさまざまな要素の背景に美しいパターンを簡単に実装できるスタイルシートのライブラリを紹介します。 ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与える...記事の続きを読む 続きを読む

Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap | コリス

2019/08/28 61 users コリス スクリプト 自動生成 構成 マップ

Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。 pagemap pagemap -GitHub pagemapの特徴 pagemapのデモ pagemapの使い方 pagemapの特徴 pagemapはページ全体の構成を取得し、全体を把握できるマップを自動生成... 続きを読む

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

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

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

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

2018/08/02 7 users スクリーンショット Console 拡張 スクリーンショッ

ネタ記事です。下記記事にインスパイアされています。 【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法！ JavaScript で Web ページ全体のスクリーンショットを撮る方法を紹介します。目的のサイトを開き、Developer Tool を起動します。Console に下記コードを埋め込むとスクリーンショッ... 続きを読む

【拡張不要】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を見る際、バッファリングに時間がかかり再生が始... 続きを読む

Googleがウェブの煩わしい広告を表示させないようにする変更をChromeに追加 - GIGAZINE

2018/02/14 46 users 役目 一方 ウェブサイト 事実 GIGAZINE

ウェブサイトに表示される広告はそのサイトの運営資金になるなどの役目を果たす一方で、ページ全体を覆うような広告や強制的に動画が再生されてしまう広告など、閲覧者の利便性が無視された好ましくない広告があるのも事実です。そんな問題に対処すべく、GoogleはChromeでそのような広告を表示させないようにする変更を2018年2月15日に加えることをブログで発表しました。 The browser for a... 続きを読む

Webスクレイピングをする時に便利なnode.jsライブラリ「article-parser」 | cupOF Interests

2018/01/06 58 users クローラー Webスクレイピング フィード ソーシャルブック

2017年 9月12日 01時20分 3ヶ月前 Webスクレイピングをする時に便利な node.js用ライブラリ「 article-parser 」の紹介です。 " Webスクレイピング "、簡単に言えば、Webサイトからコンテンツの情報を抜き出すことです。RSSなどのフィードとは違いページ全体を抜き取ります。あまり聞こえはよくありませんが、Webサイトを巡回する クローラー や ソーシャルブック... 続きを読む

謎の「ファイナルファンタジー山手線」発表 - ねとらぼ

2017/09/21 26 users とらぼ リーフレット フォント 発表 スクウェア・エニックス

東京ゲームショウ2017で配布されているスクウェア・エニックスのリーフレットに、大変シャレた告知が掲載されています。「FINAL FANTASY YL」とFFシリーズおなじみのフォントで書かれており、その下には「ファイナルファンタジー山手線」の表記が。Yamanote Lineか！ FFYL リーフレットのページ全体 掲載されているのはこちらのリーフレット 現在発表されている情報は、JR東日本との... 続きを読む

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... 続きを読む

ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」:phpspot開発日誌

2015/03/03 31 users GitHub ローディングアニメーション アニメーション

ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」 2015年03月03日- Gix075/jqueryIntroLoader GitHub ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」。 ページ全体が読まれるまで、ローディングアニメーションを表示させるjQueryプラグインです。 アプリなどではページ全体を読み終えるまでローデ... 続きを読む

[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル | コリス

2015/02/03 96 users YouTube コリス チュートリアル レスポンス デモペー

動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモペー... 続きを読む

コメントも含めたページ全体のコンテンツが品質評価される | 海外SEO情報ブログ

2015/01/05 20 users 品質 コンテンツ 海外SEO情報ブログ コメント UGC

[対象: 全体]サイト管理者が作成したメインコンテンツだけでなく、UGCのように外部のユーザーが作ったコンテンツは、たとえそれがコメントであってもそのページの品質を評価する対象になります。 したがって、ページ全体としてのクオリティを高めなければなりません。ユーザーによるコメントもコンテンツの一部9月末に実行されたパンダアップデートの影響を受けたと思われるサイトの管理者が、その原因と対処方法を英語版... 続きを読む

モダンなローディングエフェクトが実装できる「fakeLoader.js」:phpspot開発日誌

2014/12/25 27 users ローディングエフェクト phpspot開発日誌 最初 形式

モダンなローディングエフェクトが実装できる「fakeLoader.js」 2014年12月25日- joaopereirawd/fakeLoader.js GitHub モダンなローディングエフェクトが実装できる「fakeLoader.js」。 ページ全体にオーバーレイ効果をかけ、中央にスピナーアニメーションを配置する形式のローディング画面が簡単実装できます。 最初に用意されているローディングアニ... 続きを読む

簡単で便利！Webページのパフォーマンスをヒートマップで視覚化するブックマークレット -Perfmap | コリス

2014/10/14 45 users Firs コリス ブックマークレット 下部 ヒートマップ

1クリックで、Webページのパフォーマンスが最適化がどうかヒートマップを使って視覚的に分かりやすく表示してくれるブックマークレットを紹介します。 表示されている時間は二つあり、一つ目はユーザーが画像を見るために要する時間、二つ目はブラウザがロードするのに要した時間です。 ヒートマップはグリーンに近いほど早く、レッドに近いほど遅いということです。 下部のバーはページ全体のパフォーマンスで、「Firs... 続きを読む

Chrome拡張「Awesome Screenshot」ページ全体のスクショが撮れ、書き込みや加工までできる！

2014/05/23 51 users Awesome Screenshot スクショ Pin 加工

Chrome lapel pin / stshank とある事情でブログ記事全体のキャプチャ（スクリーンショット）を撮りたいなと思っていたのですが、スクロールして撮る、またスクロールして・・・なんて非効率的なことはなるべくやりたくない。何枚にも分かれてしまうのは見る方も面倒ですし。 そう思って何か方法はないか探していたところ、発見したのが「Awesome Screenshot」というChrome拡... 続きを読む

[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay | コリス

2014/04/22 70 users jQuery コリス スクリプト アニメーション 実装

ページ全体、ページ上のさまざまな要素にオーバーレイをアニメーションでかっこよく表示するjQueryのプラグインを紹介します。 実装は非常にシンプルで、オーバーレイのカラーや不透明度、アニメーションなどのカスタマイズも簡単です。 plainOverlay plainOverlay -GitHub plainOverlayのデモ plainOverlayの使い方 plainOverlayのデモ デモで... 続きを読む

Windows XPだとページ全体に警告表示するJavaScriptを配布します | Stocker.jp / diary

2014/01/14 59 users Microsoft Stocker.jp 警察庁 diary

Web技術 Windows XPだとページ全体に警告表示するJavaScriptを配布します Top diary Tuesday, January 14th, 2014 Microsoft による Windows XP のサポートはあと数十日で終了します。 サポート終了後はどのような脆弱性が見つかったとしても修正されません。 参考: 警察庁も注意喚起、サポート終了後のWindows XP利用は危険... 続きを読む

ニュースサイトとかエロサイトで便利な、コンテンツの一部だけ会員限定にするプラグイン作った！ | firegoby

2013/06/27 26 users 内緒 firegoby WordPress 特定 認証

投稿ナビゲーション ← 前へ ニュースサイトとかエロサイトで便利な、コンテンツの一部だけ会員限定にするプラグイン作った！ ニュースサイトで以下のような感じのやつをよく見ますよね？ WordPressは非公開の記事とかパスワード保護とかの機能で特定のページ全体を内緒にすることはできますが、このプラグインは記事のコンテンツの一部だけに認証をかけるプラグインです。 WordPress › Login t... 続きを読む

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

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

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

RWDの定番チェックツールとして期待できる「Responsive Inspector」が便利かも

2013/04/28 18 users メディアクエリ スクリーンショット Chrome拡張機能

レスポンシブWebデザインで作ったサイトをチェックするための定番ツールになりそうな「Responsive Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。 ページに設置されたメディアクエリの確認 ブラウザのウィンドウ幅の変更 ページ全体のスクリーンショット 過去にいろいろなツールを使ってきま... 続きを読む

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

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

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