「8.8.8.8,8.8.4.4」より速い「129.250.35.250」: 小粋空間

2011/09/17 1206 users iPhone ＤＮＳ レスポンス WiFi接続 測定ツール

iPhoneのDNSの設定変更が話題になっているようなので、レスポンスの速いDNSサーバがないか調べてみました。便乗記事です。 ネタフル - iPhoneのWiFi接続を高速化する魔法の数字「8.8.8.8,8.8.4.4」 測定ツールはWindows用の「DNS Nameserver Performance Benchmark」です。ツールの詳細は割愛しますが、測定するには下のスクリーンショット... 続きを読む

TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」: 小粋空間

2012/02/05 867 users Twitter Facebook サンプル タイムライン

TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると... 続きを読む

floatを解除する方法のまとめ: 小粋空間

2013/03/27 678 users float After CSS 擬似要素 まとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高... 続きを読む

jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説: 小粋空間

2011/12/11 474 users ThemeRoller jQuery Mobile 状態

jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011... 続きを読む

ノンプログラマーのためのjQuery生成ツール: 小粋空間

2012/11/12 419 users ノンプログラマー jQuery jQuery生成ツール 設定

ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェ... 続きを読む

いまさら聞けないCSS font-familyのまとめ: 小粋空間

2012/08/12 419 users まとめ font-family 太字 イタリック体 CSS

CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 調べたついでに、当ブログのfont-familyも変更してみました。 変更前 変更後 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「... 続きを読む

HTMLやCSSでのプロトコル表記（http:、https:）の省略について: 小粋空間

2012/05/10 343 users リソース エントリー CSS 便乗記事 省略

HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <... 続きを読む

ページを移動（離脱）するときにjQueryで警告を出す方法: 小粋空間

2013/03/10 335 users Facebook jQuery script src 離脱

Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.goog... 続きを読む

IE6/IE7/IE8/IE9の共存まとめ: 小粋空間

2011/01/16 332 users IETester 共存 IE6 IE7 IE9

Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用＋IETesterでIE9を... 続きを読む

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」: 小粋空間

2012/09/19 319 users Responsive Firefox デバイス タブレット

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応し... 続きを読む

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由: 小粋空間

2013/06/11 270 users function ソーシャルボタン Twitter 理由

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="t... 続きを読む

CDNでウェブサイトを高速化するためのまとめ: 小粋空間

2012/06/12 136 users CDN Con まとめ ウェブサイト バージョン

CDNでウェブサイトを高速化するためのまとめです。 「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。 認識誤り等ありましたらどこかでつぶやいてください。 １．CDNとは CDNとは「Contents Delivery Network（コンテンツデリバリネットワーク）」または「Con... 続きを読む

jQueryで要素の表示・非表示を判定する方法: 小粋空間

2012/08/02 128 users jQuery foo hide show ＩＳ

jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やis... 続きを読む

三点リーダが真ん中に表示されない理由: 小粋空間

2013/02/26 114 users 語尾 余韻 記号 真ん中 三点リーダ

三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リ... 続きを読む

link要素「rel="canonical"」のまとめ: 小粋空間

2012/08/15 105 users rel canonical link要素 属性 まとめ

link要素のrel="canonical"について調べてみました。 以下、主にGoogleの「rel="canonical" 属性について」の記載を引用しながら、FAQ形式で書いていますが、認識誤りがありましたらどこかでつぶやいてください。 １．利用目的は？ 「検索エンジンのインデックス内での重複コンテンツ問題」解消のためです。 下の図で示すURLは、同じページにアクセスしているにもかかわらず、... 続きを読む

WordPressでサイトアドレスを変更する方法: 小粋空間

2013/04/17 103 users サブディレクトリ WordPress 備忘録 ドメイン 方法

WordPressでサイトアドレスを変更する方法を紹介します。 定番カスタマイズだと思いますが、カスタマイズの理由まで言及している記事が見当たらなかったので、その解説も含めて備忘録で残しておきます。 ここでは、ドメインのサブディレクトリ（http://user-domain/wordpress/）にWordPressをインストールしている状態で、サイトアドレスをドメイン（http://user-d... 続きを読む

jQueryでスマホサイト向けに画像サイズを縮小する方法: 小粋空間

2011/09/15 103 users jQuery Movable Type カスタマイズ サイズ

jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更... 続きを読む

YouTubeを効果的に見せるための12の隠しパラメータ: 小粋空間

2012/04/23 101 users YouTube frameborder パラメータ src

YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されて... 続きを読む

入力フォームの全角・半角を勝手に変換してくれるJavaScript: 小粋空間

2013/08/27 100 users 発端 迷宮 制御 半角文字 半角全角

入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめて... 続きを読む

FacebookページへのIFrameタブ追加方法が変更: 小粋空間

2011/12/15 97 users Facebookページ 変更

Facebookの開発者ブログで、「2012年2月1日にすべてのアプリケーションのプロフィールページを削除します」というアナウンスがありました。 Removing App Profile Pages この関係で、2011年12月10日以降に新しく作成したアプリケーションについては、「アプリのプロフィールページを見る」というリンクが表示されなくなりました。 2011年12月10日以前に作成したアプリ... 続きを読む

jQueryによる要素の存在チェックまとめ: 小粋空間

2012/04/17 94 users jQuery selector jQueryオブジェクト

jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括っ... 続きを読む

HTMLの整形やJavaScriptの難読化を解除する「jsbeautifier.org」: 小粋空間

2012/02/20 91 users HTML 整形 Online 難読化 Not Found

HTMLの整形やJavaScriptの難読化を解除する「jsbeautifier.org」を紹介します。 JavaScriptの難読化解除には「JsDecoder」を利用していましたが、いつのまにか「Not Found」になってしまってました。 JsDecoder ということで代わりのサイトを探したところ、「Online JavaScript beautifier」を見つけました。 Online ... 続きを読む

img要素でCSS Spriteする方法: 小粋空間

2012/06/06 90 users img要素 座標 CSS Sprite HTTPリクエスト数

「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは... 続きを読む

Firefox3とFirefox4の共存: 小粋空間

2011/03/23 85 users 途中 バックアップ Windows 手順 共存方法

Firefox3とFirefox4のWindowsでの共存方法を紹介します。Firefox4はFirefox3.6と比べ、かなり動作が速くなっているようです。以下、共存するための手順を紹介します。注意事項は次の通りです。１項のバックアップは必ず行ってください作業の途中でFirefox4を起動しないでくださいそれでもFirefox4を起動させてしまった場合は、６項に進んでください（１項の作業を行なっ... 続きを読む

iPhoneをウェブカメラにする方法: 小粋空間

2012/11/25 82 users iPhone ビューワー ウェブカメラ LTE WiFiルータ

iPhoneをウェブカメラにする方法を紹介します。 １．接続イメージ 接続イメージは図のとおりです。iPhoneで撮影した映像を、WiFiを利用してビューワーとなるPCにデータを転送します。 ということでiPhoneはWiFi接続している必要があります。3GやLTEでは使えません。 また、iPhoneとPCは同じネットワーク（＝WiFiルータ）に接続されている必要があります。 本エントリーではiP... 続きを読む