フォント管理に大活躍！好きな文字でフォントを一覧表示できる、Win, Mac, Linux対応の国産無料アプリ -fontvuer
インストール済みのフォントを好きな文字で一覧表示できる、Windows, macOS, Linux対応の国産アプリを紹介します。 国産なので日本語フォントはもちろん、英語フォントもサポートされています。 いろいろなフォントで比べてみたい人、特にフォントがたくさんの人に便利です！ fontvuer fontvuer -GitHub fontvuerの特徴 fontvuerのダウンロード・インストール fontvuerの使い方 fontvuerの特徴 既視感を抱いた人は大正解！ fontvuerは先日リリースされたばかりの国産アプリで、以前当ブログで紹介した「Fontviewer（紹介記事）」の後継の新作です。 基本的な機能はほぼ同じですが、使い勝手が大幅に強化されています！
mobileSelect - モバイル特化型のドロップリスト
スマートフォンとデスクトップでは画面の大きさが異なるため、最適なUI/UXが異なります。しかしWebは基本的に共通のコンポーネントとなっており、JavaScriptやCSSで工夫しなければなりません。 よく使われる割にUXがいけてない、セレクトをスマートフォン向けにいい感じにしてくれるmobileSelectを紹介します。 mobileSelectの使い方 デモです。選択肢が一つの場合。 複数の選択肢がある場合。 こんな複雑なものも。ダイヤル式ロックのようです。 さらに複数の選択肢を連携させることもできます。 最初の選択肢によって次の選択肢が出る場合と出ない場合を作れます。 mobileSelectはスマートフォンに特化したUI/UXになっています。特に複数選択肢を一度のドロップダウンで行えるのは便利です。PC向けには別途作成する必要がありますが、スマートフォンアクセスが多い場合やハイブリ
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
無料版は3分、だが便利！ブラウザのさまざまなバージョンで簡単に表示確認・レスポンシブの確認ができる -Browserling
IE, Chrome, Firefox, Opera, Safariなど、ブラウザのさまざまなバージョンでの表示確認、レスポンシブの確認などが、簡単にブラウザ上でできるオンラインサービスを紹介します。 有料版だと、ローカルでも確認できる優れものです。 Browserling Browserlingは無料版と有料版が提供されており、無料版はセッションは3分、IEは9/Vistaのみ（他は全バージョン可）、解像度は1024x768のみと使用条件は限られますが、なかなか便利だと思います。 セッションはインタラクティブ 単なるスクリーンショットではなく、ブラウザ上のさまざまなインタラクションを実行できます。 本物のブラウザを使用 サーバー上では本物のブラウザを動作させており、エミュレータなどの偽のブラウザではありません。 最新ブラウザへの対応 最新ブラウザがリリースされたら、すぐにインストールを行
Excelでセルの数式をまとめて表示する方法
Excelでセルの数式をまとめて表示する方法を紹介します。 １．問題点 Excelに次のような値が設定されています。 B11/C11/D11セルには、それぞれの上のセルにある数字を合計する数式が設定されています。 B11/C11/D11セルの数式を確認したい場合、数式が設定されているいずれかのセルを選択すれば、数式バーに数式が表示されます。 が、これらの数式をまとめて確認したいのですが、まとめて表示させる方法が分かりません。 ということで以下に2つの方法を紹介します。 ２．セルの数式をメニューからまとめて表示する セルの数式をまとめて表示するには、メニューの「数式」を選択。 「ワークシート分析」の「数式を表示」をクリック。 これでセルの数式がすべて表示されます。 セルの横幅が広がっていますが、これは数式表示で自動的に調整されるものです。 「数式の表示」をもう一度クリックすれば元の表示に戻り
Excelで1ファイルの異なるシートを同時に表示する方法
Excelで1ファイルの異なるシートを同時に表示する方法を紹介します。 このエントリーはビギナーの方向けの内容です。 １．問題点 ひとつのExcelファイルで「Sheet1」の内容を見ながら「Sheet2」に入力したいのですが、同じファイルのため毎回シートをクリックして切り替える必要があります。 ということで、同じファイルの異なるシートを同時に表示させる方法が分かりません。 ２．異なるシートを同時に表示する 異なるシートを同時に表示するには、まず「表示」タブをクリック（複数ファイルを開いている場合は並べて表示したいファイルを選択した状態で「表示」タブをクリック）。 「新しいウィンドウを開く」をクリック。 これで同じファイルのウィンドウが2つ開きます。2つめのウィンドウには「:2」がつきます。 あとは「表示」→「整列」をクリック。 ここでは「重ねて表示」をクリック。 これで1つのファイルを2
Demo • jQuery Feeds
<script type="text/html" id="entryTmpl"> <article class="<!=source!> entry"> <p> <a class="link" href="<!=feedLink!>" title="<!=feedDescription!>"><!=feedTitle!></a> <span class="publishedDate"><!=publishedDate!></span> </p> <p class="author"><!=author!></p> <div class="content"><!=content!></div> </article> </script> $('.feed').feeds({ feeds : { facebook : 'http://www.facebook.com/feeds/page.php?
Google Mapで任意の場所の周囲にある施設をマーカーで表示するjQueryプラグイン・WhatsNearby
Google Mapで、任意のポイントと、そのポイントの周囲にある施設をマーカーで表示出来る、というスクリプトです。範囲の距離の指定や施設の種類、中心地に設定したマーカーなども設定出来るようになっています。 Google Mapの任意の場所の周囲にある施設をマーカー表示する、というもの。うまく説明出来ませんが語彙がアレなのでご了承下さい。 以下動作サンプルです。 下北沢駅周辺の半径200メートル内のカフェを表示させました。マーカーをクリックすればお店の情報がポップアップします。 $("#foo").whatsnearby({ zoom:17, width:"100%", address: "下北沢", placesRadius: 200, placesTypes: [ 'cafe' ] });セッティングは上記のような感じ。placesRadiusで指定場所から半径～メートル内にある、pl
地味だけど便利！Photoshopでカラーの明度のバリエーションを簡単に展開できる機能拡張 -Lighten / Darken Color
Lighten / Darken Color カラーの明度を変更するのはもちろんPhotoshopのカラーピッカーで調整することはできますが、いちいち手作業でやるのは面倒くさいもの。そんな時は、この機能拡張を入れるとショートカットで簡単にできます。 明度を10%の増減で展開 Lighten / Darken Colorのインストール インストールは簡単です。 下記ページの中程の「Downloaded here」からファイルをダウンロードします。 Lighten / Darken Color 「[KAM] Color Lighten-Darken Scripts.zip」を解凍します。 解凍した「Color Darken.jsx」と「Color Lighten.jsx」を下記のフォルダ内に移動します。 ファイルの格納先：Photoshop/Presets/Scripts/ Photoshop
複数ボックスを順に表示出来るモーダルウィンドウを実装するスクリプト・vex
複数の要素をモーダルウィンドウとして表示し、順に表示させる事が出来る、というスクリプト。うまく説明できませんので見てもらったほうが早そうですね・・ モーダルウィンドウを実装するスクリプトです。「21世紀のモーダルウィンドウだ！」との事。
Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法
Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法を紹介します。 １．概要 先日「Movable Typeの日付カスタムフィールドを使って現在時刻と比較する方法」を紹介しましたが、本エントリーではカスタムフィールドに設定した開始日と終了日をチェックして、現在の日付が期間内であれば「開催中」と表示します。 下のスクリーンショットは「最近のブログ記事」の右側に状況を表示させてみたものです。 完成例 前のカスタマイズ同様、jQueryを使ってリアルタイムに判定します。 ２．事前準備 次のようなカスタムフィールドを事前に2つ作成してください。 まず、開始日用のカスタムフィールドです。 システムオブジェクト：ブログ記事 名前：開始日（任意の名称でOK） 種類：日付と時刻 オプション：日付と時刻 ベースネーム：（任意の名称） テンプレートタグ：EntryCFStart
[JS]タイル状に配置した画像やテキストをランダムな順番でふわりと表示するスクリプト -champagne.js
グリッドに沿ってタイル状に配置した画像やテキストなどのエレメントをランダムな順番でふわりと表示するjQueryのプラグインを紹介します。 champagne.jsを実際に使用しているサイト「Perkstreet」 [ad#ad-2] champagne.jsの使い方 champagne.jsは、3ステップで簡単に実装できます。 画像やテキストをタイル状にCSSで実装。 jQueryと当スクリプトをインクルード。 親エレメントをjQueryのセレクタで指定し、スクリプトを実行。 下記に、デモページを例に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
[JS]複数のソーシャルメディアを合算して表示するスクリプト -Share Count
設置も簡単、TwitterやFacebookなど複数のソーシャルメディアのカウント数を合算して表示する超軽量(2kb)スクリプトを紹介します。 Share Count [ad#ad-2] Share Countのデモ Share Countの実装 Share Countのデモ 設定したソーシャルメディアのカウント数は、合算して一緒に表示されます。 デモのようにアイコンを添えるといい感じです。 Share Count JSの右サイドバーに設置 [ad#ad-2] Share Countの実装 実装は、簡単です。 HTML 「class=sharecount」をつけたdiv要素を配置します。 <div class="sharecount">Share</div> 特定のサイトのカウントを表示する場合は、a要素を使用します。 例：www.google.com <a href="http://ww
Movable Typeのカスタムフィールドに入力した複数のブログ記事IDからブログ記事リストを出力する
Movable Typeのカスタムフィールドに入力した複数のブログ記事IDからブログ記事リストを出力するカスタマイズを紹介します。 MTQで質問がありましたので、本エントリーで情報展開します。 １．カスタマイズイメージ カスタムフィールド「ブログ記事ID」を作成します。種類は「テキスト」、テンプレートタグは「MTEntryIDs」とします。 ブログ記事編集画面に表示されたカスタムフィールド「ブログ記事ID」に、ブログ記事ページに表示したいブログ記事のIDをカンマ区切りで設定します。 ブログ記事を保存すれば、該当のブログ記事ページに、カスタムフィールドに入力したブログ記事IDに対応するブログ記事のリストを出力します（赤枠部分）。 以下、カスタマイズ方法を順を追って解説します。 ２．Splitプラグインのインストール 以下のリンクよりSplitプラグインをダウンロード・インストールします。 S
Google＋のフォトスタックを実現するjQuery＆CSS3のサンプル:phpspot開発日誌
Google Plus Photo stack animation using Jquery and CSS3 Google＋のフォトスタックを実現するjQuery＆CSS3のサンプル カーソルを合わせるとアニメーションをしながら展開されるフォトスタックを実現するチュートリアルとデモがダウンロード可能です。 写真の一覧をオシャレに出したいような場合に使えます。 デモページはこちら こうしたテクニックが当たり前になってくると更に応用して新しいインタフェースが出てきたりして楽しみです 関連エントリ カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル
[JS]複数のエレメントをフェードのアニメーションで華麗に表示するスクリプト
Display Elements Sequentially with jQuery デモページ [ad#ad-2] 実装は非常にシンプルです。 HTML デモでは、画像をリスト要素で配置しています。 <ul> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> </ul> HTML アニメーションのトリガーとなるのは、「Show Images」のテキストリンクを使用しています。 <p style="clear: both; display: none;
jQuery - So So Social - jQuery News Feed from your Social Networks
So So Social Plug-In. Powered by jQuery and YQL. Plug-In Intro The So So Social plug-in uses jQuery and YQL (Yahoo Query Language) to gather RSS feeds from your various social networks and sorts them into an "activity feed". It basically creates a news feed out of your social networking activity. Think of it like the news feed on Facebook but for you and your various social networking news. Plug-I
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス
IDEA * IDEA
IDEA * IDEA