設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプト・「pace.js」
pace.jsは設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプトです。何の設定も無くJSとCSSを読み込むだけで上デモのようにページロードのプログレスバーを表示してくれます。 非依存で単体で動作してくれます。デモではロード時間までをパーセントで表示していますが、これらも全て自動で処理してくれます。 プログレスバーはCSSで管理されており、いくつか選べるようになっています。プロジェクトページでCSSがダウンロードできるのでお好みのスタイルを選んでください。 <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.
CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
Paged.js - Webページを電子書籍風に表示するCSS Paged MediaのPolyfill MOONGIFT
Webページでテキストコンテンツを書籍のように楽しめるようにする、そのための仕様がCSS Paged Mediaです。まだ仕様が固まっていませんが、標準化されればコンテンツの楽しみ方がまた変わってくるでしょう。 いち早くCSS Paged Mediaを体験したい方はPaged.jsを使ってみましょう。 Paged.jsの使い方 これはePubファイルという訳ではありません。HTMLに書かれた文書をこのようにページ区切りにして表示できます。 日本語や画像も表示できます。 目次も出せます。 数式表示も対応。 CSSなのでダイナミックにレイアウト変更できます。 Paged.jsではページサイズ、ヘッダーやフッターの設定、マージンなど細かな指定が可能です。ePubファイルを読み込んで表示する機能もあります。小説サイトのコンテンツもPaged.jsで表示すれば楽しみ方が増えることでしょう。 Page
QR-Code - 今表示しているURLのQRコードを表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウジングしていて、そのURLをスマートフォンやタブレットで表示したいと思うことが良くあります。そんな時に便利なのがQRコードで、カメラを使ってURLが送信できます。かつてはGoogleチャートが使えたのですが、QRコードは非推奨になってしまっています。 そこで使ってみたいのがQR-Codeです。Google Chrome機能拡張として今表示しているタブのURLをQRコードで表示してくれます。 QR-Codeの使い方 実行したところ。巨大なQRコードが表示されます。 QR-Codeは非常に大きなQRコードが表示されます。これならば少し離れた人でもコードが読み取れるでしょう。便利なのは外部のWeb APIなどを実行している訳ではないのでサービスがオフライン時でも使えます。 Q
IEでドキュメントモードの既定値を変更する方法
IEでドキュメントモードの既定値を変更する方法を紹介します。 １．問題点 会社のあるシステムを使っていると、IEで次のようにレイアウトが崩れてしまいました。 具体的には「承認者」の下にあるボタンがテーブルの中に入り込んでしまっています。 原因はブラウザのドキュメントモードらしいので、F12を押下して、開発者モードを表示。 （クリックで拡大） ドキュメントモードの「7」が既定値になっているので、最新の「Edge」を選択。 これでレイアウト崩れが解消しました。 が、このページを正常に表示させるには毎回この操作を行わなければならないのですが、常に「Edge」を既定値にする方法はないでしょうか。 ということで、ドキュメントモードの既定値を変更する方法を紹介します。 ２．ドキュメントモードの既定値を変更する ドキュメントモードの既定値を変更するには、「ツール」→「互換表示設定」をクリック。 「イント
ウェブページにPDFを直接表示する方法
ウェブページにPDFを直接表示する方法を紹介します。 １．はじめに PDFをブラウザで表示するには、単純にPDFファイルのURLを記述すればOKです。 ウェブページにそのURLをリンクとして記述すれば、ウェブページからの閲覧も可能です。 が、PDFファイルを直接ウェブページに表示したいこともあると思いますが、その方法が分かりません。 ということで、ウェブページにPDFを直接表示する方法を紹介します。 ２．ウェブページにPDFを直接表示する ウェブページにPDFを直接表示するには、PDF.jsを利用します。 PDF.jsのページにアクセスして「Download」をクリック。 ダウンロードした「pdfjs-1.4.20-dist.zip（2016年7月時点のバージョン）」を展開します。 展開した中にあるbuildフォルダとwebフォルダをすべてアップロードします。 そしてHTML（index.
Responsible.js - スマートフォン向けにフルサイズ表示をシミュレート MOONGIFT
レスポンシブWebデザインは訪れたブラウザのウィンドウ幅によって見せるコンテンツを切り替えます。そのため、PCのブラウザであっても画面幅を縮めればスマートフォン用の見栄えをチェックすることができます。 しかし時によってはスマートフォンであってもPCブラウザ向けの表示でブラウジングしたい時があるはずです。そんな時に使えるのがResponsible.jsです。 Responsible.jsの使い方 まずは最初の表示。スマートフォンに最適化されています。 Toggle Desktopをクリックすると、フルサイズのブラウザ向け表示に切り替わります。 別なボタンを押せば、いつでもスマートフォン向けの表示に戻せるようになっています。スマートフォン向けとして情報を大幅に削ってしまっている場合、こうした表示切り替えは便利かも知れません。 iPhoneでも類似の機能がありますが、こちらは画面の再読み込みが不
ウェブサイトにFacebookページのタイムラインを表示する方法
ウェブサイトにFacebookページのタイムラインを表示する方法を紹介します。 １．はじめに ウェブサイトを運営している場合、TwitterやFacebookと連動させていることがあると思います。 ここではFacebookのページプラグインを利用して、ウェブサイトにFacebookページのタイムラインを表示させる方法を紹介します。 ２．Facebookページのタイムラインを表示させる Facebookのページプラグイン作成ページにアクセスします。 Facebookのページプラグイン作成ページ 設定項目に必要な事項を入力します。 Facebook Page URL：表示したいFacebookのURL Width：表示させる幅（180～500px） Height：表示させる高さ（最低70px） Use Small Header：ヘッダを小さく表示 Adapt to plugin contain
Show me the React! - Reactを使っているサイトが一目で分かる！ MOONGIFT
Reactでの開発を学ぶ上で、既存のReactを利用しているサイトを見てその内容を把握するのは良い材料になるでしょう。しかし表面上はDOMを出力しただけなのでReactを使っているのかどうかは分かりづらいです。 そこで使ってみたいのがShow me the React!です。Reactを使っているWebサイトがあればアドレスバーで通知してくれるようになります。 Show me the React!の使い方 Reactで作られているサイトを見ると、アドレスバーにReactのアイコンが出るようになります。 さらにクリックするとReactを使っているDOM部分がハイライト表示されます。 こんな感じでどの部分がReactで生成されているのかが視覚的に分かりやすくなります。 React開発時のヘルパーとして入れておくと便利ではないかと思います。今後、増えていくと思われるReactのシェアを知る上でも
jQueryでページ分割ができる「SimplePaginationプラグイン」
jQueryでページ分割ができる「SimplePaginationプラグイン」の紹介です。 １．はじめに ページ分割の手法は色々ありますが、このエントリーで紹介するプラグインを利用することで簡単にページ分割を行うことができます。 が、配布サイトの説明だけで実現するのはかなり困難で、このエントリーでとりあえず動作するレベルのものを紹介したいと思います。 ２．プラグインのダウンロード SimplePaginationプラグインのページにアクセスし、Downloadにある「here」をクリックしてアーカイブをダウンロードします。 ダウンロードしたアーカイブを展開し、中にある、 jquery.simplePagination.js simplePagination.css を利用します。 ３．基本 ページ分割用のテキストを用意します。ここではサンプルとして8ページ分用意します。 <div clas
[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
Google Chromeで新しいタブを開いたときに空白ページを表示する方法
Google Chromeで新しいタブを開いたときに空白ページを表示する方法を紹介します。 １．問題点 Google Chromeで新しいタブを開くと、Google検索画面と、その下に閲覧履歴のサムネイルが8個表示されます。 これを変更して、新しいタブを開いたときには空白ページを表示したいのですが、デフォルトでその設定が行えません。 ２．新しいタブを開いたときに空白ページを表示する ここではChrome拡張「Empty New Tab Page」をインストールします。 「Empty New Tab Page」のページにアクセスして「無料」をクリック。 「追加」をクリック。 「「Empty New Tab Page」がChromeに追加されました」と表示されればインストール完了です。 これで新しいタブを開くと、次のように空白ページが表示されます。 新しいタブを開いた初回のみ、「この新しいタブ
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
PC漫画ビューア「Leeyes」の使い方/インストール/初期設定方法【zip, rar, jpg】
PC漫画ビューアとは？ スキャナーで取り込んだり、ネットからパソコン(PC)に保存した漫画や雑誌の画像を、快適に見るためのソフトがPC漫画ビューアです。または、コミックビューアとも呼ばれています。 見開き表示で漫画を読むように閲覧したり、マウスクリックやキーボードのボタンクリック等で簡単にページをめくることも可能で、まるで本当の本を読んでいるかのように漫画を閲覧することが可能になります。 もちろん、画像であればなんでもみれるので、自分が撮りためている写真を本を読む感覚で見ることも可能。 しおり機能や書庫（本棚）機能もあるので、画像の整理・整頓にも便利です。 今回は数あるPC漫画ビューアソフトの中でも、無料で高機能・圧縮ファイルの閲覧も可能な、管理人イチオシのフリーソフト、「Leeyes」の使い方/初期設定方法についてまとめてみます。 PC漫画ビューア「Leeyes」のダウンロード まずは、
Google ChromeでHTTPを確認する拡張「HTTP Headers」
Google ChromeでHTTPを確認する拡張「HTTP Headers」について紹介します。 １．概要 Google Chrome拡張「HTTP Headers」は、ページのHTTPヘッダーを簡単に確認することができるものです。 なお、Google Chromeではデフォルトの機能でHTTPを確認する方法がありますがちょっとみにくいので、今回はこちらの拡張を紹介します。 ２．インストール 「HTTP Headers」のページにアクセス。 （クリックで拡大） 右上にある「無料」をクリック。 表示されたダイアログの「追加」をクリック。 「CHROMEに追加済み」に表示が変わればインストール完了です。 ３．表示されているページのHTTPヘッダを確認する 表示されているページのHTTPヘッダを確認する方法です。ここではYahoo JAPANのページを例に説明します。 ページを表示した状態で右
WordPressのテーマをカスタマイズする際に便利な条件分岐タグをまとめました≫ゆきちゃん日記
このページには表示させたいけど、このページには表示させたくない！なんていうわがままを叶えてくれる、WordPressの条件分岐タグをご紹介します。
jQueryでヘッダーに現在の見出し要素を表示する「DisplayHeadingプラグイン」
jQueryでヘッダー部分に現在の見出し要素を表示する「DisplayHeadingプラグイン」を公開します。 このプラグインは以下のページの振舞いに触発されて作りました。 Phusion Passenger users guide, Apache version １．サンプル サンプルを用意しました。 サンプル スクロールして見出し要素が通過するたびにページ上部のヘッダー部分に見出しのタイトルを表示します。 逆スクロールしても、同じように見出しのタイトルを遡って表示します。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displayheading.js」にリネームしてください。 jquery.displayheading_0.0.1.js 以下、設定方法です。 ３．HTML 見出しの内容を表示させたいHTMLを、body終了タグ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意のWebサイトや要素に設定されたCSSを解析するChromeエクステンション・「CSS Peeper」
レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス
IDEA * IDEA
